HTML <a> hreflang 属性（长文解析）

一、什么是 hreflang 属性？

1.1 基本概念

hreflang 是 HTML 中用于指定超链接或页面内容语言及目标地区的属性。它通过结合语言代码（如 en 表示英语）和国家代码（如 GB 表示英国），帮助搜索引擎理解页面内容的受众群体。

形象比喻：
可以将 hreflang 想象为一个“翻译家”的角色——它告诉搜索引擎：“这个页面是用哪种语言写的，适合哪些地区的用户？”

1.2 核心语法

hreflang 的语法格式为：

<link rel="alternate" hreflang="语言代码-国家代码" href="目标页面URL" />  

或在 <a> 标签中使用：

<a href="目标页面URL" hreflang="语言代码-国家代码">链接文本</a>  

关键点：

• 语言代码遵循 ISO 639-1 标准（如 zh 表示中文）。
• 国家代码遵循 ISO 3166-1 alpha-2 标准（如 CN 表示中国）。
• 如果页面不针对特定国家，仅需语言代码（如 hreflang="es" 表示西班牙语）。

二、为什么需要 hreflang 属性？

2.1 解决重复内容问题

当网站提供多语言版本时，不同语言页面的内容可能高度相似，容易被搜索引擎视为重复内容。hreflang 可以明确告诉搜索引擎：“这些页面是同一内容的不同语言版本，无需惩罚。”

案例：
假设一个电商网站有英文（en-US）和法语（fr-FR）版本，若未使用 hreflang，Google 可能将两个页面视为重复，导致排名下降。

2.2 提升用户体验

通过 hreflang，搜索引擎能根据用户所在地区或浏览器语言设置，自动跳转到最匹配的页面。例如，一位法语用户访问英文网站时，可直接看到法语版本，无需手动切换。

2.3 SEO 优化

正确使用 hreflang 能提高国际搜索排名。Google 官方明确表示，hreflang 是其算法中考虑的重要因素之一。

三、hreflang 属性的使用场景

3.1 多语言网站

适用于拥有不同语言版本的网站，例如：

<!-- 在英文页面（en-US）中添加其他语言链接 -->  
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/" />  
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/" />  

3.2 区域化内容

针对不同国家/地区的同一语言内容（如英语的英国 vs 美国版本）：

<!-- 英国页面（en-GB） -->  
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />  

3.3 自动化跳转

结合 JavaScript 或服务器配置，根据用户 IP 或语言偏好自动跳转到对应页面。

四、如何正确使用 hreflang 属性？

4.1 遵循“闭环”原则

每个页面必须与其他所有语言版本形成闭环链接。例如，页面 A 链接到页面 B，则页面 B 也必须链接回页面 A。

错误示例：
页面 A 仅链接到页面 B，但页面 B 未链接回 A → 可能导致搜索引擎无法正确识别关联。

4.2 语言代码格式规范

• 语言代码和国家代码均需小写。
• 仅语言代码（如 es）表示“所有西班牙语用户”。
• 语言+国家代码（如 es-ES）表示“西班牙的西班牙语用户”。

4.3 自引用链接

每个页面必须包含自身语言版本的自引用链接。例如，英文页面需添加：

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

4.4 避免常见错误

• 错误 1：遗漏国家代码（如 hreflang="en"）。
  → 正确写法：hreflang="en-US"（明确地区）。
• 错误 2：使用非标准代码（如 zh-CN 代替 zh-TW）。
  → 台湾的正确代码为 zh-TW。

五、实际案例分析

5.1 电商网站的多语言配置

假设某电商网站有三个版本：中文（简体，中国）、英文（美国）、法语（法国）。其首页头部需添加以下代码：

中文页面（https://example.com/zh-cn/）：

<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-cn/" />  
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/" />  
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr-fr/" />  

英文页面（https://example.com/en-us/）：

<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/" />  
<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-cn/" />  
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr-fr/" />  

5.2 动态生成 hreflang

对于大型网站，可使用服务器端逻辑动态生成 hreflang 链接。例如，在 PHP 中：

<?php  
$language_links = [  
    'en-US' => '/en-us/',  
    'zh-CN' => '/zh-cn/',  
    'fr-FR' => '/fr-fr/'  
];  

foreach ($language_links as $code => $url) {  
    echo '<link rel="alternate" hreflang="' . $code . '" href="https://example.com' . $url . '" />' . PHP_EOL;  
}  
?>  

六、与 rel="canonical" 的区别

6.1 核心差异

• rel="canonical"：指定某页面为“权威版本”，用于解决内部重复内容问题（如不同 URL 显示相同内容）。
• hreflang：指定不同语言或地区的页面关联，解决跨语言/地区重复内容问题。

形象比喻：

• canonical 是“导航员”，告诉搜索引擎“这个页面才是主入口”；
• hreflang 是“翻译家”，说明“这些页面是同一内容的不同语言版本”。

6.2 联合使用场景

在多语言网站中，可在同一页面同时添加 hreflang 和 canonical 标签，例如：

<!-- 英文页面（en-US） -->  
<link rel="canonical" href="https://example.com/en-us/" />  
<link rel="alternate" hreflang="es-ES" href="https://example.com/es-es/" />  

七、验证与调试

7.1 使用 Google Search Console

通过 Google 的 International Targeting 工具验证 hreflang 链接是否正确。

7.2 第三方工具