Hreflang 标签：终极指南

已发表: 2021-02-02
如果您的技术技巧包中还没有理解和使用 hreflang，那么这可能是添加它的时候了。 Hreflang 是一种 HTML 属性，可帮助 Google 将用户的语言和位置因素纳入搜索中显示哪些页面的决定中。 虽然 hreflang 是一个简单的 HTML 属性，但掌握和实现它可能具有挑战性。

那么为什么要打扰呢？ 原因如下： hreflang 可能是为具有多种语言的相似内容的网站创建 SEO 内容的最重要的一个方面。 所以，请放心：回报将超过与该过程相关的任何痛苦——而且它会让你受到关注。 有什么不值得喜欢的？

什么是 Hreflang 标签？

Hreflang 是一种代码——具体来说，是一个 HTML 属性——它指定了网站上使用相同内容的所有 URL。 hreflang 属性是谷歌在十多年前引入的，它允许用户向搜索引擎展示不同语言的多个网页之间的关系。 当为特定受众创建内容时，这证明是有用的。 对于具有不同语言的同一网页的多个版本的公司，hreflang 标签将这些变体传达给搜索引擎，并帮助向用户提供正确的版本。

例如，如果有人在美国使用 Google 搜索“Ikea”，他们会看到以下结果：

宜家的 hreflang us 结果

虽然加拿大搜索者的相同查询会返回以下结果：

宜家的加拿大谷歌搜索结果

为什么要大惊小怪？ hreflang 标签允许搜索引擎根据用户的国家和语言偏好向用户提供结果，这使得 hreflang 标签的意义非常宝贵：它优化了用户体验并提高了搜索排名。 怎么样才算双赢？

为什么 Hreflang 对 SEO 很重要？

这一切都归结为个性化的结果。 如果用户没有被引导到为他们量身定制的结果，那么将网页翻译成多种语言的所有辛勤工作都将付诸东流。 简而言之，hreflang SEO 允许搜索引擎根据用户的语言和位置向用户提供最合适的公司网页版本。 有针对用户特定偏好优化的页面？ 您不仅希望他们降落在那里，而且还希望他们逗留——出于多种原因——并且 hreflang 标签 SEO 就是如何做到这一点的。

实施这种做法可以改善用户体验，最大限度地减少返回搜索结果的次数，并产生更高的排名。 （如果一开始没有成功，请尝试，再试一次，这在浏览基于 Web 的搜索时不一定是有用的谚语）。 这里的目标不是增加流量，而是为需要快速、可靠回报的正确用户提供正确的内容。 Hreflang 标签是实现这些细微差别的结果的关键。

需要另一个理由吗？ 使用 hreflang 消除了重复内容的问题。 想象一下，您的公司在针对美国和加拿大的不同 URL 上提供相同的英文内容； 差异可能很小，并反映在货币细节（美元与加元）和行话（英制与公制）中。

graphic showing hreflang tags meaning and how hreflang tags send users to the correct page for their location

hreflang 标签可帮助搜索引擎识别和理解这些页面之间的关系——以及为每个页面创建的不同受众。 如果没有 hreflang，Google 可能会倾向于将这些页面视为重复内容并仅返回其中一个结果； 使用hreflang，可以非常清楚地向搜索引擎传达虽然内容（大部分）相同，但针对不同人群进行了优化。 你帽子上的一根羽毛（或 touque，对于我们的加拿大朋友）怎么样？

这些细节很重要，因此请继续阅读以了解更多信息。

Hreflang 标签是什么样的？

Hreflang 标记简单、一致，并使用以下语法：

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

这种格式表明链接页面是当前页面的替代版本，以语言“x”出现。 Hreflang 标签作为搜索引擎的信号，而不是指令。 换句话说，hreflang 属性向搜索引擎发出信号，表明使用语言“x”进行查询的用户将更喜欢该结果，而不是使用语言“y”的内容非常相似的页面。 信号和指令之间的另一个区别？ 如果认为不准确，Google 可能无法识别 hreflang 属性——导致其他 SEO 因素覆盖 hreflang 属性，导致您公司页面的替代版本排名高于最佳版本。

使用 Hreflang HTML

对于已经翻译成多种语言的网站，构建标签hreflang就像1-2-3一样简单。 这些步骤中的每一个都使用上面提到的语法（<link rel="alternate" hreflang=“x” href=“https://www.example.com/new-page” />）作为基础。

  1. hreflang 属性必须包含由语言组成的有效值； 此信息以称为 ISO 639-1 格式的两个字母代码进行通信。 例如，如果您想将示例页面翻译成葡萄牙语，它将如下所示：
     <link rel="alternate" hreflang="pt" href="https://example.com/portugese-version" />

    该区域是可选的，如果使用，则应采用 ISO 3166-1 Alpha 2 格式。 您可以使用以下两个不同的标签分别定位葡萄牙和巴西的葡萄牙语使用者：

     PT-PT: <link rel="alternate" hreflang="pt-pt" href="https://example.com/pt/our-page" />
PT-BR: <link rel="alternate" hreflang="pt-br" href="https://example.com/br/our-page" />

    地区代码不一定直观（英国的代码是“gb”而不是“uk”），所以请仔细检查！ 在将错误信息嵌入您的网站之前，请使用此列表验证准确的语言和地区代码。

  2. 每个 URL 都需要返回指向所有其他 URL 的链接，所有这些链接都应指向给定网站的规范或首选版本。 您拥有的语言越多，您需要的 hreflang 链接就越多； 虽然限制它们可能很诱人，但要避免这一步是不可能的。此外，rel=”alternate” hreflang=”x”markup 和 rel=”canonical” 可以而且应该一起使用。 每种语言都应该有一个指向自身的 rel=”canonical” 链接。 从 example.com 主页开始，它看起来像这样：
     <link rel="canonical" href="http://example.com/">
<link rel="alternate" href="http://example.com/" hreflang="pt" />
<link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" />
<link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />

    有关规范的更多信息，请阅读规范标签和 URL：初学者的简单指南。

  3. 成功构建 hreflang 的最后一步植根于自链接。 每个页面上的 hreflang 属性都需要引用自身以及任何作为其替代的页面。 Google 强烈建议设置一个“x-default”页面，该页面将单个 URL 建立为默认版本，该版本不针对指定语言或区域之外的访问者。如果访问 pt-pt 页面，只有规范会改变：
     <link rel="canonical" href="http://example.com/pt-pt/">
<link rel="alternate" href="http://example.com/"hreflang="pt" />
<link rel="alternate" href="http://example.com/pt-pt/"hreflang="pt-pt" />
<link rel="alternate" href="http://example.com/pt-br/"hreflang="pt-br" />

要消化的东西很多！ 但是您已经做到了这一步，这意味着您已经为下一步做好了准备：学习如何实现 hreflang 标记。

实现 Hreflang 标签

实现hreflang标签的方式有3种，归根结底就是放置：

1 – 使用 HTML 实现 Hreflang 标签：

在页面上使用 hreflang 标签的屏幕截图

对于那些不熟悉 hreflang 的人来说，使用基本的 HTML 标签是最简单、最快捷的方式。 只需在网页的 <head> 标记中添加任何适当的 hreflang 标记（见上文）。

示例： example.com 的网站管理员希望让美国的英语和西班牙语用户可以访问他们的主页； 在他们网站的 HTML 的 <head> 中使用以下注释可以实现这一点：

 <link rel="alternate" href="https://www.example.com" hreflang="en-us" />
<link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />

如果他们想向委内瑞拉和墨西哥的西班牙语用户显示主页，hreflang 注释将如下所示：

 <link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" />
<link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />

这种方法的最大缺点是什么？ Hreflang HTML 会很快变得混乱和耗时。 另外，请记住 <head> 和 <header> 元素之间存在区别； <head> 包含不会出现在页面上的元素，在本例中是 hreflang 属性。

2 – 实现 Hreflang HTTP 标头：

对于您网站上的 PDF 和非 HTML 内容，使用 HTTP 标头来实现 hreflang。 这个名字有点误导：实现不是通过 <head> 或 <header> 在页面上完成的。 相反，这一切都是在网站的后端完成的。 使用 HTTP 标头不仅可以指定文档变体的相关语言，还可以优化此内容。

示例：要在您的网站上识别英文和法文版本的 PDF 文档，HTTP 标头中显示的链接将如下所示：

 链接：<http://en.example.com/document.pdf>； 相对=“替代”； hreflang="zh", 
<http://fr.example.com/document.pdf>； 相对=“替代”； hreflang="fr"

这种实现方法的最大缺点是什么？ 使用 HTTP 标头会增加您网站上的每个请求的开销，这会降低用户的浏览体验。

3 – 在您的 XML 站点地图中实现 Hreflang

实现 hreflang 的最后一个选项是使用 XML 站点地图标记； 这使用 XML 中的 xhtml:link 属性将注释添加到每个 URL。

虽然在您的 XML 站点地图中实现 hreflang 的方法不止一种，但我们推荐这样的方法：

带有 hreflang 链接的 sitemap.xml 的屏幕截图

或者，您可以使用下面的一些示例。

请注意：带有一对语言/位置变量的单个 URL 所需的标记会显得很长！ 也就是说，请继续阅读以获得好处。 （有许多！）

例子：

 <网址>
<loc>http://www.example.com/uk/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

注意第三个 URL 是自引用的； 这指定了特定的 URL 用于 en-gb，并指定了另外两种语言/位置组合。 现在，在站点地图中实现这两个 URL 如下所示：

 <网址>
<loc>http://www.example.com/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>
<网址>
<loc>http://www.example.com/au/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

假设您能够查看大量文本，您会注意到只有 <loc> 元素中的 URL 发生了变化——其他一切都保持不变！ 唷。 此方法依赖于具有自引用 hreflang 属性的每个 URL，并返回指向其他 URL 的链接。

看起来工作量很大，对吧？ 一方面，是的，这种方法很长，并且在对许多 URL 执行此操作时需要相当多的输出。 也就是说，好处很简单：普通用户不会被这个标记所困扰； 没有添加额外的页面权重，并且生成这种标记不需要在页面加载时进行大量数据库调用。

最后，通过 XML 站点地图实现 hreflang 有一个主要好处——一切都在一个文件中定义。 这样就无需在每次更改或删除页面时编辑多个 HTML 文档。 另外，零站点减速。 换句话说，有很多值得喜欢的地方！

仍然不确定选择哪种实施模式？ 有关网站架构和网站结构的更多提示，请访问技术 SEO 最佳实践。

查找和修复 Hreflang 问题

现在您已经在您的网站上成功实现了 hreflang（在此处插入虚拟高五！），维护是必须的。 对您选择的实施进行定期审核将确保其设置正确。 与您公司中处理网站内容的个人交流会大有帮助——您希望他们了解 hreflang，这样他们就不会无意中破坏您的实施！

这里需要提到两个关键点：如果页面被删除，请检查其对应的页面是否已更新； 当页面被重定向时，更改其对应的 hreflang URL。 假设您和您的团队始终如一地做这些事情并定期审核，那么它​​应该是一帆风顺的。

同时，这里简要介绍了最常见的 hreflang 错误以及如何修复它们：

1 – 缺少自引用 hreflang 注释

有什么大不了的？ 每次将 hreflang 标记添加到网页时，使用自引用 hreflang 标记很重要。 请记住 Google 声明，“每个语言版本都必须列出自己以及所有其他语言版本。”

如何修复它：查看所有受影响的页面，并使用您选择的实施方法为每个页面添加一个自引用的 hreflang 标记。

2 – Hreflang 注释无效

有什么大不了的？ 搜索引擎会忽略无效的 hreflang 标签，这会导致您的网页的替代版本被忽略。

如何修复它：查看受影响的页面并删除无效的 hreflang 标记并替换为使用有效语言/位置代码格式的那些。

3 – 在 hreflang 中引用的页面不止一种语言

有什么大不了的？ 每条内容都旨在为单一语言/语言位置提供服务。 两个或多个冲突的引用会混淆搜索引擎并导致 hreflang 属性被忽略。

如何修复它：查看受影响的页面并检查在其 hreflang 属性中引用特定页面的 URL 是否存在错误。 删除任何不正确的 hreflang 属性，并且每种语言只保留一个正确的属性。

4 – 缺少互惠hreflang（没有返回标签）

有什么大不了的？ Hreflang 标签是双向的（如果页面 A 在 hreflang 注释中链接到页面 B，则页面 B 必须链接到页面 A 作为回报）。

显示hreflang标签如何互惠的图形

如何修复它：查看受影响的页面并在需要时添加双向 hreflang 标签。 注意：Google Search Console 中的国际定位报告（位于“语言”选项卡下）将标记所有缺少返回标签的实例。

例如：

带有 hreflang 错误的 Google 搜索控制台的屏幕截图

5 – Hreflang 到非规范

有什么大不了的？ Rel=“alternate” hreflang=“x” 指示搜索引擎显示页面的翻译（本地化）版本； rel=canonical 属性将标记这不是权威（规范）版本。 这些相互矛盾的属性会使搜索引擎感到困惑。

如何修复它：查看受影响的页面并修改 hreflang 注释，使其仅指向规范 URL。 如果您偶然发现带有无效规范标签的页面，请将其删除。 这确保了 hreflang 属性被搜索引擎正确理解和遵循。

6 – Hreflang & HTML 语言不匹配

有什么大不了的？ 当声明的 hreflang 和一个或多个 URL 的 HTML 语言属性之间存在不一致时，搜索引擎（Google 除外）会感到困惑； 保持这两个属性彼此一致很重要。

如何修复它：查看受影响的页面并更改 HTML 语言属性以确保它与声明的 hreflang 属性保持一致。

7 -Hreflang 到一个损坏的页面

有什么大不了的？ 搜索引擎无法返回不存在的内容！ 因此，指向死页的 hreflang 属性将被忽略。

如何修复它：查看受影响的页面并更改 hreflang 注释以确保它们链接到工作页面。

8 – hreflang 中同一种语言的多个页面

有什么大不了的？ 当一个或多个 URL 在 hreflang 注释中引用相同语言（或语言位置）的两个或多个页面时，搜索引擎会变得混乱。

如何修复它：查看受影响的页面并删除其中一个 hreflang 注释，因此每种语言都引用一个页面。

9 – 缺少 X-default hreflang 注释

有什么大不了的？ 虽然 x-default hreflang 属性是可选的，但建议将它们作为所有 hreflang 注释的 SEO 最佳实践。

如何修复它：查看受影响的页面并确保每个页面都有一个“x-default”hreflang 属性集，该属性指向一个不特定于特定语言或位置的页面。

还有问题吗？ 查看 Core Web Vitals 算法更新，其中概述了您今年想要更新的其他技术 SEO 实践。

Google 可能会忽略的问题

您在遵循最佳实践方面已经尽了自己的一份力量——不过，有时搜索引擎会忽略某些问题。 这主要发生在搜索引擎反复看到相同的问题并认为可以归根结底时。 不要出汗！ 这实际上非常有帮助。 以下是 Google 实际为您“修复”的一些 hreflang 标签问题：

  1. 下划线而不是破折号：这是一个常见错误，Google 对此进行了说明。 每一个。 单身的。 时间。
  2. 使用 en-UK 而不是 en-GB：我们之前讨论过这个……地区代码不一定直观的事实。 请放心，Google 已为您提供保障：英国是保留代码，这意味着 Google 会更正此常见问题。
  3. Hreflang 没有自引用： Google 最近声明自引用 hreflang 是可选的； 尽管如此，这仍然是一种很好的做法。
  4. 相对 URL 与绝对 URL：虽然 canonical 和 hreflang 都可以使用相对路径，但绝对更绝对！ 因此，建议尽可能使用它。

重定向用户：注意事项

在许多情况下，网站会根据 cookie、IP 地址和/或浏览器语言的组合重定向用户； 当心重定向！ 对于用户来说，这可能会转化为令人沮丧（阅读低于标准）的体验； 对于搜索引擎，尝试索引您的内容会成为问题。 此外，重定向用户可能会破坏您的 hreflang 标签所需的已建立连接。

以下是谷歌对这种做法的看法：

不要使用 IP 分析来调整您的内容。 IP 位置分析很困难，而且通常不可靠。 此外，Google 可能无法正确抓取您网站的变体。 大多数（但不是全部）Google 抓取来自美国，我们不会尝试改变位置来检测网站变化。 使用此处显示的一种显式方法（hreflang、备用 URL 和显式链接）。

像对待来自任何位置的用户一样对待搜索引擎爬虫。 以不同于对待用户的方式对待搜索引擎机器人被认为是伪装——向人类用户和搜索引擎呈现不同内容或 URL 的做法——违反了 Google 的网站管理员指南。

想要一个经过批准的修复程序，为用户提供他们预期的结果？ 使用相同的检测逻辑在小横幅上为用户推荐更好的页面版本。 需要注意的是，如果它太大，可能会被视为插页式广告（导致内容被用户完全或部分遮挡）。

检测逻辑如何建议网页的更好版本的示例

Hreflang 专业提示

有一个 Google Chrome 扩展程序可以自动检查站点的 hreflang 部署。 获取有关此和其他 SEO Chrome 附加组件的内幕消息，这些附加组件可以帮助您管理日常 SEO 维护。

结论

理解、利用和故障排除 hreflang 是当今 SEO 的要求。 想确保您正在尽一切努力提高您的网站在世界各个角落的知名度吗？ Victorious 深入挖掘影响搜索的当地文化趋势和购买模式，以确定您的国际 SEO 活动的最佳策略。

准备好开始使用 SEO 代理了吗？ 立即注册您的免费 SEO 咨询，让 Victorious 指导您完成整个过程。