เว็บไซต์หลายแห่งมีหน้าเว็บหลายเวอร์ชันตามภาษาหรือภูมิภาคของผู้ใช้ ลิงก์ hreflang
จะบอกให้เครื่องมือค้นหาทราบ URL ของหน้าเว็บทุกเวอร์ชันเพื่อให้แสดงเวอร์ชันที่ถูกต้องสำหรับแต่ละภาษาหรือภูมิภาค
สาเหตุที่การตรวจสอบ hreflang
ของ Lighthouse ไม่ผ่าน
Lighthouse จะแจ้งว่าลิงก์ hreflang
ไม่ถูกต้องในกรณีต่อไปนี้
![การตรวจสอบ Lighthouse ที่แสดงลิงก์ hreflang ไม่ถูกต้อง](https://developer.chrome.google.cn/static/docs/lighthouse/seo/hreflang/image/lighthouse-audit-showing-c1b52e7e2527d.png?hl=th)
Lighthouse จะตรวจหาลิงก์ hreflang
ใน head
ของหน้าเว็บและในส่วนหัวการตอบกลับ
จากนั้น Lighthouse จะตรวจสอบรหัสภาษาที่ถูกต้องภายในhreflang
ลิงก์
Lighthouse จะรายงานลิงก์ hreflang
ที่มีรหัสภาษาไม่ถูกต้อง
Lighthouse จะไม่ตรวจสอบรหัสภูมิภาคหรือ Sitemap
วิธีกําหนดลิงก์ hreflang
สําหรับหน้าเว็บแต่ละเวอร์ชัน
สมมติว่าคุณมีหน้าเว็บ 3 เวอร์ชัน ดังนี้
- เวอร์ชันภาษาอังกฤษที่
https://example.com
- เวอร์ชันภาษาสเปนได้ที่
https://es.example.com
- เวอร์ชันภาษาเยอรมันที่
https://de.example.com
ในการบอกเครื่องมือค้นหาว่าหน้าเหล่านี้มีความเท่าเทียมกัน คุณทําได้ 3 วิธีดังนี้ เลือกวิธีที่สะดวกที่สุดสำหรับสถานการณ์ของคุณ
ตัวเลือกที่ 1: เพิ่มลิงก์ hreflang
ลงใน <head>
ของแต่ละหน้า โดยทำดังนี้
<link rel="alternate" hreflang="en" href="https://example.com" />
<link rel="alternate" hreflang="es" href="https://es.example.com" />
<link rel="alternate" hreflang="de" href="https://de.example.com" />
หน้าเว็บแต่ละเวอร์ชันต้องลิงก์ไปยังเวอร์ชันอื่นๆ ทั้งหมด รวมถึงเวอร์ชันของตัวเอง มิฉะนั้น เครื่องมือค้นหาอาจไม่สนใจลิงก์ hreflang
หรือตีความลิงก์อย่างไม่ถูกต้อง
สําหรับหน้าเว็บที่อนุญาตให้ผู้ใช้เลือกภาษา ให้ใช้คีย์เวิร์ด x-default
ดังนี้
<link rel="alternate" href="https://example.com" hreflang="x-default" />
ตัวเลือกที่ 2: เพิ่มส่วนหัว Link
ในการตอบกลับ HTTP
Link: <https://example.com>; rel="alternate"; hreflang="en", <https://es.example.com>;
rel="alternate"; hreflang="es", <https://de.example.com>; rel="alternate"; hreflang="de"
ตัวเลือกที่ 3: เพิ่มข้อมูลเวอร์ชันภาษาลงใน Sitemap
<url>
<loc>https://example.com</loc>
<xhtml:link rel="alternate" hreflang="es"
href="https://es.example.com"/>
<xhtml:link rel="alternate" hreflang="de"
href="https://es.example.com"/>
</url>
ของ Google
หลักเกณฑ์สำหรับค่า hreflang
- ค่า
hreflang
ต้องระบุรหัสภาษาเสมอ - รหัสภาษาต้องเป็นไปตามรูปแบบ ISO 639-1
- ค่า
hreflang
อาจมีรหัสภูมิภาค (ไม่บังคับ) ด้วย เช่นes-mx
สำหรับผู้ใช้ที่พูดภาษาสเปนในเม็กซิโก ส่วนes-cl
สำหรับผู้ใช้ที่พูดภาษาสเปนในชิลี - รหัสภูมิภาคต้องเป็นไปตามรูปแบบ ISO 3166-1 alpha-2