Tác giả:
    Aymeric PINEAU
    Ngày tạo:2026-08-29Cập nhật lần cuối:2026-08-29

    Hreflang: hướng dẫn cho SEO đa ngôn ngữ

    Bạn đã dịch ứng dụng của mình. Bạn đã triển khai /en, /fr, /es. Và người dùng Pháp vẫn tiếp tục đổ bộ vào trang tiếng Anh.

    Dịch là nửa dễ. Nửa khó là báo cho các search engine biết rằng những trang này là cùng một trang ở ngôn ngữ khác, không phải ba tài liệu cạnh tranh với nhau. Đó là cái hreflang làm, và đó là nơi hầu hết các site đa ngôn ngữ lặng lẽ mất lưu lượng của họ.

    hreflang thực sự là gì

    Một annotation trên một trang nói: URL này có các phiên bản tương đương ở đó, cho những ngôn ngữ đó.

    html
    <link rel="alternate" hreflang="en" href="https://example.com/about" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about" />
<link rel="alternate" hreflang="es" href="https://example.com/es/about" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about" />

    Nó mang lại cho bạn hai điều: phiên bản phù hợp được hiển thị cho người dùng phù hợp, và các locale của bạn được hợp nhất thành một cụm thay vì tự hủy diệt lẫn nhau như những bản sao.

    Điều quan trọng là phải rõ ràng về những gì nó không phải. Nó không phải là một chuyển hướng — nó là một gợi ý, và Google có thể ghi đè nó. Nó không phải là một tăng thứ hạng — nó thay đổi phiên bản nào được xếp hạng, không phải liệu bạn có được xếp hạng hay không. Và Bing hoàn toàn bỏ qua nó, thay vào đó dựa vào content-language và geo-targeting.

    Nơi khai báo nó

    Ba vị trí, tất cả đều hợp lệ. Chọn một và ở lại đó — cụm tương tự được khai báo ở hai nơi là cách làm cho các tập hợp trôi nổi.

    HTML <head> là lựa chọn thông thường. Một lưu ý: các thẻ được chèn sau hydration không đáng tin cậy. Nếu framework của bạn chỉ thêm chúng phía client-side, crawler có thể không bao giờ thấy chúng.

    XML sitemap tốt hơn ở quy mô lớn. Mười locale trên 5 000 trang có nghĩa là 50 000 phần tử <link> được gửi đến trình duyệt mà không có lý do gì; trong sitemap nó không tốn bytes cho trang của bạn.

    HTTP Link header là lựa chọn duy nhất cho các tệp không phải HTML như PDF.

    Các quy tắc

    Tự tham chiếu và tính thuận nghịch

    Tập hợp trên /fr/about phải bao gồm hreflang="fr" chỉ đến /fr/about. Và nếu /about chỉ đến /fr/about, /fr/about phải chỉ lại. Google gọi tham chiếu một chiều là "no return tag" và bỏ qua nó.

    Trong thực tế, điều này có nghĩa là mọi trang trong một cụm đều gửi bộ liên kết giống hệt nhau. Tạo chúng từ một danh sách locale được chia sẻ không phải là một tiện lợi, đó là cách duy nhất để giữ tính chính xác khi bạn có nhiều hơn hai locale.

    URL tuyệt đối, luôn luôn

    html
    <!-- Bỏ qua im lặng -->
<link rel="alternate" hreflang="fr" href="/fr/about" />

<!-- Chính xác -->
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about" />

    Lý do đó là đáng hiểu hơn là ghi nhớ. hreflang là một tham chiếu qua tài liệu: các công cụ tìm kiếm xây dựng một cụm được khóa bằng URL, được chia sẻ trên mọi trang trong đó. Một đường dẫn tương đối chỉ có ý nghĩa tương đối với tài liệu chứa nó, vì vậy nó không thể biểu thị điều đó. Nó cũng không thể vượt qua một máy chủ — và một alternate rất thường xuyên làm như vậy, khi một locale nằm trên example.fr hoặc fr.example.com. Trong một sitemap hoặc HTTP header, không có tài liệu cơ sở để phân giải lại.

    Điều này có hệ quả trực tiếp trong code. getLocalizedUrl("/about", "fr") trả về /fr/about — relative vào, relative ra. Đối với hreflang bạn phải cung cấp cho nó một URL tuyệt đối:

    ts
    getLocalizedUrl("/about", "fr"); // → "/fr/about"          ❌ bị loại bỏ
getLocalizedUrl("https://example.com/about", "fr"); // → "https://example.com/fr/about"  ✅

    Ngoại lệ duy nhất là một framework giải quyết các giá trị relative cho bạn trước khi rendering: Next.js mở rộng alternates relative so với metadataBase. Được — nhưng quy tắc áp dụng cho HTML được phát hành, vì vậy hãy kiểm tra bằng curl, không phải DevTools inspector.

    Mã ngôn ngữ

    ISO 639-1 cho ngôn ngữ, ISO 3166-1 Alpha 2 cho region tùy chọn: fr, fr-CA, pt-BR.

    Hai cạm bẫy bắt gần như tất cả mọi người. Một region riêng lẻ là không hợp lệ — hreflang="ca" là Catalan, không phải Canada; bạn cần en-CA hoặc fr-CA. Và en-UK không tồn tại: mã quốc gia cho Vương quốc Anh là GB, vì vậy nó là en-GB.

    Chỉ thêm region khi bạn thực sự phục vụ nội dung khác cho region đó — giá khác, thông báo pháp lý khác. fr và fr-FR trên nội dung giống hệt là tiếng ồn.

    x-default

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

    Một khái niệm mà thường xuyên bị quên và hiểu sai nhất là x-default — ít hơn 30% các ứng dụng thực hiện nó đúng cách.

    Đó là fallback cho những người dùng có ngôn ngữ không khớp với bất kỳ mục nào trong tập hợp của bạn. Một người nói tiếng Hà Lan trên một trang cung cấp tiếng Anh, tiếng Pháp và tiếng Tây Ban Nha không khớp với bất kỳ mục nào; nếu không có x-default, Google sẽ chọn cho bạn.

    Điều mà mọi người hiểu sai là ý nghĩa của nó. x-default không phải là "phiên bản tiếng Anh" và không phải là "locale mặc định", mặc dù nó thường trỏ đến đó. Nó có nghĩa là trang dành cho những người dùng mà tập hợp này không bao gồm. Đó là lý do tại sao việc trỏ nó đến một trang đích chọn ngôn ngữ hoặc đích đến chuyển hướng địa lý là hợp pháp — và thường tốt hơn — thay vì trỏ đến /en. Nếu bạn không có trang như vậy, ngôn ngữ chính của bạn là câu trả lời hợp lý.

    Hai điều cần phân biệt rõ: x-default là một mục bổ sung trong tập hợp, không phải là sự thay thế cho mục tự tham chiếu, và giống như mọi mục khác, nó phải xuất hiện giống hệt nhau trên mọi trang trong cụm.

    Bẫy canonical

    Mỗi trang được bản địa hóa phải là canonical của chính nó:

    html
    <!-- On https://example.com/fr/about -->
<link rel="canonical" href="https://example.com/fr/about" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about" />
<link rel="alternate" hreflang="en" href="https://example.com/about" />

    Trỏ canonical của mọi locale tại phiên bản tiếng Anh thay vào đó:

    html
    <!-- On https://example.com/fr/about — kills the page -->
<link rel="canonical" href="https://example.com/about" />

    cho biết trang tiếng Pháp là một bản sao không nên được lập chỉ mục, trong khi hreflang cho biết đó là trang phục vụ người dùng tiếng Pháp. Các tín hiệu mâu thuẫn, canonical chiến thắng, và các trang tiếng Pháp của bạn rơi ra khỏi chỉ mục.

    Canonical là tự tham chiếu cho từng locale. hreflang mô tả cluster.

    Chọn cấu trúc URL

    hreflang chú thích các URL, vì vậy cấu trúc đến trước.

    Cấu trúc Ví dụ Cân bằng
    Subdirectories example.com/fr/ Một domain, cấu trúc quyền chia sẻ — tín hiệu địa lý yếu hơn
    Subdomains fr.example.com Dễ dàng thêm hoặc xóa một locale — có thể được hiểu là một site riêng biệt
    ccTLDs example.fr Tín hiệu quốc gia mạnh nhất — quyền lực được xây dựng trên mỗi domain

    Subdirectories là lựa chọn mặc định phù hợp cho hầu hết các dự án. Chỉ nên sử dụng ccTLDs khi bạn thực sự hoạt động như những doanh nghiệp riêng biệt ở các quốc gia khác nhau.

    Cấu trúc duy nhất cần tránh: phục vụ các ngôn ngữ khác nhau tại cùng một URL dựa trên Accept-Language hoặc IP. Crawlers chỉ thấy một phiên bản và index một phiên bản; mọi thứ khác không hiển thị.

    Intlayer bao gồm cả ba thông qua routing.mode và routing.domains. Xem tùy chỉnh domains và tài liệu cấu hình.

    Triển khai

    Viết thủ công những tag này không tồn tại khi tiếp xúc với locale thứ hai. Thay vào đó, hãy lấy chúng từ danh sách locale của bạn.

    1. Phát hành cluster trên mỗi trang

      Cùng một bộ ở mọi nơi, canonical cho mỗi locale, các URL tuyệt đối, x-default được bao gồm.

      Metadata API công bố alternates.languages, và getMultilingualUrls xây dựng toàn bộ record từ các locale được cấu hình của bạn:

      src/app/[locale]/about/page.tsx
      import { getMultilingualUrls } from "intlayer";
import type { Metadata } from "next";
import type { LocalPromiseParams } from "next-intlayer";

const SITE_URL = "https://example.com";

export const generateMetadata = async ({
  params,
}: LocalPromiseParams): Promise<Metadata> => {
  const { locale } = await params;

  /**
   * getMultilingualUrls(`${SITE_URL}/about`) trả về:
   * {
   *   en: 'https://example.com/about',
   *   fr: 'https://example.com/fr/about',
   *   es: 'https://example.com/es/about',
   * }
   */
  const multilingualUrls = getMultilingualUrls(`${SITE_URL}/about`);

  return {
    alternates: {
      canonical: multilingualUrls[locale as keyof typeof multilingualUrls],
      languages: { ...multilingualUrls, "x-default": `${SITE_URL}/about` },
    },
  };
};

      Cấu hình đầy đủ: Hướng dẫn Next.js 16 i18n.

      Hàm head của route xây dựng các liên kết. localeMap lặp qua các locale được cấu hình của bạn, vì vậy việc thêm một locale vào config sẽ thêm nó ở khắp mọi nơi cùng một lúc:

      src/routes/{-$locale}/about.tsx
      import { createFileRoute } from "@tanstack/react-router";
import { defaultLocale, getLocalizedUrl, localeMap } from "intlayer";

const SITE_URL = "https://example.com";

export const Route = createFileRoute("/{-$locale}/about")({
  head: ({ params }) => {
    const { locale = defaultLocale } = params;
    const url = `${SITE_URL}/about`;

    return {
      links: [
        { rel: "canonical", href: getLocalizedUrl(url, locale) },

        ...localeMap(({ locale: mapLocale }) => ({
          rel: "alternate",
          hrefLang: mapLocale,
          href: getLocalizedUrl(url, mapLocale),
        })),

        {
          rel: "alternate",
          hrefLang: "x-default",
          href: getLocalizedUrl(url, defaultLocale),
        },
      ],
    };
  },
});

      head chạy trên server, vì vậy các tag sẽ được đưa vào HTML ban đầu. Thiết lập đầy đủ: Hướng dẫn i18n TanStack Start.

    2. Hoặc di chuyển tất cả vào sitemap

      Ở quy mô lớn, hãy loại bỏ hoàn toàn các annotation khỏi các trang của bạn. generateSitemap phát ra các alternate xhtml:link cho mỗi entry, đọc locales và routing mode từ config của bạn:

      src/routes/sitemap[.]xml.ts
      import { generateSitemap } from "intlayer";

const sitemap = generateSitemap(
  [
    { path: "/", changefreq: "daily", priority: 1.0 },
    { path: "/about", changefreq: "monthly", priority: 0.8 },
  ],
  { siteUrl: "https://example.com" }
);

      Hai tùy chọn đáng chú ý:

      • xhtmlLinks (mặc định true) — các liên kết thay thế chỉ được phát hành nơi URL locale thực sự khác nhau. Ở chế độ no-prefix mọi locale dùng chung một URL, vì vậy chúng bị bỏ qua trừ khi routing.domains cấp cho các locale tên miền riêng của chúng.
      • entryPerLocale (default false) — theo mặc định một mục <url> mang tất cả các alternates. Cả hai hình thức đều hợp lệ, nhưng chỉ một URL được liệt kê dưới dạng <loc> mới được tính là submitted trong Search Console; các locale chỉ có alternate vẫn có thể khám phá được nhưng không được ghi vào sitemap. Bật tùy chọn này sẽ cho mỗi URL đã định địa phương một mục riêng với toàn bộ tập hợp alternate được lặp lại. Nó nhân các mục theo số lượng locale, vì vậy hãy chú ý đến giới hạn 50 000 URL / 50 MB và chia thành một sitemap index nếu vượt quá.

    3. Xác minh những gì crawler nhận được

      hreflang thất bại im lặng, vì vậy hãy kiểm tra nó thay vì giả định.

      Đọc nguồn, không phải trình kiểm tra — curl https://example.com/fr/about | grep hreflang hiển thị những gì một crawler nhận được; DevTools hiển thị DOM sau khi JavaScript chạy. Sau đó, theo từng alternate và xác nhận nó trỏ lại với bộ giống hệt, và không có cái nào trong số chúng chuyển hướng. International Targeting report của Search Console bắt phần còn lại trên toàn bộ trang web.

      Để crawl đặc trưng cho đa ngôn ngữ, Intlayer SEO Scanner kiểm tra các thẻ bị thiếu, alternates bị hỏng và xung đột canonical trên các trang được bản địa hóa của bạn.

    Danh sách kiểm tra

    • Mỗi locale có URL riêng, có thể crawl được
    • Mỗi trang tự tham chiếu, và mỗi tham chiếu là lẫn nhau
    • Bộ giống hệt được gửi trên mỗi trang trong cụm
    • Tất cả các giá trị href là tuyệt đối trong HTML được phát hành
    • Các mã là ISO 639-1 + ISO 3166-1 Alpha 2 (en-GB, không phải en-UK)
    • x-default có mặt, và chỉ đến nơi người dùng không khớp nên truy cập
    • Canonical tự tham chiếu theo từng locale
    • Các thẻ được render phía máy chủ, không được chèn sau hydration
    • Được khai báo trong chính xác một nơi
    • Không có redirect giữa các locale

    Kết luận

    hreflang là đơn giản và không tha thứ. Một thẻ trả về bị thiếu, một URL tương đối, một canonical xuyên locale, và cụm từ sẽ bị loại bỏ mà không có lỗi ở bất kỳ đâu. Mỗi một trong những lỗi đó đều xuất phát từ việc viết các thẻ bằng tay.

    Lấy tập hợp từ một danh sách locale duy nhất, render nó phía server, giữ canonical tự tham chiếu, và cho x-default sự chú ý mà nó xứng đáng. Làm điều đó một lần và tính đúng đắn sẽ không còn là thứ bạn phải duy trì.

    Đi sâu hơn

    Internationalization (i18n) là gì?

    Bình luận

    Chưa có bình luận nào. Hãy là người đầu tiên chia sẻ suy nghĩ của bạn.

    Bài viết liên quan

    Cách quốc tế hóa ứng dụng Next.js của bạn bằng next-intl - Hướng dẫn đầy đủ để dịch Translate Next.js 16 with next-intl — App Router Setup

    Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Next.js 16 trang web của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.

    Aymeric PINEAU

    Cách quốc tế hóa ứng dụng Next.js của bạn bằng next-i18next - Hướng dẫn đầy đủ để dịch Translate Next.js 16 with next-i18next — App Router Setup

    Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Next.js 16 trang web của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.

    Aymeric PINEAU

    Cách tự động hóa dịch JSON react-intl của bạn bằng Intlayer

    Tự động hóa dịch JSON của bạn với Intlayer và react-intl để nâng cao quốc tế hóa trong các ứng dụng React.

    Aymeric PINEAU

    Cách tự động hóa bản dịch JSON react-i18next của bạn bằng Intlayer

    Tự động hóa bản dịch JSON của bạn với Intlayer và react-i18next để nâng cao quốc tế hóa trong các ứng dụng React.

    Aymeric PINEAU

    Bài viết mới nhất

    Cách quốc tế hóa ứng dụng Next.js của bạn bằng next-i18next - Hướng dẫn đầy đủ để dịch Translate Next.js 16 with next-i18next — App Router Setup

    Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Next.js 16 trang web của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.

    Aymeric PINEAU

    Cách quốc tế hóa ứng dụng Next.js của bạn bằng next-intl - Hướng dẫn đầy đủ để dịch Translate Next.js 16 with next-intl — App Router Setup

    Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Next.js 16 trang web của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.

    Aymeric PINEAU

    Intlayer và next-i18next

    Tích hợp Intlayer với next-i18next cho giải pháp quốc tế hóa Next.js toàn diện

    Aymeric PINEAU

    Intlayer và vue-i18n

    Tích hợp Intlayer với vue-i18n cho giải pháp quốc tế hóa Vue.js toàn diện

    Aymeric PINEAU