Hreflang 标签经常被忽视，有时只是在重新考虑时才实现。因此，试图在国际上获得 SERP 空间的网站可能会遇到重大问题。
在本文中，我们将深入探讨 hreflang 问题：如何发现它们以及如何确保正确实施，以增加来自特定国家/地区或使用特定语言的用户的目标流量。
什么是赫夫朗？
hreflang 是一个 HTML 属性，旨在告诉搜索引擎针对特定语言和/或位置的页面的不同版本之间的关系。
该属性放置在 HTML 文档的 head 部分的链接标记中，并定义页面所针对的语言和国家/地区。实施后的样子如下：
<linkrel=”alternate” href=”https://example.com” hreflang=”en-us” />Hreflang 属性和 SEO
了解 hreflang 属性的工作原理对于国际 SEO 的成功至关重要。无论您是经营电子商务还是在不同国家/地区拥有多家商店的实体企业，为受众本地化您的页面都非常重要。
我们以XXX酒店为例。他们接待来自欧盟各地的游客，因此他们创建了意大利语、英语、德语和法语版本的网站。
如果只是关于语言，团队可以简单地使用html 标签内的lang 属性来告诉浏览器和搜索引擎该页面的指定语言是什么（尽管大多数搜索引擎不再使用此标签进行语言检测） 。
但是，它并没有告诉搜索引擎该页面还有其他版本，也没有定义这些版本与当前版本之间的关系。因此，搜索引擎可以将其他版本标记为重复内容，或者完全忽略它们，这可以防止它们被索引。
注意：如果页面使用相同语言，Google 只会将其标记为重复，但不会将翻译版本标记为重复。换句话说，如果您的页面在美国、英国和加拿大有不同的英文版本，您可能会遇到重复内容的问题。然而，法语、英语和意大利语版本不会导致同样的问题。
我们还希望用户根据他们的语言和位置找到正确的网站版本。因此，法语用户在 Google 或 Bing 上搜索时可以找到法语版本的 URL。
Hubspot有一个很好的例子：
“如果用户从德国搜索 HubSpot.com，hreflang 标签将负责更改搜索引擎中可用的链接。然而，当有人登陆德国的 HubSpot.com 时，lang 标签会更改页面本身的语言。”
因此，简单地说，hreflang 标签允许我们控制搜索引擎如何管理我们的多语言网站，并确保我们的用户始终获得他们需要的版本。
如何实现 Hreflang 标签
现在我们了解了 hreflang 标签对于 SEO 目标的重要性，我们还需要能够向开发人员解释如何实现它。
让我们探讨三种用于告诉搜索引擎我们页面的本地化版本的主要方法：
- HTML 标签
- XML 站点地图
- HTTP 标头
用于本地化的 HTML 标签
最简单（尽管最耗时）的策略是<link>向<head>HTML 站点添加元素，以告诉搜索引擎该页面的不同变体。您可能更熟悉此方法，因为在检查网站时很容易在 HTML 代码中看到它。
为了更清楚地了解此实现的工作原理，我们将回到之前的 Grand Hotel 示例来检查该站点：
<link rel="alternate" href="https://www.grandhotel.sm/it/" hreflang="it">
<link rel="alternate" href="https://www.grandhotel.sm/en/" hreflang="en">
<link rel="alternate" href="https://www.grandhotel.sm/de/" hreflang="de">
<link rel="alternate" href="https://www.grandhotel.sm/fr/" hreflang="fr">
我们可以将此过程分为以下步骤：
<link>为页面的每个变体创建一个元素 –包括原始的.- 将 rel 设置为“alternate”
- 添加变体的 URL
- 将 hreflang 属性设置为语言和国家/地区
另外，请记住以下几点：
- 如上例所示，您可以单独添加语言代码，但不能添加国家/地区代码。如果您只添加国家/地区代码，搜索引擎将忽略您的标签。
- 确保将原始页面作为变体列表的一部分进行自我引用，因此页面 A 也会作为列表的一部分列出
<link>。 - 页面的每个版本都必须相互指向。如果页面 A 指向页面 B，但页面 B 未指向页面 A，Google 会将其视为欺诈尝试。
我们建议您仔细阅读Google 的页面本地化指南，以便涵盖所有基础内容。并且，这里是Google 接受的所有 lang_codes 的完整列表。
来自谷歌的注释：
| 重要提示：将<link>标记放在<head>元素顶部附近。至少，<link>标记必须位于格式良好的<head>部分内，或者位于可能导致 <head>过早关闭的任何项目（例如<p>或跟踪像素）之前。如果有疑问，请将渲染页面中的代码粘贴到HTML 验证器中，以确保链接位于<head>元素内。 |
用于 Hreflang 实施的 XML 站点地图
对于大型网站，或者要处理 10 多种语言和位置变化，使用 XML 站点地图是使用 HTML 标记的更好替代方案，特别是可以避免向文件中添加可能的数百行代码。
<loc></loc>相反，我们可以通过使用 指定主 URL ，将每个变体作为子项列出<xhtml:link/>，并遵循与 HMTL 标记中相同的结构来创建 hreflang 子条目列表。
假设我们想要为 Prerender 实现此功能；它看起来是这样的：
<url>
<loc>https://prerender.io/react/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://prerender.io/deutsch/react/"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://prerender.io/schweiz-deutsch/react/"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://prerender.io/react/"/>
</url>我们可以将此过程分为以下步骤：
<url>为每个 URL创建一个元素- 在元素内部
<url>，添加一个<loc>元素来指定 URL - 为每个页面变体（包括其自身）添加一个子元素，并且它必须指定：
rel="alternate"hreflang="supported_language-code">href="page_url"
添加完整的 URL（包括协议 (http/https)）并保持子元素的组织一致非常重要。这对于维护目的很重要，因为它更容易阅读和理解。
使用 HTTP 标头进行本地化
对于 PDF 等非 HTML 文件，我们可以“通过（我们的）页面的 GET 响应返回 HTTP 标头，以告诉 Google 页面的所有语言和区域变体。”
这是谷歌本身的一个例子：
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"
正如您在比较方法时所看到的，唯一改变的是我们向搜索引擎传递信息的方式。结构几乎保持不变。
只要你坚持下去，最终使用哪种策略并不重要。无需结合不同的策略。
另外，请注意，只有开发人员或有经验的人才应该弄乱 HTTP 标头，因此将其用于 hreflang 可能比其他两种方法更耗时且更困难。
7 个最常见的 Hreflang 错误和问题以及如何解决它们
尽管 hreflang 的实现相当简单，但仍然有很多机会出现错误和问题。
以下列出了我们在对国际网站进行技术审核时需要注意的七个最常见问题：
1. 没有自引用 Hreflang 标签
人们很容易忘记，您需要在 hreflang 地图上添加页面本身，但正如 Google 所说，“对于页面的每个变体，在元素<link>中包含一组元素<head>，每个页面变体（包括其自身）有一个链接。” 如果 hreflang 地图中未提及该页面，则您的代码将被忽略。此规则也适用于站点地图和 HTTP 标头。
作为 HTML hreflang 实现的最佳实践，请在页面的规范标记后面添加列表，如下所示：
<link rel="canonical" href="https://www.grandhotel.sm/it/">
<link rel="alternate" href="https://www.grandhotel.sm/it/" hreflang="it">
<link rel="alternate" href="https://www.grandhotel.sm/en/" hreflang="en">
<link rel="alternate" href="https://www.grandhotel.sm/de/" hreflang="de">
<link rel="alternate" href="https://www.grandhotel.sm/fr/" hreflang="fr">请注意，规范版本和“it”版本是相同的，使页面成为列表的一部分。
2. 互换使用 Canonical 和 Hreflang 标签
谈论规范标签。我们一次又一次看到的情况是，页面使用规范标签，就好像它是 hreflang 映射中的自引用链接，或者将 hreflang 属性添加到规范标签本身。这两种方法都是错误的。
canonical 标签有一个已定义的函数，将其与 hreflang 属性组合会导致错误：
<link rel="canonical" hreflang=”en” href="https://prerender.io/">
<link rel="alternate" hreflang="it" href="https://prerender.io/it/">
<link rel="alternate" hreflang="fr" href="https://prerender.io/fr/">在这里，我们都滥用了规范标签并遗漏了自引用的 hreflang 标签。
注意：无需将所有版本规范化为一个版本。规范标签对于页面的两个版本都应该是自引用的。
3. 缺少往复/返回链接
任何 hreflang 实现的关键步骤是确保页面 A 和页面 B 相互链接。如果这些页面之一没有响应 hreflang 标签，Google 将忽略您的代码，以避免第三方滥用，试图将其页面任意附属于您的页面。
假设页面 A 是我们的英语版本，页面 B 是我们（假设的）法语版本，这两个注释必须如下所示：
英文版：
<link rel="canonical" href="https://prerender.io/">
<link rel="alternate" hreflang=”en” href="https://prerender.io/">
<link rel="alternate" hreflang="fr" href="https://prerender.io/fr/">法语版本：
<link rel="canonical" href="https://prerender.io/fr/">
<link rel="alternate" hreflang=”en” href="https://prerender.io/">
<link rel="alternate" hreflang="fr" href="https://prerender.io/fr/">4. Hreflang URL 损坏或重定向
hreflang 映射的功能是告诉搜索引擎哪些 URL 应该被索引并显示给以特定语言或位置进行搜索的用户。
但是，如果 hreflang URL 被重定向或损坏(404)，则链会断开，Google 等搜索引擎将决定忽略您的地图或浪费抓取预算来请求更多页面。
对于拥有数千个页面的网站（例如电子商务或企业网站），这可能会成为巨大的抓取预算杀手或创建索引循环。
我们需要更新 hreflang 映射，始终将目标 URL 添加到<link>元素中。
5. Hreflang URL被Robot.txt文件阻止
Google 需要抓取每个页面版本才能找到返回链接并理解 hreflang 地图。事实上，约翰·穆勒 (John Muller) 曾表示，“每种语言版本都必须至少被抓取和索引两次，hreflang 才能发挥作用。”
在处理多个版本时，一些网站管理员倾向于使用 robots.txt 指令阻止页面的“次要”版本被抓取，从而使 Google 无法访问该页面并使整个 hreflang 逻辑失效。
我们还在国际版本页面的源代码中看到了 noindex 标签，这可能会导致搜索引擎忽略您的代码。
我们说它可能会被忽略，因为在某些情况下，用户已经看到他们的非索引国际版本显示在搜索结果上。我们的猜测是，Google 仍然可以通过读取 hreflang 标签来了解要显示的首选版本。毕竟，它仍在抓取这些页面，只是没有将它们编入索引。
6. 使用相对 URL 代替绝对 URL
Hreflang 标签需要包含整个 URL，包括其协议。根据定义，它们无法处理仅包含路径（域之后的所有内容）的相对 URL。
正如所说：
“由于相对 URL 不包含整个 URL 结构，因此假设链接相对 URL 时，它使用与其所在页面相同的协议、子域和域。”
但是，它们不适用于 hreflang 标记，并且会忽略整个 hreflang 地图。映射 hreflang 链接时，请确保添加绝对 URL：
<url>
<loc>https://prerender.io/react/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://prerender.io/deutsch/react/"/>
</url>而不是相对 URL：
<url>
<loc>https://prerender.io/react/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="/react/"/>
</url>7. 不正确的语言和/或国家代码
例如，标签对语言使用ISO 639-1格式，对国家/地区使用 ISO 3166-1 alpha-2 格式。
当网站站长尝试使用可接受格式之外的代码时，我们会遇到一些问题。一个明显的例子是尝试使用“eu”来针对整个欧洲大陆，或使用“uk”来针对英国。
作者：terry，如若转载，请注明出处：https://www.web176.com/news/frontend/27987.html
