Blog
hreflang
Hreflang คืออะไร? คู่มือ Implement สำหรับเว็บไซต์หลายภาษา
🔥 แค่ 5 นาที เปลี่ยนมุมมองได้เลย

Hreflang คืออะไร? คู่มือ Implement สำหรับเว็บไซต์หลายภาษา

By Tanakit Chaithip
June 30, 2025
ยาวไป อยากเลือกอ่าน?
hreflang

Hreflang คือ HTML attribute ที่บอก search engine ว่า URL ไหนเป็นเวอร์ชันภาษา/ภูมิภาคไหนของหน้าเดียวกัน ช่วยให้ Google แสดงผลลัพธ์ที่ถูกภาษาให้ถูกคน ลดปัญหา duplicate content ข้ามภาษา และเพิ่มประสิทธิภาพ multilingual website SEO

บทความนี้จาก Vision X Brain อธิบาย hreflang ตั้งแต่พื้นฐานจนถึงลงมือทำ — โค้ดภาษา BCP-47, ลิงก์ alternate แบบไป-กลับ, x-default, canonical, วิธีใส่ใน HTML/Sitemap/HTTP Header พร้อมเช็กลิสต์ตรวจเอง

Hreflang คืออะไร

ความหมายและหน้าที่

Hreflang เป็น attribute ใน <link rel="alternate"> tag ที่บอก search engine ว่า "หน้านี้มีเวอร์ชันภาษาอื่นอยู่ที่ URL นี้" ตัวอย่าง:

<link rel="alternate" href="https://example.com/th/product" hreflang="th" />
<link rel="alternate" href="https://example.com/en/product" hreflang="en" />

เมื่อ Google เจอ tag hreflang จะรู้ว่าทั้ง 2 URL เป็น content เดียวกันแต่คนละภาษา แล้วแสดงเวอร์ชันที่ตรงกับภาษา/ภูมิภาคของผู้ค้นหา

ทำไมต้องใช้ Hreflang

  • ป้องกัน duplicate content: Google ไม่นับเป็นหน้าซ้ำ เพราะรู้ว่าเป็นเวอร์ชันภาษาต่างกัน
  • แสดงผลถูกภาษา: คนไทยเห็นเวอร์ชันไทย คนอเมริกาเห็นเวอร์ชันอังกฤษ อัตโนมัติ
  • รวม ranking signals: ทุกเวอร์ชันภาษาช่วยเสริม authority ซึ่งกันและกัน
  • SEO hreflang: ช่วยให้ multilingual website SEO ทำงานได้ถูกต้อง ไม่เสีย traffic

หลักการสำคัญของ Hreflang

หลักการอธิบายตัวอย่าง
โค้ดภาษา BCP-47ใช้รหัสภาษา (ตัวพิมพ์เล็ก) + ภูมิภาค (ตัวพิมพ์ใหญ่ ถ้ามี)th, en, en-SG, zh-CN
ลิงก์แบบไป-กลับทุกเวอร์ชันต้องอ้างอิงซึ่งกันและกัน ห้ามชี้ทางเดียวหน้า EN ลิงก์ไป TH + หน้า TH ลิงก์กลับ EN
x-defaultใช้กับหน้าเลือกภาษาหรือ fallback สำหรับภาษาที่ไม่มีhreflang="x-default" ชี้ไปหน้า language selector
Self-canonicalแต่ละเวอร์ชันภาษา canonical หาตัวเอง ห้าม cross-language canonicalหน้า TH canonical = URL ของหน้า TH เอง
URL ต้องเป็น absoluteใช้ URL เต็ม ห้ามใช้ relative pathhttps://example.com/th/page ไม่ใช่ /th/page

วิธีใส่ Hreflang — 3 แบบ

แบบที่ 1: HTML Head (แนะนำสำหรับเว็บทั่วไป)

ใส่ tag hreflang ใน <head> ของทุกหน้าที่มีหลายภาษา วิธีนี้ง่ายที่สุดและ Google แนะนำเป็นหลัก

<!-- ใน <head> ของหน้า TH -->
<link rel="canonical" href="https://example.com/th/product-x" />
<link rel="alternate" href="https://example.com/th/product-x" hreflang="th" />
<link rel="alternate" href="https://example.com/en/product-x" hreflang="en" />
<link rel="alternate" href="https://example.com/en-sg/product-x" hreflang="en-SG" />
<link rel="alternate" href="https://example.com/" hreflang="x-default" />

แบบที่ 2: XML Sitemap (แนะนำสำหรับเว็บใหญ่)

เหมาะกับเว็บที่มีหลายร้อย/พันหน้า เพราะไม่ต้องแก้ HTML ทุกหน้า จัดการจาก sitemap hreflang ที่เดียว

<?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-x</loc>
    <xhtml:link rel="alternate" hreflang="th" href="https://example.com/th/product-x"/>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/product-x"/>
    <xhtml:link rel="alternate" hreflang="en-SG" href="https://example.com/en-sg/product-x"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/"/>
  </url>
</urlset>

แบบที่ 3: HTTP Header (สำหรับ non-HTML files)

ใช้กับไฟล์ที่ไม่ใช่ HTML เช่น PDF, document downloads ที่ไม่มี <head> ให้ใส่ tag

Link: <https://example.com/th/report.pdf>; rel="alternate"; hreflang="th",
      <https://example.com/en/report.pdf>; rel="alternate"; hreflang="en",
      <https://example.com/>; rel="alternate"; hreflang="x-default"

เลือกวิธีไหนดี?

วิธีเหมาะกับข้อดีข้อเสีย
HTML Headเว็บทั่วไป, CMSง่าย, Google แนะนำต้องแก้ทุกหน้า
XML Sitemapเว็บใหญ่ 100+ หน้าจัดการจุดเดียวSitemap ต้อง update ตาม
HTTP HeaderNon-HTML (PDF, docs)ใช้ได้กับทุกไฟล์ต้องควบคุม server config

ใช้หลายวิธีพร้อมกันได้ แต่ต้องสอดคล้องกัน — ข้อมูลใน HTML head ต้องตรงกับ sitemap hreflang

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

1. ลืมลิงก์ไป-กลับ

หน้า EN ลิงก์ไปหน้า TH แต่หน้า TH ไม่ลิงก์กลับ EN = Google ไม่สนใจ hreflang ทั้งคู่ ต้องอ้างอิงซึ่งกันและกัน

2. ใช้ cross-language canonical

หน้า TH canonical ชี้ไปหน้า EN = ผิด แต่ละภาษาต้อง self-canonical เสมอ

3. โค้ดภาษาผิด

ใช้ hreflang="thai" แทน hreflang="th" = ใช้ไม่ได้ ต้องเป็นรหัส BCP-47 เท่านั้น

4. ใช้ relative URL

ใส่ href="/th/page" แทน absolute URL เต็ม = Google อาจตีความผิด

5. ลืม x-default

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

เช็กลิสต์ตรวจ Hreflang ก่อนปล่อย

  • ทุกหน้ามีลิงก์ alternate ครบทุกเวอร์ชันภาษา (รวมตัวเอง)
  • ลิงก์เป็นแบบ "ไป-กลับ" ครบทุกคู่
  • ใช้รหัสภาษา BCP-47 ที่ถูกต้อง
  • URL เป็น absolute ทั้งหมด
  • แต่ละภาษา self-canonical (ไม่ cross-language)
  • มี x-default สำหรับ fallback/language selector
  • Sitemap hreflang สอดคล้องกับ HTML head (ถ้าใช้ทั้งสอง)
  • ทุก URL ที่อ้างถึงเป็น 200 (ไม่ใช่ 301, 404, 410)
  • ทดสอบด้วย Google Search Console International Targeting report

Hreflang ใน Webflow

Webflow รองรับ multilingual ผ่าน Localization feature + Weglot integration ซึ่ง VXB ใช้ทำเว็บหลายภาษาเป็นประจำ:

  • Webflow Localization: จัดการ hreflang อัตโนมัติ ไม่ต้องเขียน code เอง
  • Weglot: Inject tag hreflang + sitemap hreflang + x-default อัตโนมัติ
  • Custom Code: ใส่ hreflang เองใน <head> สำหรับกรณีพิเศษ

ถ้าต้องการเว็บหลายภาษาที่ SEO ถูกต้องตั้งแต่วันแรก — ปรึกษา Vision X Brain

คำถามที่พบบ่อย (FAQ)

Hreflang กับ Canonical ใช้ด้วยกันได้ไหม?

ได้ และต้องใช้ด้วยกัน แต่ละเวอร์ชันภาษาต้องมี canonical ชี้หาตัวเอง (self-canonical) พร้อมกับ hreflang ที่ชี้ไปทุกเวอร์ชันภาษา

ต้องใส่ Hreflang ทุกหน้าไหม?

ใส่เฉพาะหน้าที่มีเวอร์ชันภาษาอื่น ถ้าหน้าไหนมีแค่ภาษาเดียวไม่ต้องใส่ แต่ถ้ามี 2 ภาษาขึ้นไป ต้องใส่ทุกหน้าที่มี pair

Google ใช้เวลานานแค่ไหนในการอ่าน Hreflang?

หลังจากใส่ hreflang อาจใช้เวลา 2-4 สัปดาห์ให้ Google ประมวลผลครบ ตรวจสอบได้จาก Google Search Console > International Targeting

Hreflang ช่วย ranking ไหม?

Hreflang ไม่ใช่ ranking factor โดยตรง แต่ช่วยทางอ้อม — ผู้ใช้เจอเวอร์ชันภาษาที่ถูกต้อง = engagement ดีขึ้น = bounce rate ลด = ส่งผลดีต่อ ranking

บทความแนะนำ

แชร์

Recent Blog

ทำไมการปรับปรุงเว็บไซต์ E-commerce ถึงช่วยเพิ่มยอดขายได้ทันที
ทำไมการปรับปรุงเว็บไซต์ E-commerce ถึงช่วยเพิ่มยอดขายได้ทันที

เว็บของคุณไม่สามารถสร้างยอดขาย? ปรับปรุงเว็บไซต์เพื่อแก้ปัญหานี้ และเรียนรู้วิธีที่ช่วยเพิ่มประสิทธิภาพทันที...

ดูเพิ่มเติม
5 เทคนิคการออกแบบเว็บไซต์สำหรับธุรกิจ Startups ที่ช่วยเพิ่มอัตราการแปลงลูกค้า
5 เทคนิคออกแบบเว็บไซต์ Startup ที่เพิ่มยอดขาย 2026

เคยรู้สึกไหมว่าเว็บไซต์ของคุณไม่สามารถดึงดูดลูกค้าได้? ลองศึกษา 5 เทคนิคที่ช่วยให้คุณสามารถปรับปรุงเว็บไซต์ให้ดียิ่งขึ้นและเพิ่มอัตราการแปลงลูกค้าได้อย่างแท้จริง อ่านต่อ...

ดูเพิ่มเติม
ทำไมเลือก Webflow Design Development เพื่อเว็บไซต์ที่ใช้งานง่าย?
ทำไมเลือก Webflow Design Development เพื่อเว็บไซต์ที่ใช้งานง่าย?

เคยรู้สึกหงุดหงิดเมื่อเว็บไซต์โหลดช้าใช่ไหม? ปัญหานี้สามารถแก้ไขได้ด้วยการออกแบบที่ถูกต้อง อ่านต่อเพื่อค้นหาวิธีที่คุณจะเปลี่ยนประสบการณ์ผู้ใช้!

ดูเพิ่มเติม