把我的个人网站推倒重来（Part 5 - Open Graph 元数据）

网站发布之后我开始做各种细小的优化，其中一项是为网站加上 Open Graph 元数据（ metadata），使得网站在被 Facebook 抓取时能够显示正确的预览信息。（Google 在抓取时也会参考 Open Graph 元数据，虽然 Open Graph 是 Facebook 提出的标准。）

Open Graph 标准

Open Graph 标准本身并不复杂，看着官方的标准信息把每一项相关的属性都加上。以下是我个人网站上使用的 Open Graph 信息：

<meta property="og:type" content="profile">
<meta property="og:title" content="Cat Chen">
<meta property="og:description" content="Cat Chen's personal website.">
<meta property="og:url" content="https://catchen.me/">
<meta property="og:image" content="https://catchen.me/images/profile_picture_360_360_1x.jpg">

Facebook 专门提供了一个工具来验证网页上的 Open Graph 元数据。在把元数据添加好之后，我用这个工具测试了一下 Facebook 抓取到的数据。

Open Graph 文本属性其实随便怎么填都可以，URL 属性需要保证是正确的地址。以下是两个常用的 URL 属性：

og:image 属性

这个属性用来设置 Facebook 预览时显示的图片。我选择了用来显示我的头像，因为这也是我显示在网站首页左侧的图片。

og:url 属性

这个属性用来指定所谓的「Canonical URL」，我为这个属性折腾了很久。这是因为 Facebook 把 Canonical URL 看作重定向，如果一个 URL1 返回的网页使用 og:url 属性指向另一个 URL2，在 Facebook 看来这根 URL1 返回 302 重定向到 URL2 一样。这导致 Facebook 在抓取我的页面时陷入了无限重定向循环。

要解释这件事情，首先要解释我在 Netlify 上做了什么重定向配置，这是我在上一篇文章中没有提到的。我在之前一篇文章中说了，我的网站支持多语言（暂时只有英文和中文），不同语言使用不同的目录，例如说中文版在 /zh/* 英文版在 /en/*。这造成了一个问题，网站首页 / 应该显示中文版还是英文版？为此我让 Netlify 根据用户浏览器提供的 accept-language header 来选择正确的语言。（如果这个 header 不存在则默认为英文。）这是当时的 netlify.toml 配置文件。

如果只有这一种重定向，无限循环并不出现。无限循环之所以出现，是因为我把 /zh/ 和 /en/ 的 Canonical URL 都指向了 /。为什么要指向 / 呢？因为我认为中文版和英文版都只是特定语言的版本而已，只有未指定语言的 / 才有资格叫做 Canonical URL。

最终我撤销了第一种重定向（302），保留了第二种重定向（Canonical URL）。撤销第一种重定向后，我把 / 改了了内容代理，也就是说如果浏览器的 accept-language header 选择了中文，那 / 显示的就是中文版，内容跟 /zh/ 完全一样但不改变 URL。这使得我的网站被分享到 Facebook 时指向的都是未指定语言的 URL，每一个用户实际打开时看到的语言都由他浏览器的设置来决定。我觉得这是我能做到的对用户最便利的选择。

这是我修改后的 netlify.toml。在 Netlify 的配置中使用 200 重定向意思就是代理目标页面内容——用户看不到重定向的发生，但实际返回的内容时目标页面的内容。做了这一件事情后，接下来要支持 hreflang 就很方便了，我在下一篇文章里就会讲述 hreflang 的设置。如果你对此感兴趣的话，欢迎通过邮件或 RSS/Atom 订阅我的博客。