把我的个人网站推倒重来（Part 6

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

672

Abstract

对用户没有价值的字节。我在 <a href="https://chinese.catchen.me/2018/08/rebuild-my-website-from-scratch-part-1-using-harp-for-rendering.html">之前的篇文章</a>解释了我的网站是如何支持多语言的，我的 <code>hreflang</code> 实现同样依赖于我做的这个基于 Harp 的多语言方案。对于每一个页面 <code>/page</code>，我都有 <code>/zh/page</code> 和 <code>/en/page</code> 对应其中文版和英文版。这时候根据 Google 的要求， <code>hreflang="x-default"</code> 应该指向 <code>/page</code>，然后 <code>hreflang="zh"</code> 应该指向 <code>/zh/page</code>，英文版同理。举个例子，首页的 <code>hreflang</code> 标签是这样子的：为了让 Harp 生成这组标签，我在模板中先取出当前页面语言无关的名称（也就是 <code>/zh/page</code> 中的 <code>page</code>），然后以此生成 <code>x-default</code> 的标签。接着我再遍历网站支持的语言，逐一生成对应语言的 <code>hreflang</code> 标

Options

签。 <a href="https://github.com/CatChen/catchen.me/blob/d2d68b740b0dd13747fd44a3e722d046d8dff439/public/_layout.jade#L25">具体代码</a> 可以在 GitHub 上看到。因为我让 Harp 遍历网站支持的所有语言，将来如果我添加了新的语言，只要让 Harp 重新便宜网站新的语言便会出现，不需要我做任何的手工修改。<code>hreflang</code> 就这么简单的搞掂了。接下来让我们对网站加上 Google Analytics 和 Facebook Pixel，好让我们统计网站的访问来源。如果你想要继续关注这个系列的话，欢迎通过 <a href="https://chen.cat/subscribe-to-blogs">邮件</a>或 <a href="http://feedproxy.google.com/CatChen/Chinese">RSS/Atom</a> 订阅我的博客。Originally published at <a href="https://chinese.catchen.me/2018/11/rebuild-my-website-from-scratch-part-6-hreflang.html">https://chinese.catchen.me</a>.</article></body>

把我的个人网站推倒重来（Part 6 — hreflang）

因为我在上一篇文章讲 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 标签是这样子的：

为了让 Harp 生成这组标签，我在模板中先取出当前页面语言无关的名称（也就是 /zh/page 中的 page），然后以此生成 x-default 的标签。接着我再遍历网站支持的语言，逐一生成对应语言的 hreflang 标签。具体代码可以在 GitHub 上看到。因为我让 Harp 遍历网站支持的所有语言，将来如果我添加了新的语言，只要让 Harp 重新便宜网站新的语言便会出现，不需要我做任何的手工修改。

hreflang 就这么简单的搞掂了。接下来让我们对网站加上 Google Analytics 和 Facebook Pixel，好让我们统计网站的访问来源。如果你想要继续关注这个系列的话，欢迎通过邮件或 RSS/Atom 订阅我的博客。