前言

在查看阮一峰老师最新的周刊时，发现了一个很好玩的工具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呈现出的效果如下所示：

<meta property="og:title" content="chuck" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.qukun.com.cn/" />
<meta property="og:image" content="https://www.qukun.com.cn/img/preview.png" />
复制代码

可选配置包括以下几种：

• 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。

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

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
复制代码

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