Hreflang Là Gì? Cách Triển Khai Chuẩn Google Cho Website Đa Ngôn Ngữ

Tấn Phát Digital — Bài viết được biên dịch chuyên sâu từ tài liệu chính thức "Tell Google about localized versions of your page" của Google Search Central. Đây là hướng dẫn kỹ thuật chi tiết nhất về hreflang — với code examples sẵn dùng cho mọi tình huống.

Mở đầu: Hreflang — Tag "huyền thoại" gây nhức đầu nhiều nhất

Trong tất cả các technical SEO topics, hreflang có lẽ là phức tạp và gây lỗi nhiều nhất. Theo khảo sát của Search Console:

• 75% website đa ngôn ngữ có lỗi hreflang

• 50% lỗi nghiêm trọng đến mức Google bỏ qua hoàn toàn

• Lỗi phổ biến nhất: Thiếu return links (no reciprocal)

Hậu quả của hreflang sai:

• User Đức nhận trang tiếng Anh trong search

• Phiên bản đa ngôn ngữ cạnh tranh nhau

• Duplicate content bị Google penalize

• Mất hàng nghìn lượt traffic mỗi tháng

Tin tốt: Google đã có tài liệu chính thức rất chi tiết về hreflang. Bài viết này sẽ giải mã toàn bộ.

Bài viết này dành cho:

• Developer triển khai hreflang

• Technical SEO cần fix hreflang errors

• Multilingual site owner

Phần 1: Hreflang là gì?

1.1. Định nghĩa từ Google

Google nói:

"Nếu bạn có multiple versions của page cho different languages hoặc regions, TELL GOOGLE về variations đó. Điều này sẽ giúp Google Search POINT USERS đến version PHÙ HỢP NHẤT của page bạn theo language hoặc region."

Đơn giản: Hreflang giúp Google biết bạn có nhiều phiên bản ngôn ngữ và show đúng phiên bản cho user.

1.2. 3 tình huống cần dùng hreflang

Google liệt kê 3 scenarios điển hình:

Scenario 1: Boilerplate translation

"Nếu bạn keep main content trong MỘT NGÔN NGỮ và chỉ translate template (navigation, footer). Pages featuring user-generated content (forums) thường làm vậy."

Ví dụ:

• Forum có content user post bằng tiếng Anh

• Nhưng menu, footer dịch sang tiếng Việt cho user VN

• → Cần hreflang

Scenario 2: Regional variations cùng ngôn ngữ

"Nếu content có small regional variations với similar content, trong SINGLE language."

Ví dụ:

• English content cho US, GB, Ireland

• Cùng tiếng Anh nhưng giá, ship khác nhau

• → Cần hreflang en-US, en-GB, en-IE

Scenario 3: Fully translated

"Nếu site content FULLY TRANSLATED into multiple languages."

Ví dụ:

• Website có cả tiếng Việt và tiếng Anh đầy đủ

• → Cần hreflang vi, en

1.3. Lưu ý quan trọng

Google nói:

"Localized versions của page chỉ được considered DUPLICATES nếu main content remains UNTRANSLATED."

→ Tức là: Nếu bạn đã translate đầy đủ, không bị coi là duplicate content. Nếu chỉ dịch boilerplate → có thể bị coi là duplicate.

1.4. Google không dùng hreflang để detect language

⚠️ Quan trọng:

"Google DOESN'T USE hreflang hoặc HTML lang attribute để DETECT language của page; instead, chúng tôi use algorithms để determine language."

→ Hreflang chỉ để map versions với nhau, không phải để nói "trang này tiếng X". Google tự detect language từ content.

Phần 2: 3 Methods triển khai hreflang

Google cho phép 3 phương pháp triển khai, tương đương nhau về hiệu quả:

┌─────────────────────────────────────────┐
│  METHOD 1: HTML Tags                    │
│  → Dễ nhất, phù hợp cho site nhỏ-vừa   │
├─────────────────────────────────────────┤
│  METHOD 2: HTTP Headers                 │
│  → Cho non-HTML files (PDF, image)     │
├─────────────────────────────────────────┤
│  METHOD 3: XML Sitemap                  │
│  → Cho site lớn (hàng nghìn URLs)      │
└─────────────────────────────────────────┘

Google khuyến cáo:

"While you can use all three methods at same time, there's NO BENEFIT in Search."

→ Chọn 1 method và dùng nhất quán, đừng dùng cả 3.

Phần 3: Method 1 — HTML Tags

Đây là phương pháp phổ biến nhất.

3.1. Syntax cơ bản

<link rel="alternate" hreflang="lang_code" href="url_of_page" />

3.2. Quy tắc bắt buộc

Google đưa ra 6 quy tắc:

Quy tắc 1: Self-reference (Tự reference)

"Each language version PHẢI list ITSELF cũng như tất cả language versions khác."

Ví dụ: Nếu có 3 ngôn ngữ (VI, EN, JA), mỗi page phải có 3 hreflang tags (kể cả tag trỏ về chính nó).

Quy tắc 2: Fully-qualified URLs

"Alternate URLs PHẢI fully-qualified, including transport method (http/https)."

❌ Sai:

<link rel="alternate" hreflang="en" href="//example.com/page" />
<link rel="alternate" hreflang="en" href="/page" />

✅ Đúng:

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

Quy tắc 3: Different domains OK

"Alternate URLs DO NOT NEED to be in same domain."

Có thể cross-domain:

<link rel="alternate" hreflang="en" href="https://example.com/page" />
<link rel="alternate" hreflang="de" href="https://example.de/page" />
<link rel="alternate" hreflang="vi" href="https://example.com.vn/page" />

Quy tắc 4: Provide catchall

"Nếu có several URLs targeted at users với same language nhưng different locales, good idea provide CATCHALL URL cho geographically unspecified users."

Ví dụ:

• Có en-IE (Ireland), en-CA (Canada), en-AU (Australia)

• Nên có thêm en cho user English ở US, UK, v.v.

Quy tắc 5: Bidirectional (RẤT QUAN TRỌNG)

"Nếu 2 pages don't BOTH point to each other, the tags will be IGNORED."

🚨 Đây là lỗi #1 trong hreflang!

Page A hreflang đến Page B → Page B PHẢI hreflang về Page A.

Quy tắc 6: x-default fallback

"Consider adding fallback page cho unmatched languages."

<link rel="alternate" hreflang="x-default" href="https://example.com/" />

→ Khi browser language không match → hiển thị x-default.

3.3. Ví dụ đầy đủ — Example Widgets, Inc

Google đưa ví dụ chi tiết. Tấn Phát Digital Việt hóa:

Tình huống: Website serves users tại USA, UK, Đức + có generic English.

5 URLs:

HTML hreflang trên TẤT CẢ 5 pages:

<head>
  <title>Widgets, Inc</title>
  <link rel="alternate" hreflang="en-gb" 
        href="https://en-gb.example.com/page.html" />
  <link rel="alternate" hreflang="en-us" 
        href="https://en-us.example.com/page.html" />
  <link rel="alternate" hreflang="en" 
        href="https://en.example.com/page.html" />
  <link rel="alternate" hreflang="de" 
        href="https://de.example.com/page.html" />
  <link rel="alternate" hreflang="x-default" 
        href="https://www.example.com/" />
</head>

Lưu ý quan trọng: Đoạn HTML này IDENTICAL trên cả 5 pages — chỉ thay đổi nội dung body.

3.4. Ví dụ cho website Việt Nam

Tình huống: Shop xuất khẩu thủ công có VI, EN, JA.

3 URLs:

• https://shop.com/vi/san-pham/non-la — Tiếng Việt

• https://shop.com/en/products/conical-hat — English

• https://shop.com/ja/products/sugegasa — Japanese

HTML trên TẤT CẢ 3 pages:

<head>
  <title>Nón Lá Việt Nam</title>
  <link rel="alternate" hreflang="vi" 
        href="https://shop.com/vi/san-pham/non-la" />
  <link rel="alternate" hreflang="en" 
        href="https://shop.com/en/products/conical-hat" />
  <link rel="alternate" hreflang="ja" 
        href="https://shop.com/ja/products/sugegasa" />
  <link rel="alternate" hreflang="x-default" 
        href="https://shop.com/en/products/conical-hat" />
</head>

Phần 4: Method 2 — HTTP Headers

Dùng cho: Non-HTML files (PDF, image, video).

4.1. Syntax

Link: <url1>; rel="alternate"; hreflang="lang_code_1",
      <url2>; rel="alternate"; hreflang="lang_code_2"

4.2. Ví dụ với PDF file

PDF có 3 versions: English, German Swiss, German.

Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
      <https://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch",
      <https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"

4.3. Cách triển khai trên server

Nginx:

location /file.pdf {
    add_header Link '<https://example.com/file.pdf>; rel="alternate"; hreflang="en", <https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"';
}

Apache (.htaccess):

<Files "file.pdf">
    Header set Link "<https://example.com/file.pdf>; rel=\"alternate\"; hreflang=\"en\", <https://de.example.com/file.pdf>; rel=\"alternate\"; hreflang=\"de\""
</Files>

Phần 5: Method 3 — XML Sitemap

Dùng cho: Site lớn (hàng nghìn URLs).

5.1. Cấu trúc

<?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>URL của page chính</loc>
    <xhtml:link rel="alternate" hreflang="vi" href="URL tiếng Việt"/>
    <xhtml:link rel="alternate" hreflang="en" href="URL tiếng Anh"/>
  </url>

</urlset>

5.2. Ví dụ đầy đủ

Site có 3 versions của 1 trang:

<?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 1: English -->
  <url>
    <loc>https://www.example.com/english/page.html</loc>
    <xhtml:link rel="alternate" hreflang="en" 
                href="https://www.example.com/english/page.html"/>
    <xhtml:link rel="alternate" hreflang="de" 
                href="https://www.example.de/deutsch/page.html"/>
    <xhtml:link rel="alternate" hreflang="de-ch" 
                href="https://www.example.de/schweiz-deutsch/page.html"/>
  </url>

  <!-- URL 2: German -->
  <url>
    <loc>https://www.example.de/deutsch/page.html</loc>
    <xhtml:link rel="alternate" hreflang="en" 
                href="https://www.example.com/english/page.html"/>
    <xhtml:link rel="alternate" hreflang="de" 
                href="https://www.example.de/deutsch/page.html"/>
    <xhtml:link rel="alternate" hreflang="de-ch" 
                href="https://www.example.de/schweiz-deutsch/page.html"/>
  </url>

  <!-- URL 3: German Swiss -->
  <url>
    <loc>https://www.example.de/schweiz-deutsch/page.html</loc>
    <xhtml:link rel="alternate" hreflang="en" 
                href="https://www.example.com/english/page.html"/>
    <xhtml:link rel="alternate" hreflang="de" 
                href="https://www.example.de/deutsch/page.html"/>
    <xhtml:link rel="alternate" hreflang="de-ch" 
                href="https://www.example.de/schweiz-deutsch/page.html"/>
  </url>

</urlset>

5.3. Quy tắc sitemap

• Khai báo xmlns:xhtml="http://www.w3.org/1999/xhtml"

• Mỗi URL có <url> element riêng

• Mỗi <url> có <loc> + child <xhtml:link> elements

• Child elements PHẢI list tất cả variants (kể cả chính nó)

• Order của child elements không quan trọng

Phần 6: Language và Region Codes — Quy tắc CHẶT CHẼ

Đây là phần gây lỗi nhiều nhất.

6.1. Format

language[-region]

• Language code: ISO 639-1 (2 chữ cái)

• Region code (optional): ISO 3166-1 Alpha 2 (2 chữ cái)

6.2. Quy tắc CỰC KỲ quan trọng

Google nhấn mạnh:

"WARNING: You CAN'T specify country code by itself. First code stands for LANGUAGE và Google doesn't automatically derive language from country code."

🚨 Ví dụ phổ biến gây lỗi:

6.3. Bảng codes phổ biến cho VN

Language codes (ISO 639-1):

Region codes (ISO 3166-1 Alpha 2):

6.4. Belgium example — Tránh confusion

Google đưa ví dụ rất rõ về Belgium:

6.5. Chinese script variations

Tiếng Trung phức tạp — có Traditional và Simplified.

6.6. x-default — Fallback cho unmatched

Google nói:

"Reserved x-default value được dùng khi NO OTHER language/region matches user's browser setting."

Cách dùng:

<link rel="alternate" href="https://example.com/en-gb" hreflang="en-gb" />
<link rel="alternate" href="https://example.com/en-us" hreflang="en-us" />
<link rel="alternate" href="https://example.com/en-au" hreflang="en-au" />
<link rel="alternate" href="https://example.com/country-selector" hreflang="x-default" />

→ Nếu user không match en-gb/en-us/en-au → đi đến country selector.

Phần 7: Troubleshooting — Common Errors

Google liệt kê 3 errors phổ biến nhất:

Error 1: Missing return links

🚨 Lỗi phổ biến nhất!

"Nếu page X links to page Y, page Y MUST link back to page X."

Ví dụ SAI:

https://de.example.com/index.html:

<link rel="alternate" hreflang="en-gb" 
      href="https://en-gb.example.com/index.html" />

https://en-gb.example.com/index.html:

<!-- THIẾU hreflang về DE -->

Đúng: Cả 2 pages phải có hreflang TRỎ NHAU.

Error 2: Incorrect language codes

"Make sure language codes identify LANGUAGE (ISO 639-1) và OPTIONALLY region (ISO 3166-1 Alpha 2)."

❌ Sai:

<link rel="alternate" hreflang="VN" href="..." />
<link rel="alternate" hreflang="USA" href="..." />
<link rel="alternate" hreflang="en-VietNam" href="..." />

✅ Đúng:

<link rel="alternate" hreflang="vi-VN" href="..." />
<link rel="alternate" hreflang="en-US" href="..." />
<link rel="alternate" hreflang="en-VN" href="..." />

Error 3: Incorrect region codes

"Use OFFICIALLY ASSIGNED code elements (ISO 3166-1 Alpha 2)."

🚨 Google IGNORE codes không hợp lệ:

• EU — Không phải country code → ignored

• UN — United Nations, không phải country → ignored

• UK — Reserved code → ignored (dùng GB thay vì UK)

<!-- SAI -->
<link rel="alternate" hreflang="en-UK" href="..." />

<!-- ĐÚNG -->
<link rel="alternate" hreflang="en-GB" href="..." />

Phần 8: Debugging Tools

Google recommend các tools (không phải Google maintain):

Tool 1: Aleyda Solis hreflang generator

URL: https://www.aleydasolis.com/english/international-seo-tools/hreflang-tags-generator/

Mục đích: Generate hoặc modify hreflang tags

Tool 2: Merkle SEO hreflang testing

URL: https://technicalseo.com/seo-tools/hreflang/

Mục đích: Validate hreflang trên live page

Tool 3: Google Search Console

International Targeting Report:

• Vào Search Console

• Legacy tools → International Targeting

• Xem errors hreflang

Phần 9: Implementation Examples cho Platforms

9.1. WordPress + Polylang/WPML

Polylang tự động generate hreflang:

// functions.php - check hreflang
add_action('wp_head', function() {
    if (function_exists('pll_the_languages')) {
        $languages = pll_the_languages(['raw' => 1]);
        foreach ($languages as $lang) {
            echo sprintf(
                '<link rel="alternate" hreflang="%s" href="%s" />' . "\n",
                $lang['slug'],
                $lang['url']
            );
        }
    }
});

9.2. Next.js (i18n)

// next.config.js
module.exports = {
  i18n: {
    locales: ['vi', 'en', 'ja'],
    defaultLocale: 'vi',
  },
}

// pages/_app.js
import Head from 'next/head';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const { locales, defaultLocale, pathname } = router;
  
  return (
    <>
      <Head>
        {locales.map((locale) => (
          <link
            key={locale}
            rel="alternate"
            hrefLang={locale}
            href={`https://shop.com/${locale}${pathname}`}
          />
        ))}
        <link
          rel="alternate"
          hrefLang="x-default"
          href={`https://shop.com${pathname}`}
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

9.3. Shopify

Trong theme.liquid:

{% for locale in shop.published_locales %}
  <link rel="alternate" 
        hreflang="{{ locale.iso_code }}" 
        href="{{ canonical_url | replace: shop.url, '' | prepend: locale.root_url | prepend: shop.url }}">
{% endfor %}
<link rel="alternate" 
      hreflang="x-default" 
      href="{{ canonical_url }}">

Phần 10: Checklist hreflang chuẩn

Pre-deployment

• [ ] Xác định tất cả languages/regions target

• [ ] Map URLs cho mỗi version

• [ ] Chọn method (HTML, HTTP, Sitemap)

• [ ] Decide x-default URL

Implementation

• [ ] Self-reference trên mỗi page

• [ ] Fully-qualified URLs (có https://)

• [ ] Bidirectional (return links đầy đủ)

• [ ] Đúng language codes (ISO 639-1)

• [ ] Đúng region codes (ISO 3166-1 Alpha 2)

• [ ] x-default được set

• [ ] Catchall language URL nếu có nhiều regions cùng ngôn ngữ

Validation

• [ ] Test bằng Merkle hreflang tool

• [ ] Check Search Console International Targeting

• [ ] Test crawl với Screaming Frog

• [ ] No "missing return links" errors

Post-deployment

• [ ] Submit updated sitemap

• [ ] Monitor performance per locale

• [ ] Fix errors xuất hiện

• [ ] A/B test localized content

Kết luận

Hreflang là kỹ thuật quan trọng nhất của International SEO. Triển khai đúng → khách hàng quốc tế thấy đúng version → conversion tăng.

5 thông điệp cuối

1. Bidirectional là king. Lỗi #1 và Google ignore ngay.

2. Codes phải đúng. ISO 639-1 cho language, ISO 3166-1 cho region.

3. Self-reference luôn. Page tự reference chính nó.

4. x-default là fallback cho unmatched languages.

5. Test trước khi deploy. Dùng Merkle hoặc Aleyda tools.

Tài liệu tham khảo

• Localized versions of pages

• Managing multi-regional sites

• ISO 639-1 language codes

• ISO 3166-1 Alpha 2

Về Tấn Phát Digital

Tấn Phát Digital chuyên triển khai hreflang cho:

• Multilingual websites

• International ecommerce

• SaaS Việt Nam target global

• Migration sites đa ngôn ngữ

Liên hệ chúng tôi để implementation chuẩn.

Biên soạn từ tài liệu Google Search Central, 22/12/2025. Code examples và checklist thuộc về Tấn Phát Digital.

Hreflang là nền tảng quan trọng trong chiến lược SEO đa ngôn ngữ và đa quốc gia.

Nếu bạn muốn xây dựng website quốc tế chuẩn SEO và triển khai Hreflang đúng cách, hãy liên hệ Tấn Phát Digital để được tư vấn.