首页 / SEO book / 技术 SEO / Hreflang 标签使用指南

Hreflang:新手入门指南

Hreflang 标签使用指南技术 SEO

Hreflang 是一个简单的 HTML 属性,掌握起来却颇为不易。本文从基本概念、实施方法到常见问题排查,系统梳理 hreflang 的全部要点,并给出可半自动化的实现思路。

网站包含多种语言的内容时,必须理解并使用 hreflang 属性。本文从基本概念、实施方法到常见问题排查,逐一介绍。

Hreflang 是一个简单的 HTML 属性,但要真正掌握它却颇具挑战。

Google 的 John Mueller 曾把 hreflang 形容为“SEO 中最复杂的方面之一”,因为它“很快就会变得很难”。

我们针对 374,756 个域名开展了一项 hreflang 研究,发现 67% 的实施存在问题。最常见的问题如下:

不必因此望而却步。Hreflang 理解起来并没有那么复杂,而且在很大程度上可以自动化(稍后会讲到)。

什么是 hreflang?

Hreflang 是一个 HTML 属性,用于指定网页的语言和地理定位。同一页面若有不同语言的多个版本,可用 hreflang 标签把这些变体告知 Google 等搜索引擎,帮助它们向用户展示正确的版本。

例如,在美国用 Google 搜索“apple official website”,第一条结果如下:

在西班牙做同样的搜索,看到的则是这个版本的页面:

正是 hreflang 让这一切成为可能。

为什么 hreflang 对 SEO 很重要?

若已花时间把内容翻译成多种语言,自然希望搜索引擎向用户展示最合适的那一版。

Google 和 Yandex 都会参考 hreflang 标签来做到这一点。

必应(Bing)表示,hreflang 对它而言只是一个弱信号,主要依靠 content-language HTML 属性、链接以及访客来源来辨别语言。但在其官方文档中,必应仍然建议使用 hreflang。

迎合搜索引擎用户的母语,也能改善其体验。这通常会带来更少的人点击离开页面返回搜索结果(即更高的停留时间)、更低的跳出率、更长的页面停留时长等——这些通常被认为对 SEO 和排名有积极影响。

正如 Google 的 Gary Illyes 在这个视频中所暗示的,hreflang 标签也可能对排名产生直接影响:某些场景下,同一 hreflang 集群中的页面会互相共享排名信号。例如,重复页面可能合并信号,而 hreflang 是约 40 种规范化信号之一。由此产生一个有趣的权衡:重复内容合并可能让页面变得更强,但随后的搜索结果页面中可能出现错误的页面。这也是我通常主张每种语言只用一个页面、并依据国家进行动态个性化的原因。

匹配度最高的页面决定排名位置,但搜索引擎会在搜索结果页面中尝试替换,向用户展示最相关的页面。这并不意味着集群中所有页面都会共享信号;对于品牌词或多种语言都会使用的词,排名由最顶尖的页面决定,再替换为最相关的页面展示。也就是说,在日本搜索“Ahrefs”时,决定位置的大概是英文版页面,但在重新排序过程中会替换成日语页面展示。“Link building”(链接建设)也是一个多种语言都会使用的词,所以我们关于这个话题的英文页面大概最强,会决定西班牙语用户搜索时的排名位置,但最终在搜索结果页面中向他们展示的很可能是西班牙语页面。

仅凭这一点,就足以成为在合适场景下实施 hreflang 的充分理由。

不过,hreflang 属性之所以重要,还有另一个原因:重复内容。

假设有两个版本的页面:一个面向英国读者、使用英式英语拼写,另一个面向美国读者、使用美式英语拼写。两个页面几乎完全相同,Google 可能把它们视为重复内容,选择其中一个版本来建立索引。

Hreflang 标签帮助 Google 理解这些页面之间的关系,尽量在搜索结果中展示正确的版本,但这并不能保证。Hreflang 标签是一种信号,而非指令。对于同一 hreflang 集群中使用相同语言的页面,最佳做法仍然是对内容进行本地化,可通过本地化定价(例如美元 vs. 英镑)、语言变体(例如美国用 trashcan、英国用 bin)等方式实现。对翻译后的页面而言这不成问题,因为 Google 不会把它们视为重复内容。

hreflang 标签长什么样?

Hreflang 标签使用简单且一致的语法:

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

下面用直白的语言解释这段代码的每个部分:

  1. link rel="alternate":这个标签中的链接是本页面的一个替代版本。
  2. hreflang="x":它是替代版本,因为使用了不同的语言,而该语言是 x。
  3. href="https://example.com/alternate-page":这个替代页面可以在该 URL 处找到。

如何构建 hreflang 标签

构建 hreflang 标签,只需查一下所选语言的代码再填入标签。Hreflang 支持任何由两个字母组成的 ISO 639-1 语言代码(完整列表见此处)。

示例:

假设要从那篇关于免费关键词工具博文的英文版添加一个 hreflang 标签到德语版,最终得到的标签是:

<link rel="alternate" hreflang="de" href="https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/" />

这里只需填入语言代码(de 代表德国)和 URL。

定位到某个地区(可选)

虽然只指定语言就够了,但 hreflang 标签也支持额外添加地区或国家。它同样是由两个字母组成的代码,只是采用 ISO 3166-1 alpha-2 格式(完整列表)。只有希望针对特定地区使用某种语言的用户时,才需要添加。例如:

面向英国地区的英语用户:<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/hello" />面向美国地区的英语用户:<link rel="alternate" hreflang="en-us" href="https://example.com/us/hello" />

可以看到这里的语法是:hreflang="language-country"。

hreflang 实施基础

Hreflang 标签实施起来相当简单,稍后会讨论三种实施方法。但无论选择哪种方法,都必须牢记三条黄金法则。

规则一:Hreflang 标签是双向的

务必理解 hreflang 标签是成对起作用的。换句话说,若给一个英文页面添加了指向意大利语版本的 hreflang 标签,那么意大利语版本必须同样回以一个指向英文页面的 hreflang 标签。

这向搜索引擎证明你能同时控制这两个页面,且二者对彼此的关系达成共识。这些成对的页面构成一个页面集群,称为 hreflang 集群。

这有点像在 Facebook 上设置感情状态:完全可以对外宣称自己和 Jennifer Aniston 或 Brad Pitt 处于恋爱关系,但只要对方不这样做,没人会相信。

因此,当标签出现问题或关系尚未完全建立时,搜索结果中可能出现错误的页面、多个页面,或者正确的 URL 却配着错误的标题。

规则二:自引用 hreflang 属性是良好实践

Google 指出,“每个语言版本都必须列出自身以及所有其他语言版本。”也就是说,每个页面都应带有指向自身的 hreflang 标签,即自引用标签。

因此,若要在英文页面(https://example.com/hello)和意大利语页面(https://example.com/ciao)之间添加 hreflang 标签,两个页面都应包含以下标签:

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

第一个指定该页面意大利语替代版本的 URL,第二个是指向页面自身的自引用标签。

意大利语页面同样需要这两个 hreflang 标签。

规则三:推荐使用 X-default 标签,但并非强制

hreflang 的 x-default 标签用于指定没有其他合适语言变体时向用户展示的默认或后备页面。它并非强制,但 Google 建议使用。形式如下:

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

Google 端并不会对 x-default 进行验证。许多 SEO 从业者认为每个集群只有一个 x-default 标签,但实际上每个页面从技术上讲都可以有自己的 x-default。

如何实施 hreflang 标签

实施 hreflang 属性有三种方式:

  1. HTML 标签
  2. HTTP 标头
  3. 站点地图

1. 使用 HTML 实施 hreflang 标签

若刚接触 hreflang,使用基本的 HTML 标签大概是实施起来最简单、最快捷的方式。只需在网页的 <head> 标签中添加相应的 hreflang 标签(如前所述)即可。

示例:

我们最近推出了 Ahrefs 博客的多个语言版本,包括德语、俄语、中文和西班牙语,正逐步把主博客上的英文文章翻译成这些语言。其中已翻译成中文和德语的一篇,就是我们的最佳免费关键词研究工具清单。

三个版本的 URL 如下:

英语:https://ahrefs.com/blog/free-keyword-research-tools/德语:https://ahrefs.com/blog/de/kostenlose-keyword-recherche-tools/中文:https://ahrefs.com/blog/zh/free-keyword-research-tools/

要为这种设置正确实施 hreflang 标签,需要把这行代码添加到每个页面的 <head> 部分:

这种方法的问题在于,它很容易变得非常耗时且杂乱。

例如,若还要把这份免费关键词研究工具清单翻译成西班牙语,就得回头给该页面的所有其他语言版本再添加一个 hreflang 标签。

一个页面上可以添加的 hreflang 标签数量并没有上限。

2. 实施 hreflang HTTP 标头

对于 PDF 等非 HTML 页面,无法通过在 HTML 的 <head> 中放置标签来实施 hreflang,原因很简单:它们根本没有 HTML。这种情况下,可以使用 HTTP 标头指定文档各语言变体的对应语言。这种方法对普通网页同样有效,但更常用于其他内容类型。

示例

假设把免费关键词研究工具这篇文章的每个版本(英语、西班牙语、德语)都转换成 PDF。

这些文件各自的 HTTP 标头大致如下:

3. 在 XML 站点地图中实施 hreflang

站点地图可以包含相关标记,用来指定某个页面及其变体的 hreflang,使用 xhtml:link 属性即可。

示例

沿用最初的例子(免费关键词工具清单的三个 HTML 版本),站点地图的完整标记如下:

这看起来可能是实施 hreflang 属性最低效、最麻烦的方式,但事实往往恰恰相反:所有内容都定义在单个文件里,每次做细微修改或删除页面时,都无需再编辑多个 HTML 文档。

何况,标头中的额外开销和 HTML 中新增的代码意味着,大量 hreflang 标签可能影响网站速度,而通过站点地图实施则不会造成同样的减速。

如何半自动化实施 hreflang

本指南前面展示过一条来自 Google 的 John Mueller 的推文,他指出 hreflang 属性是 SEO 中最复杂的部分。这里再贴一次,便于参考:

他这么说的原因是,它“很快就会变得非常难”。

对大型多语言网站而言,这绝对是事实。不过,既然你在读这篇相当于 hreflang 标签入门指南的文章,我猜你的网站并非拥有数万名客户的大型跨国品牌,而是带有部分多语言内容的中小型网站。

若是如此,有个好消息:

hreflang 标签的生成和实施可以在很大程度上实现自动化。

要自动化处理,请复制这个 Google 表格模板,再按下面的说明操作。

1. 选择你的语言和地区

打开 Google 表格中的“Setup”(设置)标签页,选择网站的默认语言(或语言-地区),以及最多另外四种变体。

例如,若为 Ahrefs 博客设置这个表格,会把英语指定为默认语言,再把西班牙语、德语、俄语和中文作为四种备选变体。

2. 粘贴你的 URL

打开“URLs”标签页,应能看到最多五列,每一列都有一个与上一步所选语言相对应的表头单元格,此外还有一列用于“x-default”值。

把 URL 按需粘贴到表格中。

例如,若为 Ahrefs 博客做这件事,会把英语文章(主要/默认语言)粘贴到第一列,再把相关翻译版本的 URL 粘贴到其他列。

对网站上所有相关的国际页面都这样做。

3. 下载 hreflang XML 站点地图

打开“Results”(结果)标签页,即可看到自动生成的 XML 站点地图代码。

复制 A 列中的所有内容,粘贴到一个 XML 文档。

把它上传到网站,再通过 Search Console 提交给 Google。

4. 在表格中记录变更

每当在网站上添加或移除一个翻译页面,都要在这个 Google 表格中记录变更:移除页面就删除对应的 URL,新增翻译版本就把它添加到相应的列。

表格会实时重新生成站点地图代码,只需把它复制粘贴到站点地图中,替换旧代码即可。

如何审查网站是否存在 hreflang 问题

无论多么努力地跟进 hreflang 属性,有些错误几乎总会漏网。因此,定期审查网站的 hreflang 问题并尽早处理至关重要。

最简单的办法,是定期使用 Ahrefs 的 Site Audit 工具抓取网站。

为便于理解和展示 hreflang 问题,我们为 hreflang 集群添加了可视化视图,并提供所检测到的所有标签及其位置的更多数据。这能帮助发现并解释错误,无需依赖那些难以说明的复杂电子表格。

Site Audit 是一款基于云的爬虫,会检查网站是否存在数百种与 SEO 相关的问题,包括 hreflang 相关问题。

以下是 Site Audit 可能发现的九种 hreflang 相关问题及相应修复方法:

1. 缺少自引用 hreflang 注释

一个或多个页面缺少自引用 hreflang 标签时,会触发此警告。

为什么这是个问题

重申前面的观点,Google 指出“每个语言版本都必须列出自身以及所有其他语言版本”,所以只要给网页添加了 hreflang 标签,就务必使用自引用 hreflang 标签。

如何修复

检查受影响的页面,使用所选方法为每个页面添加一个自引用 hreflang 标签。

2. hreflang 注释无效

一个或多个 URL 的 hreflang 标签使用无效的语言或地区代码时,会触发此警告。

为什么这是个问题

搜索引擎会忽略任何无效的 hreflang 标签,这意味着它们可能忽略页面的替代版本。这对 SEO 不利,因为这可能使搜索引擎无法向用户展示最合适的页面版本。

如何修复

检查受影响的页面,查看“Is valid hreflang”(hreflang 是否有效)列,了解每个页面的无效 hreflang 标签。删除这些标签,改用符合有效语言或语言-地区代码格式的标签。

3. 同一页面在 hreflang 中被用于多种语言

一个或多个 URL 在 hreflang 注释中被用于多种语言时,会触发此警告。例如:

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

为什么这是个问题

每份内容都只应服务于一种语言或语言-地区。出现两个或更多相互矛盾的引用会让搜索引擎困惑,最终可能同时忽略这两个 hreflang 属性。

如何修复

检查受影响的页面,排查那些在其 hreflang 属性中引用该页面的 URL 是否存在错误,删除不正确的属性,让每种语言只保留一个正确的属性。

4. 缺少互惠 hreflang(没有回链标签)

hreflang 注释中声明的页面缺少确认(回链)链接时,会触发此问题。

为什么这是个问题

Hreflang 标签是双向的(即,如果页面 A 在 hreflang 注释中链接到页面 B,那么页面 B 也必须反向链接回页面 A)。

如何修复

检查受影响的页面,在必要处添加双向 hreflang 标签。

5. hreflang 指向非规范页面

一个或多个页面的 hreflang 标签引用非规范 URL 时,会触发此问题。

为什么这是个问题

rel="alternate" hreflang="x" 指示搜索引擎展示页面的翻译(本地化)版本,而 rel=canonical 属性则标明这不是权威(规范)版本。两个属性相互矛盾,会让搜索引擎困惑。

如何修复

检查受影响的页面,修改其 hreflang 注释,使其仅指向规范 URL。或者,若发现某个页面有错误的规范标签,就把它从页面中移除,以确保搜索引擎正确理解并遵循 hreflang 属性。

6. hreflang 与 HTML lang 不匹配

一个或多个 URL 声明的 hreflang 与其 HTML 语言属性不一致时,会触发此问题。

为什么这是个问题

Google 不使用 HTML 语言属性,但其他搜索引擎和浏览器会使用,保持这两个属性彼此一致很重要。

如何修复

检查受影响的页面,修改 HTML 语言属性,使其与声明的 hreflang 属性一致。

7. hreflang 指向失效页面

一个或多个页面的 hreflang 注释引用失效 URL 时,会触发此问题。

为什么这是个问题

Google 和其他搜索引擎无法向用户展示不存在的内容,因此指向死链页面的 hreflang 属性很可能被忽略。

如何修复

检查受影响的页面,修改 hreflang 注释,确保其链接到可正常访问的页面。

8. 同一语言在 hreflang 中对应多个页面

一个或多个 URL 在其 hreflang 注释中为同一语言(或语言-地区)引用两个或更多页面时,会触发此问题。

为什么这是个问题

在 hreflang 注释中为同一语言(或语言-地区)引用多个页面,只会让搜索引擎困惑,它们往往会忽略或误解这类指令。

如何修复

检查受影响的页面,删除其中一个 hreflang 注释,使每种语言只引用一个页面。

9. 缺少 X-default hreflang 注释

页面上没有 x-default hreflang 注释时,会触发此问题。

为什么这是个问题

虽然 x-default hreflang 属性是可选的,但 Google 建议使用它,作为“在没有语言匹配时控制所展示页面”的一种方式。SEO 的最佳实践是为所有 hreflang 注释都使用 x-default 标签。

如何修复

检查受影响的页面,确保每个页面都设置“x-default”hreflang 属性,并确保它指向的页面不特定于某一种语言或地区。

…….

为持续跟进随时间可能出现的 hreflang 问题,可以在 Ahrefs 的 Site Audit 工具中安排每日、每周或每月的抓取,在项目设置中即可完成。

每次计划性抓取后,新出现的问题都会显示在相关项目的本地化报告中,请定期查看。

使用 Ahrefs 的 Site Explorer 检查排名是否有误

把要检查的语言对应的域名、子域名或子目录路径粘贴到 Ahrefs 的 Site Explorer 中,然后前往“Overview”(概览)报告下的“Organic search”(自然搜索)标签页。

查看按搜索流量排列的国家/地区列表,是否符合预期?

这里,我们网站的德语版(ahrefs.com/de)在德国以及奥地利、瑞士等德语国家获得排名,这在意料之中。但它同时也从美国和印度获得流量,看起来有些奇怪。

像这样检查网站的不同版本,是查找 hreflang 标签潜在问题的良好起点。

Google 可能会忽略的 hreflang 问题

尽管遵循最佳实践仍然是明智之举,但有些时候搜索引擎可能会忽略某些问题。通常,当搜索引擎反复看到同一个问题,它就会相信自己能在后端处理。

以下是几个已确认的、Google 会替你“修复”的 hreflang 标签问题:

1. 用下划线代替连字符

Gary Illyes 在这条 Twitter 讨论串中提到,Google 的解析器能够处理这个常见错误。

2. 用 en-UK 代替 en-GB

John Mueller 在 Reddit 上他的 AMA(Ask Me Anything,有问必答)中谈到这一点。由于 UK 是一个保留代码,他们可以纠正这个问题。

3. hreflang 没有自引用

Google 的 John Mueller 最近表示,自引用 hreflang 是可选的,但属于良好实践。

4. 相对 URL 与绝对 URL

重定向用户时要小心

很多情况下,网站会根据 cookies、IP 地址和/或浏览器语言的某种组合自动重定向用户。这可能给用户带来糟糕而令人沮丧的体验,也常常给试图为内容建立索引的搜索引擎带来麻烦。除其他问题外,还可能破坏 hreflang 标签所需的连接。

以下是 Google 的说法:

始终像对待来自任何地点的用户一样对待搜索引擎爬虫。若对搜索引擎机器人的处理方式与对用户不同,会被视为伪装(Cloaking),并违反 Google 的网站管理员指南。

可行的做法是,用同样的检测逻辑,通过一个小横幅向用户推荐更合适的页面版本。

注意不要让这个横幅占用太多空间,横幅过大可能被视为插页式广告(interstitial)。

还有几点提醒

对 Google 而言,用 UTF-8 对 URL 中的字符进行编码没有问题,但你的技术栈中可能存在某个环节不支持它。

不能把 hreflang 标签放在 body 中,因为它们可能被用于劫持。在某些条件下,这些标签会被强制挤入 body 部分,称为“破坏 <head>”,可能由 iframe、<head> 部分中未闭合的标签,或用 JavaScript 注入不同内容所导致。可使用 DOM 断点来排查。

要查看这些内容,可能需要通过 Google 的某个工具查看渲染后的 DOM,或在 Chrome 中“右键单击”> 检查,然后在 Chrome DevTools 的 Elements(元素)面板中搜索。

不要用 robots.txt 屏蔽带有 hreflang 标签的页面,否则 Google 无法抓取这些页面,也就看不到 hreflang 标签。

不要对带有 hreflang 标签的页面使用 noindex,它们需要被索引。

结语

Hreflang 并没有那么复杂。只需保持条理,尽可能实现自动化实施,持续跟进那些必然会出现的各种问题,并尽快修复。

有任何疑问?欢迎在评论区留言,或者在 Twitter 上找我。