前言
在查看阮一峰老师最新的周刊时,发现了一个很好玩的工具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协议还可以声明音乐、视频等等,这里就不过多介绍了。