hreflang

HTML

hreflang 是 HTML 中的一个属性值,可以在“链接”相关的 Tag 中被使用,一般在 <link> 或者 <a> 中常见(理论上也可以在 <area> 上使用)。从属性的名字中不难知道,hreflang 标注的是:当前链接所指向资源的使用语言。根据 hreflang 具体应用的标签不同,实际的使用场景也存在一定的差异。

a

<a> 标签中,hreflang 表示的是当前这个链接指向的网站所使用的语言。在明确链接指向资源使用语言非当前网站使用语言的情况下可以使用。一些常见的使用场景:

  • 在一篇中文博客中引用了一个英文的文献,链接地址可以加上 hreflang=en-US
  • 一个网站包含多语言版本,不同语言切换的链接,可以加上 hreflang 标明。

这里需要注意的是,hreflanglang 属性之间的表意差异。lang 属性表示的是当前这个标签内,使用的语言是什么;而 hreflang 表示的则是当前链接标签指向的资源使用的语言是什么。对于一个多语言网站的跳转链接来说,往往需要同时声明 langhreflang 的值,因为链接一般会用对应语言而不是当前页面使用的语言来写。举个例子来说,假设这个页面有一个对应的德语版本,那么链接可以这么写:

<a lang="de-DE" hreflang="de-DE" href="xxx">Deutsch</a>

link

<link> 标签也是用来表示链接,但是和 <a> 有所不同,前者更多的表示的是当前页面对应的外部资源文件,如样式文件(CSS),预加载文件(Preload)等。就 hreflang 的使用场景来说,<link> 标签加上 hreflang 属性,可以用来表示当前页面的不同语言版本。

举例来说,假设有一个多语言的网站,一个页面同时有中文和英文两种语言。那么,在显示中文语言的网站内,可以加上下面的 HTML 代码,用于表示不同语言对应的版本网址分别是多少。

<link rel=alternate href=https://laysent.com hreflang=zh-cmn-Hans>
<link rel=alternate href=https://laysent.com/blog/en hreflang=en-US>

这样的设置有助于帮助程序更好的了解网站的结构。举个例子来说,Google 的搜索引擎的爬虫就可以根据上述的信息了解多语言的具体实施情况(参考这里),并在用户搜索的时候,根据用户的使用习惯推荐对应的语言版本。(因而也能帮助提升网站排名,参考这里关于 ccTLDs 的介绍)

注意事项

关于 hreflang 的使用,大体有几点需要注意的:

非权威性

根据 W3C 的说明,hreflang 是一个非强制的属性:

It is purely advisory. […] User agents must not consider this attribute authoritative — upon fetching the resource, user agents must use only language information associated with the resource to determine its language, not metadata included in the link to the resource.

也就是说,hreflang 给出的内容只是作为一种参考建议(advisory)。浏览器并不会根据给出的 hreflang 信息来判断网页使用的语言,所有的判断都只会依赖于该页面内给出的具体信息。

当然,依然有足够的理由可以支撑 hreflang 被正确的使用。足够的信息可以为程序(如搜索引擎爬虫,屏幕阅读器)提供更多额外的帮助,即时当下没有被使用,也依然为未来提供了更多的可能性。

链接的完整性

当使用 <link> 进行多语言说明的时候,需要注意链接的添加是否是完整的。具体来说,如果 A 页面上有 B 页面的 <link>,那么在 B 页面上也必须有指向 A 页面的 <link> 才行。如果链接的链路缺失或者有错误,可能会导致这些数据被忽略或者错误解析。(具体可以参考 Google 给出的说明

正确的语言标签

hreflang 可以配置的属性值需要是 BCP47,这一点和 lang 属性是一致的。关于 BCP47,可以在这里找到完整的说明。

参考