What is hreflang meta in i18n Website?

多语言网站当中的 hreflang 是什么？

@ SEO

前言

在打造多语言网站时，许多人会关注翻译的准确度或切换体验，但往往忽略了一个对 SEO 非常关键的设置：hreflang。正好最近把部落格🔗和个人网站模板🔗的多语言都调整完成，它们都是需要重视 SEO 的静态内容网站类型，其中的经验我记录于这篇文章当中。

hreflang 是什么？

hreflang 是一个 HTML <link> 标签中的属性，用来 告诉搜索引擎该页面是针对哪个语言和地区所设计，当面临多个相似内容时，能正确地将用户导向适合他们语言与地区的版本。根据这个博客为案例，直接将语言资料生成于 HTML 文档中：

<head>
  <!-- 「默认」语言版本，当搜索引擎无法判断用户适合哪个语言版本时，会显示这个链接的内容。 -->
  <link rel="alternate" hreflang="x-default" href="https://www.webdong.dev/zh-tw/">


  <!-- 当用户的语言偏好是 zh（没有细分地区或书写系统时），搜索引擎会显示这个版本。 -->
  <link rel="alternate" hreflang="zh" href="https://www.webdong.dev/zh-tw/">


  <!-- 英文用户 -->
  <link rel="alternate" hreflang="en" href="https://www.webdong.dev/en/">


  <!-- 简体中文用户 -->
  <link rel="alternate" hreflang="zh-cn" href="https://www.webdong.dev/zh-cn/">


  <!-- 繁体中文用户（特别是台湾） -->
  <link rel="alternate" hreflang="zh-tw" href="https://www.webdong.dev/zh-tw/">
</head>
  • rel="alternate"：该页面的一个替代版本
  • hreflang="language-country"：使用语言代码（ISO 639-1🔗）与地区代码（ISO 3166-1 alpha-2🔗）组合而成。
  • href：对应语言版本的网址。

为什么 hreflang 很重要？

  1. 避免重复内容的 SEO 惩罚 ：多语言页面在内容上常会有高度相似性，搜索引擎可能将其视为重复内容而降低排名。hreflang 告诉搜索引擎这些是为不同语言或地区设计的内容，不该彼此竞争。
  2. 提升用户体验：比方说 en-US 与 en-GB 则分别代表美式与英式英文。设置正确的 hreflang 可以帮助搜索引擎根据用户所在地提供最合适的版本。

常见错误与疑问

  1. 没有双向标注：如果 A 页面标注了 B 页面的 hreflang，那么 B 页面也应该回标 A 页面，证明你对两个页面都有控制。
  2. 标示语言备用方案🔗 ：使用 x-default，标示没有找到合适语言的页面之替代页面。
  3. 网页上的 hreflang 设置与 Sitemap 中的不一致。

结语

hreflang 虽然只是几行 HTML 标签，但对于多语言网站的 SEO 成效与用户体验有着关键影响。若你正在经营国际网站，花时间设计正确的 hreflang 策略绝对值得。

延伸阅读