ยืนยันตัวตน เว็ปไซด์กับ 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 สัปดาห์ ในการเริ่มแสดงผลหน้าเว็บ