ตั้งค่า hreflang สำหรับเว็บหลายภาษา

เมื่อเว็บมีหลายภาษา ปัญหาที่เกิดคือ Google อาจแสดงหน้าภาษาอังกฤษให้ผู้ค้นหาชาวไทย หรือมองว่าหน้าภาษาไทยกับภาษาอังกฤษเป็นเนื้อหาซ้ำกัน

hreflang คือการบอกว่าหน้าเหล่านี้เป็นเวอร์ชันภาษาของกันและกัน ไม่ใช่เนื้อหาซ้ำ และให้แสดงเวอร์ชันที่ตรงกับภาษาของผู้ค้นหา

สิ่งที่ต้องเตรียม

• เว็บที่มีเนื้อหาเดียวกันมากกว่าหนึ่งภาษา
• รายการคู่ URL ของแต่ละหน้าในทุกภาษา
• สิทธิ์แก้ไขส่วน head หรือ Sitemap

ขั้นตอนที่ 1: เลือกโครงสร้าง URL

• ซับไดเรกทอรี example.com/th/ และ example.com/en/ จัดการง่ายที่สุดและรวมความน่าเชื่อถือไว้ที่โดเมนเดียว เป็นตัวเลือกที่แนะนำสำหรับเว็บส่วนใหญ่
• ซับโดเมน th.example.com แยกได้ชัดเจนแต่ต้องดูแล DNS และ SSL เพิ่ม
• โดเมนแยกประเทศ example.co.th ให้สัญญาณประเทศแรงที่สุดแต่ต้องสร้างความน่าเชื่อถือแยกกันทุกโดเมน

สิ่งที่ไม่ควรทำคือใช้พารามิเตอร์ เช่น ?lang=th เพราะทำให้การจัดการดัชนีซับซ้อนโดยไม่จำเป็น

ขั้นตอนที่ 2: เข้าใจกฎสามข้อที่ห้ามผิด

1. ต้องอ้างอิงกลับ หากหน้า A บอกว่า B เป็นเวอร์ชันภาษาอังกฤษ หน้า B ต้องบอกว่า A เป็นเวอร์ชันภาษาไทยด้วย หากขาดข้างใดข้างหนึ่ง Google จะไม่สนใจทั้งคู่
2. ต้องอ้างถึงตัวเอง ทุกหน้าต้องมี hreflang ที่ชี้มาที่ตัวเองด้วย
3. ต้องใช้ URL แบบเต็ม รวมโพรโทคอลและโดเมน

ขั้นตอนที่ 3: เขียนในส่วน head

วิธีที่ใช้กันมากที่สุด ใส่ในทุกหน้าของทุกภาษาชุดเดียวกัน

<!-- ใส่เหมือนกันทั้งในหน้า /th/ และ /en/ -->
<link rel="alternate" hreflang="th" href="https://example.com/th/product/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/product/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/product/" />

x-default คือหน้าที่จะแสดงเมื่อไม่มีภาษาใดตรงกับผู้ค้นหา ควรเป็นหน้าเลือกภาษาหรือเวอร์ชันภาษาอังกฤษ

ขั้นตอนที่ 4: ใช้รหัสภาษาให้ถูกต้อง

รูปแบบคือรหัสภาษา หรือรหัสภาษาขีดกลางรหัสประเทศ

hreflang="th"       <!-- ภาษาไทย ทุกประเทศ -->
hreflang="en"       <!-- ภาษาอังกฤษ ทุกประเทศ -->
hreflang="en-th"    <!-- ภาษาอังกฤษ สำหรับผู้ใช้ในไทย -->
hreflang="zh-Hans"  <!-- จีนตัวย่อ -->
hreflang="zh-Hant"  <!-- จีนตัวเต็ม -->

ข้อผิดพลาดที่พบบ่อย

• ใช้ th-TH ทั้งที่ th ก็พอ การระบุประเทศจำกัดการแสดงผลเฉพาะผู้ใช้ในประเทศนั้น
• ใช้ en-UK ซึ่งไม่มีอยู่จริง รหัสที่ถูกต้องคือ en-GB
• สลับลำดับเป็น TH-th ต้องเป็นภาษาก่อนประเทศเสมอ

ขั้นตอนที่ 5: ใส่ใน Sitemap แทน

เหมาะกับเว็บที่มีหลายภาษาและหลายพันหน้า เพราะไม่ต้องเพิ่มโค้ดในทุกหน้า

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/th/product/</loc>
    <xhtml:link rel="alternate" hreflang="th" href="https://example.com/th/product/"/>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/product/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/product/"/>
  </url>
  <url>
    <loc>https://example.com/en/product/</loc>
    <xhtml:link rel="alternate" hreflang="th" href="https://example.com/th/product/"/>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/product/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/product/"/>
  </url>
</urlset>

สังเกตว่าทุก URL ต้องมีรายการครบทุกภาษารวมถึงตัวเอง

เลือกวิธีใดวิธีหนึ่ง อย่าใส่ทั้งในหน้าและใน Sitemap พร้อมกันเพราะหากไม่ตรงกันจะเกิดความขัดแย้ง

ขั้นตอนที่ 6: ใช้ HTTP Header สำหรับไฟล์ที่ไม่ใช่ HTML

location ~* /files/.*\.pdf$ {
    add_header Link '<https://example.com/th/files/doc.pdf>; rel="alternate"; hreflang="th", <https://example.com/en/files/doc.pdf>; rel="alternate"; hreflang="en"' always;
}

ขั้นตอนที่ 7: ตั้งใน WordPress

ปลั๊กอินแปลภาษาอย่าง Polylang และ WPML จัดการให้อัตโนมัติ ตรวจว่าทำงานถูกต้อง

curl -sL https://example.com/th/product/ | grep -oP '<link rel="alternate" hreflang[^>]+>'

เขียนเองเมื่อจำเป็น

add_action('wp_head', function () {
    $map = array(
        'th' => 'https://example.com/th' . $_SERVER['REQUEST_URI'],
        'en' => 'https://example.com/en' . $_SERVER['REQUEST_URI'],
    );
    foreach ($map as $lang => $url) {
        printf('<link rel="alternate" hreflang="%s" href="%s" />' . "\n",
               esc_attr($lang), esc_url($url));
    }
    printf('<link rel="alternate" hreflang="x-default" href="%s" />' . "\n",
           esc_url($map['en']));
}, 5);

ตัวอย่างนี้ใช้ได้เมื่อโครงสร้าง URL ของทั้งสองภาษาตรงกัน หากไม่ตรงต้องเก็บคู่ URL ไว้ในฐานข้อมูล

ขั้นตอนที่ 8: ตรวจสอบความถูกต้อง

# ตรวจว่าทุกหน้ามี hreflang ครบและอ้างอิงกลับถูกต้อง
for u in https://example.com/th/product/ https://example.com/en/product/; do
  echo "=== $u"
  curl -sL "$u" | grep -oP 'hreflang="[^"]+" href="[^"]+"'
done

ทั้งสองหน้าต้องแสดงรายการเหมือนกันทุกบรรทัด

ใน Search Console ดูรายงาน International Targeting หากมีข้อผิดพลาดจะแสดงสองประเภท คือ ไม่มีการอ้างอิงกลับ และรหัสภาษาไม่ถูกต้อง

ตรวจสถานะการเก็บดัชนีของแต่ละภาษาแยกกันด้วย URL Inspection

ปัญหาที่พบบ่อย

Search Console แจ้งว่าไม่มีการอ้างอิงกลับ

หน้าปลายทางไม่ได้ชี้กลับมา ตรวจด้วยคำสั่งในขั้นตอนที่ 8 และตรวจว่า URL ตรงกันเป๊ะ รวมถึงเครื่องหมายทับท้ายและตัวพิมพ์เล็กใหญ่

Google ยังแสดงภาษาผิด

hreflang เป็นสัญญาณ ไม่ใช่คำสั่ง Google อาจเลือกแสดงตามพฤติกรรมของผู้ใช้ ตรวจว่า canonical ของแต่ละหน้าชี้มาที่ตัวเอง ไม่ใช่ชี้ข้ามภาษา ซึ่งเป็นความผิดพลาดที่พบบ่อย

ใช้ hreflang กับหน้าที่เนื้อหาไม่ตรงกัน

hreflang ใช้กับหน้าที่เป็นเนื้อหาเดียวกันคนละภาษาเท่านั้น อย่าใช้ชี้ไปยังหน้าแรกของอีกภาษาเมื่อไม่มีหน้าที่ตรงกัน ให้ละเว้นภาษานั้นไปแทน

เว็บภาษาเดียวแต่ให้บริการหลายประเทศ

ใช้ hreflang แยกตามประเทศได้ เช่น en-th และ en-sg หากเนื้อหาต่างกันจริง เช่น ราคาและช่องทางติดต่อ หากเหมือนกันทุกอย่างไม่จำเป็นต้องใช้

ต้องการวางโครงสร้างเว็บหลายภาษาให้ถูกหลัก SEO ติดต่อ THAI DATA CLOUD ได้ที่ https://thaidata.cloud/contact/