如何给网站添加Web Bookmark

chuckQu

发布于 2022-08-19 15:13:34

1.4K0

发布于 2022-08-19 15:13:34

文章被收录于专栏：前端F2E

前言

在查看阮一峰老师最新的周刊时，发现了一个很好玩的工具https://bookmark.style/[1]，作用就是输入网站，会根据网站上的信息生成精美的分享卡片，可以保存成图片并进行分享。

于是就想给自己的个人网站也生成一张值得分享的卡片，本篇文章用来记录总结我是如何给网站添加Web Bookmark的。

什么是web bookmark

bookmark的中文翻译是书签。顾名思义，这里就是根据网站的URL来生成一个卡片或者书签，只不过这里的卡片和书签是存在于web上的。目的是方便分享某些URL时，会自动生成该网站的一些关键信息。

常见的场景有：

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

介绍

上面工具的作者写了一篇文章就是介绍如何创建可视化的Web Bookmark[2]，感兴趣的可以点击链接进行查看。这里大概介绍下生成bookmark的原理是什么？

用到的技术是 Open Graph Protocol[3]。

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协议还可以声明音乐、视频等等，这里就不过多介绍了。

配置

到现在为止，我们知道了应该将关键信息放到网站的meta标签中，这里我们采用OG协议。那么现在问题就是如何进行配置，并且需要添加哪些信息？

我的个人网站采用的是vuepress1.x版本进行静态网站生成。参考官网的文档，我需要在docs目录下的README.md中进行网站的公共配置。可以使用YAML语法进行配置，这里我们需要添加meta标签，具体配置如下：

meta:
  - property: og:title
    content: chuck
  - property: og:description
    content: 一枚不知名前端
  - property: og:image
    content: https://www.qukun.com.cn/img/preview.png
  - property: og:url
    content: https://www.qukun.com.cn/
  - property: og:stie_name
    content: chuck
  - property: og:image:width
    content: 1200
  - property: og:image:height
    content: 900
  - property: og:image:alt
    content: preview

可以看出，我们添加了一大堆meta标签，每个标签具有两个属性：property和content 。其中，property属性用来声明OG协议，content属性用来声明相应的值。

上述OG类型的属性值已经在上一小节具体阐述过了，有不明白的可以返回上一小节查看。具体来说，这里添加了以下关键信息：