高级前端
前端工程化
【Q191】什么是 Open Graph 协议,用来做什么

什么是 Open Graph 协议,用来做什么

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 192 (opens in a new tab)

Author 回答者: grace-shi (opens in a new tab)

Open Graph 协议可以让任何一个网页集成到社交图谱中。例如,facebook就是一种社交图谱(social graph)。 一旦一个网页按照该协议进行集成,这个网页就像是社交图谱的一个节点,例如,你的网页集成了open graph协议, 按照协议加入了网页的标题,描述以及图片信息等等,那么你在facebook中分享这个网页的时候,facebook就会按照 你定义的内容来展示这个网页。

这个协议其实很简单,主要是通过在html中加入一些元数据(meta)标签来实现,例如 在head中加入meta标签,property是以og(open graph)开头, 后面跟着具体属性,content里面是属性的值, 下面这段描述的就是一个类型为 video.movie,标题为 The rock,以及url和图片信息。这个例子就可以当做是 为 https://www.imdb.com/title/tt0117500/ (opens in a new tab) 实现了Open Graph协议、

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

结论: 这个协议主要是Facebook提出来的,为了更好的展示用户分享的网页的内容,实现这个协议,有助于SEO优化,告诉google该网页有哪些内容,以及关键词等。

可以快速实现Open Graph协议的工具有: Wordpress的SEO plugin 使用Facebook的Facebook Page功能

Reference:

  1. The Open Graph Protocol https://ogp.me/ (opens in a new tab)
  2. Open Graph Protocol for Facebook Explained with Examples https://www.optimizesmart.com/how-to-use-open-graph-protocol/ (opens in a new tab)