浅谈 Open Graph 协议 | Jim Zhang's blog
浅谈 Open Graph 协议2022-09-22

为什么我才想起来可以放原神音乐啊啊啊啊啊啊啊啊啊啊啊啊，宵宫的音乐我真的是太喜欢了！！！！

我们知道，在社交媒体（Facebook、Twitter、Discord 等，对于微信朋友圈而言，使用的是另外一种方法）上分享网页的时候，会有一个标题、一个描述、一个缩略图，这些都是由网页的 <meta> 标签来提供的。但是，这些信息是如何被提取的呢？这就是 Open Graph 协议的作用。

简要介绍

Open Graph 协议是 Facebook 提出的一种网页元数据的标准，它可以让网页提供更多的信息，以便于社交媒体更好地展示网页。

Open Graph 协议的属性

Open Graph 协议的属性有很多，但是我们只需要关注一些常用的属性即可。

  • og:title 属性用来指定网页的标题。
  • og:type 属性用来指定网页的类型，它的值可以是 website、article、video 等等，具体的值可以参考官方文档。
  • og:url 属性用来指定网页的 URL。
  • og:image 属性用来指定网页的缩略图。
  • og:description 属性用来指定网页的描述。
  • og:locale 属性用来指定网页的语言。
  • og:site_name 属性用来指定网页所属的网站名称。

实现方法

以电影《The Rock》（大陆译名：《勇闯夺命岛》）的豆瓣页面为例，我们可以看到它的 <head> 标签中有一些 <meta> 标签，其中就包含了 Open Graph 协议的信息。

在网页的 <head> 标签中添加 <meta> 标签，如下：

<meta property="og:title" content="勇闯夺命岛 The Rock" />
<meta property="og:description"
    content="美国海军陆战队法兰（艾德•哈里斯 Ed Harris 饰）将军因不满政府对退伍、战死军人及其家属的补偿和福利不满，率领部下将美军最新研制的生化武器――VX毒气弹――偷运到罗克岛，劫持了81名正在该岛观..." />
<meta property="og:site_name" content="豆瓣" />
<meta property="og:url" content="https://movie.douban.com/subject/1292728/" />
<meta property="og:image" content="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p636048104.jpg" />
<meta property="og:type" content="video.movie" />

其中，property 属性的值是 og: 开头的，这就是 Open Graph 协议的标识。content 属性的值就是我们想要展示的信息。

一些注意事项

Open Graph 协议的属性值是可以被搜索引擎抓取的，所以，如果你不想让搜索引擎抓取你的网页的某些信息，那么你就不应该使用 Open Graph 协议。