因为我在上一篇文章讲 Open Graph 元数据时提到 hreflang
,我可以用这篇文章简单讲一讲如何支持 herflang
。使用 hreflang
好处的是让 Google 知道多个页面其实是同一内容的不同语言版本,这样在用户搜索时 Google 就可以尽量提供正确的语言版本。
Google 官方对 hreflang
提供了详尽的解释。要让网站支持 hreflang
有三种做法:HTML 标签、HTTP header 以及 Sitemap。我选择了 HTML 标签,因为在我添加 hreflang
的时候 Google 还没提供另外两种做法。如果让我现在重新选择的话,我很有可能选择使用 Sitemap 从而减少页面中对用户没有价值的字节。
我在之前的篇文章解释了我的网站是如何支持多语言的,我的 hreflang
实现同样依赖于我做的这个基于 Harp 的多语言方案。对于每一个页面 /page
,我都有 /zh/page
和 /en/page
对应其中文版和英文版。这时候根据 Google 的要求,hreflang="x-default"
应该指向 /page
,然后 hreflang="zh"
应该指向 /zh/page
,英文版同理。举个例子,首页的 hreflang
标签是这样子的:
<link rel="alternate" hreflang="x-default" href="https://catchen.me/">
<link rel="alternate" hreflang="en" href="https://catchen.me/en/">
<link rel="alternate" hreflang="zh" href="https://catchen.me/zh/">
为了让 Harp 生成这组标签,我在模板中先取出当前页面语言无关的名称(也就是 /zh/page
中的 page
),然后以此生成 x-default
的标签。接着我再遍历网站支持的语言,逐一生成对应语言的 hreflang
标签。具体代码可以在 GitHub 上看到。因为我让 Harp 遍历网站支持的所有语言,将来如果我添加了新的语言,只要让 Harp 重新便宜网站新的语言便会出现,不需要我做任何的手工修改。
hreflang
就这么简单的搞掂了。接下来让我们对网站加上 Google Analytics 和 Facebook Pixel,好让我们统计网站的访问来源。如果你想要继续关注这个系列的话,欢迎通过邮件或 RSS/Atom 订阅我的博客。