0
0

把我的个人网站推倒重来(Part 6 - hreflang)

Cat Chen 发表于 2018年11月24日 15:18 | Hits: 609
Tag: hreflang | rebuild | website

因为我在上一篇文章讲 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订阅我的博客。

原文链接: http://feedproxy.google.com/~r/CatChen/Chinese/~3/Ht85a2YiaEc/rebuild-my-website-from-scratch-part-6-hreflang.html

0     0

评价列表(0)