如何给网站添加Web Bookmark

前言
在查看阮一峰老师最新的周刊时，发现了一个很好玩的工具bookmark.style/，作用就是输入网站，会根据网站上的信息生成精美的分享卡片，可以保存成图片并进行分享。
于是就想给自己的个人网站也生成一张值得分享的卡片，本篇文章用来记录总结我是如何给网站添加Web Bookmark的。
什么是web bookmark
bookmark的中文翻译是书签。顾名思义，这里就是根据网站的URL来生成一个卡片或者书签，只不过这里的卡片和书签是存在于web上的。目的是方便分享某些URL时，会自动生成该网站的一些关键信息。
常见的场景有：

比如说发推特时，输入一个链接，就会自动生成一个卡片。
使用Notion写文章时，粘贴一个URL就会提示是否创建bookmark。
在即刻上面发送动态时，粘贴的URL也会生成一个卡片。

介绍
上面工具的作者写了一篇文章就是介绍如何创建可视化的Web Bookmark，感兴趣的可以点击链接进行查看。这里大概介绍下生成bookmark的原理是什么？
用到的技术是 Open Graph Protocol。
Open Graph Protocol，简称 OG 协议，它是由 Facebook 在2010年首次被提出的一种网页元信息标记协议，是一种为社交分享而生的协议。
目前主流的社交媒体网站都已支持了 OG 协议。比如 Twitter、LinkedIn、Pinterest、GitHub，但是 Twitter 也有自家的 Twitter Cards 协议。当然 Twitter 也支持 OG 协议的。
OG协议存在于页面中的meta标签中，这些 meta 标签声明就是为了便于其他站点的爬虫抓取有效信息用的。这里我们就需要使用OG协议来在网站中添加关键信息，其实也就是在meta标签中添加信息。
Open Graph Protocol
这里总结下比较常用的OG协议配置。以下提到的所有配置都是需要放在meta标签中。
最基本的配置共有四个，也是每个页面所需的。四个必须的配置分别是：

og:title - 在卡片中显示的网站的标题。
og:type - 网站的类型，可以进行指定。
og:image - 图像的URL，用来在卡片中展示。
og:url - 指定的URL，作为卡片本身的永久ID。

最终在html呈现出的效果如下所示：




复制代码
可选配置包括以下几种：

og:audio - 该网站的音频文件URL。
og:description - 用一到两句话描述你的网站。
og:determiner - 指定宾语标题前的词。默认是'' 。
og:locale - 用来标记地区，默认是 en_US 。
og:locale:alternate - 地区数组，声明多个地区。
og:site_name - 声明网站的名称。
og:video - 视频文件的URL，用来补充说明该网站。

除此之外，还包含结构化的配置，比如我想要指定图片的宽度和高度等。
图片og:image的可选结构化配置如下：

og:image:url - 与og:image 作用相同。
og:image:secure_url - 如果网页需要HTTPS，可以使用另一个URL。
og:image:type - 该图片的MIME类型。
og:image:width - 图片的像素宽度值。
og:image:height - 图片的像素高度值。
og:image:alt - 对图像内容的描述(不是标题)。如果页面指定了一个og:image，它应该指定og:image:alt。

下面是一个图片的结构化配置示例：






复制代码
OG协议还可以声明音乐、视频等等，这里就不过多介绍了。