为什么我才想起来可以放原神音乐啊啊啊啊啊啊啊啊啊啊啊啊,宵宫的音乐我真的是太喜欢了!!!!
我们知道,在社交媒体(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 协议。