ยืนยันตัวตน เว็ปไซด์กับ Google
#พื้นฐานการเขียนเว็ปไซต์ #googlesearch #ติดเทรนด์ #google_search_console
การนำโปรเจกต์ Vite + React ที่อยู่บน Vercel ไปทำ Google Search Console เพื่อให้ Google เข้ามาอ่านข้อมูลและแสดงบนหน้าผลการค้นหา มีขั้นตอนที่ละเอียดดังนี้ครับ:
ขั้นตอนที่ 1: เพิ่มเว็บไซต์ใน Google Search Console
ไป ที่ Google Search Console แล้ว Login ด้วย Gmail
คลิก "Add property" (เพิ่มพร็อพเพอร์ตี้)
จะมีให้เลือก 2 แบบ:
Domain: (ต้องตั้งค่าที่ผู้ให้บริการโดเมน เช่น Cloudflare, GoDaddy)
URL prefix: (แนะนำสำหรับมือใหม่ หรือผู้ที่ใช้โดเมน .vercel.app) ให้ใส่ URL เต็มของเว็บคุณ เช่น https://my-project.vercel.app แล้วกด Continue
ขั้นตอนที่ 2: การยืนยันตัวตน (Ownership Verification)
วิธีที่ง่ายที่สุดสำหรับโปรเจกต์ React คือการใช้ HTML Tag ครับ
ในหน้า Google Search Console เลือกวิธี HTML Tag
คัดลอกโค้ดที่มีลักษณะแบบนี้:
<meta name="google-site-verification" content="รหัสตัวเลขและตัวอักษร" />
กลับไปที่โปรเจกต์ Vite ในเครื่องของคุณ
เปิดไฟล์ index.html (อยู่ที่ Root ของโปรเจกต์)
วางโค้ดที่ก๊อปปี้มาไว้ในส่วน <head> ... </head>
HTML
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="google-site-verification" content="รหัสของคุณ" />
<title>ชื่อเว็บของคุณ</title>
</head>
Save แล้วทำการ git commit และ git push ขึ้น GitHub เพื่อให้ Vercel ทำการ Re-deploy ใหม่
ขั้นตอนที่ 3: กด Verify ใน Google Search Console
เมื่อ Vercel Deploy เสร็จแล้ว (ลองเปิดหน้าเว็บดูว่ามีโค้ด meta หรือยังโดยการกด Ctrl+U)
กลับไปที่หน้า Google Search Console แล้วกดปุ่ม "Verify"
หากถูกต้อง ระบบจะขึ้นว่า "Ownership verified"
ขั้นตอนที่ 4: การทำ Sitemap (เพื่อให้ Google รู้จักทุกหน้า)
เนื่องจาก React เป็น Single Page Application (SPA) เราควรสร้าง Sitemap เพื่อบอก Google ว่ามีหน้าไหนบ้าง
สร้างไฟล ์ Sitemap แบบง่าย: สร้างไฟล์ชื่อ sitemap.xml ไว้ในโฟลเดอร์ public ของโปรเจกต์ Vite
ใส่โค้ดนี้ลงไป (เปลี่ยน URL เป็นของคุณ):
XML
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://your-project.vercel.app/</loc>
<lastmod>2023-10-27</lastmod>
</url>
<url>
<loc>https://your-project.vercel.app/about</loc>
<lastmod>2023-10-27</lastmod>
</url>
</urlset>
Push งานขึ้น Vercel อีกครั้ง
ใน Google Search Console ไปที่เมนู Sitemaps ด้านซ้ายมือ
ใส่คำว่า sitemap.xml ในช่อง "Add a new sitemap" แล้วกด Submit
ขั้นตอนที่ 5: การทำ SEO เพิ่มเติม (สำคัญมากสำหรับ React)
Vite + React ปกติจะเป็น Client-Side Rendering (CSR) ซึ่ง Google อาจจะมองไม่เห็นเนื้อหาถ้ าไม่ได้ตั้งค่า Metadata ให้ดี:
ใส่ Title และ Description: ในไฟล์ index.html ตรวจสอบว่ามีแท็กเหล่านี้:
HTML
<title>ชื่อเว็บที่ต้องการให้โชว์บน Google</title>
<meta name="description" content="คำอธิบายสั้นๆ เกี่ยวกับเว็บไซต์ของคุณ (ประมาณ 150-160 ตัวอักษร)">
ใช้ React Helmet (แนะนำ): หากต้องการให้แต่ละหน้ามีชื่อ (Title) ไม่เหมือนกัน ให้ติดตั้ง react-helmet-async เพื่อจัดการ Metadata ในแต่ละ Component
ขั้นตอนสุดท้าย: ขอให้ Google เก็บข้อมูล (URL Inspection)
หากคุณต้องการให้ Google รู้จักเว็บคุณทันที (ไม่รอคิว):
ไปที่เมนู URL inspection ใน Search Console
วาง URL เว็บของคุณลงไปในช่องค้นหาด้านบน
หากขึ้นว่า "URL is not on Google" ให้กดปุ่ม "Request Indexing"
หมายเหตุ: หลังจากทำครบทุกขั้นตอน Google อาจใช้เวลาตั้งแต่ 1 วัน ถึง 2 สัปดาห์ ในการเริ่มแสดงผลหน้าเว็บ
เมื่อคุณสร้างเว็บด้วย Vite + React และโฮสต์บน Vercel การยืนยันตัวตนกับ Google Search Console เป็นสิ่งสำคัญเพื่อให้ Google เข้าใจและระบุเว็บไซต์ของคุณอย่างถูกต้อง สำหรับตัวผมเอง การทำตามขั้นตอนแบบละเอียดที่อธิบายในบทความนี้ช่วยให้การจัดการเว็บไซต์เป็นระบบมากขึ้น โดยเฉพาะการใช้ Meta tag ในไฟล์ index.html เพื่อยืนยันตัวตนง่ายและรวดเร็ว รวมถึงการสร้าง sitemap.xml ซึ่งช่วยให้ Google รู้จักและเก็บข้อมูลทุกหน้าของเว็บไซต์ได้ครบถ้วน แม้ว่า React จะเป็น SPA (Single Page Application) ก็ตาม ประสบการณ์ตรงคือ การติดตั้ง react-helmet-async เพื่อจัดการ Title และ Description ในแต่ละหน้า ทำให้ SEO ประสิทธิภาพดีขึ้นมาก เพราะแต่ละหน้าสามารถมีข้อมูลอธิบายเฉพาะตัวที่แตกต่างกันได้ ซึ่งส่งผลให้การแสดงผลในหน้าค้นหาเหมาะสมและดึงดูดผู้ใช้งานมากขึ้น อีกเทคนิคที่อยากแชร์คือ การใช้เมนู URL Inspection ใน Google Search Console เพื่อส่งคำขอให้ Google ทำการ indexing หน้าเว็บทันที ไม่ต้องรอคิวตามปกติ ซึ่งสะดวกมากเมื่อเราอัปเดตเว็บหรือเพิ่มเนื้อหาใหม่ๆ อย่างไรก็ดี การจะเห็นผลลัพธ์ของการยืนยันและการจัดอันดับบน Google อาจต้องใช้เวลาตั้งแต่ 1 วันจนถึง 2 สัปดาห์ จึงต้องใจเย็นและตรวจสอบสถานะใน Search Console เป็นระยะ สุดท้ายนี้ การตั้งค่า SEO และยืนยันตัวตนเว็บกับ Google ไม่ใช่เรื่องยากหากเข้าใจขั้นตอนและใช้เครื่องมือให้ถูกวิธี ขอแนะนำให้ทุกคนลองทำตาม พร้อมประเมินผลและปรับแต่งอย่างสม่ำเสมอ เพื่อให้เว็บของคุณแสดงผลได้ดีในผลการค้นหาและช่วยเสริมสร้างยอดผู้เข้าชมอย่างยั่งยืน
