Trong tất cả các chủ đề technical SEO, hreflang có lẽ là thứ phức tạp và gây lỗi nhiều nhất. Rất nhiều website đa ngôn ngữ đang triển khai sai — và lỗi phổ biến nhất là thiếu return link (không khai báo hai chiều), khiến Google bỏ qua hoàn toàn các thẻ hreflang.
Hậu quả của hreflang sai: người dùng Đức nhận được trang tiếng Anh trong kết quả tìm kiếm; các phiên bản ngôn ngữ cạnh tranh lẫn nhau; và website mất traffic quốc tế mỗi tháng.
Bài viết này giải mã toàn bộ hreflang theo tài liệu chính thức của Google. Bài dành cho: developer triển khai hreflang, technical SEO cần fix lỗi, và chủ website đa ngôn ngữ.
Phần 1: Hreflang là gì?
Nếu bạn có nhiều phiên bản của một trang cho các ngôn ngữ hoặc khu vực khác nhau, hãy báo cho Google biết về các phiên bản đó. Điều này giúp Google Search dẫn người dùng tới phiên bản phù hợp nhất theo ngôn ngữ hoặc khu vực của họ.
Ba tình huống cần dùng hreflang:
Chỉ dịch phần khung (boilerplate) — nội dung chính giữ một ngôn ngữ, chỉ dịch menu/footer. Thường gặp ở forum hoặc site có nội dung do người dùng tạo.
Biến thể theo khu vực, cùng ngôn ngữ — cùng tiếng Anh nhưng giá và chính sách ship khác nhau cho US, UK, Ireland (
en-US,en-GB,en-IE).Dịch đầy đủ — website có bản tiếng Việt và tiếng Anh hoàn chỉnh (
vi,en).
Hai điểm quan trọng thường bị hiểu sai:
Các phiên bản địa phương hóa chỉ bị coi là trùng lặp nếu nội dung chính vẫn chưa được dịch. Nếu bạn đã dịch đầy đủ, không bị coi là duplicate content.
Google KHÔNG dùng hreflang (hay thuộc tính
langtrong HTML) để nhận diện ngôn ngữ của trang — họ dùng thuật toán tự phân tích nội dung. Hreflang chỉ để ánh xạ các phiên bản với nhau.
Phần 2: Ba phương pháp triển khai
Phương pháp | Phù hợp với |
|---|---|
HTML tags | Dễ nhất — site nhỏ đến vừa |
HTTP headers | File không phải HTML (PDF, ảnh, video) |
XML Sitemap | Site lớn (hàng nghìn URL) |
Google nói rõ: bạn có thể dùng cả ba cùng lúc, nhưng không có lợi ích gì thêm. Hãy chọn một phương pháp và dùng nhất quán.
Phần 3: Phương pháp 1 — HTML Tags
Cú pháp: <link rel="alternate" hreflang="mã_ngôn_ngữ" href="url" />
Sáu quy tắc bắt buộc
Self-reference: mỗi phiên bản ngôn ngữ phải liệt kê chính nó cùng tất cả các phiên bản khác. Có 3 ngôn ngữ → mỗi trang có 3 thẻ hreflang (kể cả thẻ trỏ về chính nó).
URL đầy đủ (fully-qualified): phải có scheme
https://. Sai://example.com/pagehoặc/page.Có thể khác domain: URL thay thế không cần cùng domain — hoàn toàn có thể trỏ chéo giữa
example.com,example.de,example.com.vn.Nên có catchall: nếu có nhiều URL cho cùng một ngôn ngữ ở các khu vực khác nhau (
en-IE,en-CA,en-AU), hãy thêm một URLenchung cho người dùng không xác định được khu vực.Hai chiều (bidirectional) — QUAN TRỌNG NHẤT: nếu hai trang không cùng trỏ về nhau, các thẻ hreflang sẽ bị bỏ qua hoàn toàn. Trang A trỏ tới B thì B bắt buộc phải trỏ về A.
x-default: trang dự phòng khi không khớp ngôn ngữ nào.
Ví dụ cho website Việt Nam
Một shop xuất khẩu thủ công có 3 phiên bản (VI, EN, JA). Đoạn HTML dưới đây phải giống hệt nhau trên cả 3 trang — chỉ khác nội dung phần body:
html
<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>Với site đa khu vực phức tạp hơn (ví dụ có bản tiếng Anh chung, bản UK, bản US, bản Đức và một trang chọn quốc gia):
html
<head>
<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>Phần 4: Phương pháp 2 — HTTP Headers
Dùng cho file không phải HTML (PDF, ảnh, video):
Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
<https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"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
<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: Phương pháp 3 — XML Sitemap
Phù hợp với site lớn. Cần khai báo namespace xhtml và mỗi URL phải liệt kê đầy đủ mọi biến thể (kể cả chính nó) — sitemap cũng là một mục trong checklist Technical SEO:
xml
<?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://shop.com/vi/san-pham/non-la</loc>
<xhtml:link rel="alternate" hreflang="vi" href="https://shop.com/vi/san-pham/non-la"/>
<xhtml:link rel="alternate" hreflang="en" href="https://shop.com/en/products/conical-hat"/>
<xhtml:link rel="alternate" hreflang="ja" href="https://shop.com/ja/products/sugegasa"/>
</url>
<url>
<loc>https://shop.com/en/products/conical-hat</loc>
<xhtml:link rel="alternate" hreflang="vi" href="https://shop.com/vi/san-pham/non-la"/>
<xhtml:link rel="alternate" hreflang="en" href="https://shop.com/en/products/conical-hat"/>
<xhtml:link rel="alternate" hreflang="ja" href="https://shop.com/ja/products/sugegasa"/>
</url>
</urlset>Phần 6: Mã ngôn ngữ và khu vực — nơi gây lỗi nhiều nhất
Định dạng: ngôn_ngữ[-khu_vực] — ngôn ngữ theo ISO 639-1 (2 chữ cái), khu vực (tùy chọn) theo ISO 3166-1 Alpha 2.
Cảnh báo: bạn KHÔNG thể chỉ khai báo mã quốc gia. Mã đầu tiên luôn là NGÔN NGỮ, và Google không tự suy ra ngôn ngữ từ mã quốc gia.
Mã | Đúng/Sai | Lý do |
|---|---|---|
| Đúng |
|
| Đúng | Tiếng Việt, không giới hạn khu vực |
| SAI | "VN" không phải mã ngôn ngữ |
| Đúng |
|
| SAI | "US" không phải mã ngôn ngữ |
| SAI | "UK" là mã dự trữ — phải dùng |
| SAI (nếu định nói Bỉ) |
|
| Đúng | Tiếng Hà Lan / Pháp / Đức cho người dùng ở Bỉ |
Mã thường dùng: ngôn ngữ — vi, en, ja, ko, zh, th, fr, de, es; khu vực — VN, US, GB, JP, KR, CN, TW, SG, AU, DE.
Tiếng Trung phức tạp hơn: zh-TW (tự suy ra Phồn thể), zh-CN (Giản thể), hoặc khai báo tường minh bằng zh-Hant / zh-Hans.
x-default dùng khi không có ngôn ngữ/khu vực nào khớp với cài đặt trình duyệt của người dùng — thường trỏ tới trang chọn quốc gia:
html
<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/country-selector" hreflang="x-default" />Phần 7: Ba lỗi phổ biến nhất
Lỗi | Mô tả | Cách sửa |
|---|---|---|
Thiếu return link (lỗi số 1) | Trang A trỏ tới B nhưng B không trỏ về A → Google bỏ qua toàn bộ thẻ hreflang | Đảm bảo mọi cặp trang trỏ về nhau |
Sai mã ngôn ngữ |
| Dùng ISO 639-1: |
Sai mã khu vực | Google bỏ qua các mã không hợp lệ như | Dùng mã chính thức ISO 3166-1 Alpha 2 ( |
Phần 8: Triển khai theo nền tảng
WordPress (Polylang/WPML tự sinh hreflang):
php
add_action('wp_head', function() {
if (function_exists('pll_the_languages')) {
$languages = pll_the_languages(['raw' => 1]);
foreach ($languages as $lang) {
printf('<link rel="alternate" hreflang="%s" href="%s" />' . "\n",
$lang['slug'], $lang['url']);
}
}
});Next.js:
javascript
// next.config.js
module.exports = {
i18n: {
locales: ['vi', 'en', 'ja'],
defaultLocale: 'vi',
},
}javascript
// pages/_app.js
import Head from 'next/head';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
const { locales, pathname } = useRouter();
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} />
</>
);
}Shopify (trong theme.liquid):
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 9: Kiểm tra và checklist
Công cụ kiểm tra: hreflang tags generator của Aleyda Solis (tạo/chỉnh thẻ), hreflang testing tool của Merkle/TechnicalSEO (validate trên trang live), và International Targeting Report trong Search Console.
Giai đoạn | Cần kiểm tra |
|---|---|
Trước triển khai | Xác định mọi ngôn ngữ/khu vực mục tiêu; map URL cho từng phiên bản; chọn một phương pháp; quyết định URL cho |
Triển khai | Self-reference trên mỗi trang; URL đầy đủ |
Kiểm thử | Test bằng công cụ hreflang; kiểm tra International Targeting trong Search Console; crawl thử bằng Screaming Frog; không còn lỗi "missing return links" |
Sau triển khai | Submit sitemap cập nhật; theo dõi hiệu suất theo từng locale; xử lý lỗi phát sinh |
Kết luận
Hreflang là kỹ thuật quan trọng nhất của International SEO. Triển khai đúng thì khách hàng quốc tế sẽ thấy đúng phiên bản, và tỷ lệ chuyển đổi tăng lên. Năm thông điệp cốt lõi: (1) hai chiều là vua — thiếu return link là lỗi số 1 và Google sẽ bỏ qua ngay; (2) mã phải đúng chuẩn ISO; (3) luôn self-reference; (4) x-default là phương án dự phòng; và (5) test kỹ trước khi deploy.
Hreflang là nền tảng của 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.
Biên soạn và Việt hóa từ tài liệu Google Search Central về phiên bản địa phương hóa. Code example và checklist thuộc về Tấn Phát Digital.
