异常教程

HTML link hreflang 属性（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

HTML link hreflang 属性：多语言网站的国际化指南

前言：为什么需要 hreflang 属性？

在互联网全球化背景下，多语言网站已成为企业触达国际用户的核心工具。然而，当网站提供不同语言或地区版本时，搜索引擎常因无法准确识别页面关联性，导致用户被导向错误版本。此时，HTML link hreflang 属性便如同一位智能翻译官，帮助搜索引擎理解页面间的关系，将用户精准引导到最适合的版本。本文将从基础概念到实战应用，系统解析这一关键属性的使用技巧。

一、什么是 hreflang 属性？

1.1 属性的基本定义

hreflang 是 HTML 标准中用于指定页面语言和目标区域的元数据属性。它通常与 <link> 标签配合使用，告知搜索引擎该页面与哪些其他语言/地区版本相关联。例如：

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

这段代码表示当前页面有一个英文版本，路径为 https://example.com/en/。

1.2 核心功能与作用

  • 语言版本关联：让搜索引擎识别不同语言的页面是同一内容的变体
  • 地域适配优化：区分针对不同地区的页面（如美国英文 en-US 与英国英文 en-GB）
  • 提升用户体验：避免用户因语言不符而跳出，降低跳出率
  • SEO 权重分配：帮助搜索引擎正确索引，避免重复内容处罚

形象比喻：想象你在图书馆寻找一本中英双语词典，hreflang 就像书脊上的标签，标注了这本书的中文版和英文版分别存放在哪一层书架。

二、语法结构与使用规范

2.1 基础语法格式

<link rel="alternate" hreflang="LANGUAGE-CODE" href="URL">

关键参数说明：

  • rel="alternate"：表示该链接指向的是替代版本
  • hreflang="LANGUAGE-CODE"：指定目标页面的语言和区域代码
  • href="URL"：指向具体页面的完整 URL

2.2 语言代码规范

语言代码遵循 ISO 639-1 标准，地区代码使用 ISO 3166-1 alpha-2 格式。常见组合示例： | 语言代码 | 含义 | 示例 URL | |----------|--------------------|-----------------------------------| | en | 普通英文 | /about | | en-GB | 英国英语 | /en-gb/about | | zh-CN | 简体中文（中国） | /zh-cn/contact | | es-ES | 西班牙语（西班牙） | /es-es/productos |

关键规则：

  • 必须为每个页面添加自我引用（如中文页面需包含 hreflang="zh-CN" 指向自身）
  • 所有相关页面需互相引用（如英文页面需链接中文页面，反之亦然）

三、典型应用场景

3.1 多语言电商网站

以一家提供中英双语的电商平台为例：

<!-- 中文版页面代码 -->
<link rel="alternate" hreflang="en" href="https://example.com/en/products">
<link rel="alternate" hreflang="zh-CN" href="https://example.com/products">

<!-- 英文版页面代码 -->
<link rel="alternate" hreflang="en" href="https://example.com/en/products">
<link rel="alternate" hreflang="zh-CN" href="https://example.com/products">

通过双向关联，搜索引擎能准确理解中英文页面的关系。

3.2 地区化内容适配

某汽车厂商针对不同国家市场：

<!-- 美国版页面 -->
<link rel="alternate" hreflang="en-US" href="https://cars.com/us/modelx">
<link rel="alternate" hreflang="en-CA" href="https://cars.com/ca/modelx">

<!-- 加拿大版页面 -->
<link rel="alternate" hreflang="en-CA" href="https://cars.com/ca/modelx">
<link rel="alternate" hreflang="en-US" href="https://cars.com/us/modelx">

通过区分 en-US 和 en-CA，可满足两国用户对车辆规格、法规的不同需求。

四、实施步骤与代码示例

4.1 分步实施指南

  1. 清单梳理：列出所有语言版本页面及其 URL
  2. 代码编写：为每个页面添加对应的 <link> 标签
  3. 相互验证：确保所有页面双向引用
  4. 工具检测：使用 Google Search Console 的 hreflang 报告验证配置

4.2 完整代码示例（多语言博客）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品详情页 | 中文版</title>
    <!-- 自我引用 -->
    <link rel="alternate" hreflang="zh-CN" href="https://example.com/product">
    <!-- 对应英文版本 -->
    <link rel="alternate" hreflang="en" href="https://example.com/en/product">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

五、常见误区与解决方案

5.1 典型错误案例

<!-- 错误示例：缺少自我引用 -->
<link rel="alternate" hreflang="en" href="https://example.com/en">

正确做法：每个页面必须包含指向自身的 hreflang 标签：

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

5.2 其他高频问题

问题描述解决方案
使用错误的语言代码（如 zh-tw 代替 zh-TW）遵循 ISO 标准，首字母大写：zh-TW
忽略地区变体区分对同一语言不同地区（如英国/美国英语）单独配置
链接指向非最终页面确保 href 值为完整路径，避免 301 跳转

六、进阶技巧与工具推荐

6.1 验证配置正确性

  • Google Search Console：通过 "Coverage" 报告检查错误
  • 在线验证工具：如 HREF LANG Validator （需自行访问链接）

6.2 动态生成策略

对于内容管理系统（如 WordPress），可通过插件或代码实现动态生成：

// WordPress 示例：在 functions.php 中添加
function add_hreflang_tags() {
    $languages = array(
        'en' => 'https://example.com/en/',
        'zh-CN' => 'https://example.com/'
    );
    foreach ($languages as $code => $url) {
        echo '<link rel="alternate" hreflang="' . $code . '" href="' . $url . $_SERVER['REQUEST_URI'] . '">';
    }
}
add_action('wp_head', 'add_hreflang_tags');

结论：构建全球化数字资产的关键

通过合理使用 HTML link hreflang 属性，开发者不仅能提升多语言网站的搜索引擎可见度，更能显著改善国际用户的访问体验。从基础语法到复杂配置，每个细节都体现了技术与业务的深度结合。建议开发者在部署后持续监控 Google 的搜索流量数据，观察不同语言版本的访问趋势，及时优化配置策略。记住，国际化不是一次性工程，而是需要持续迭代的系统性工作。

最新发布

查看更多文章