社交媒体分享链接的标题、图片还有描述是怎么做到的 - Open graph protocol

以前看到别人分享的链接在微信上是带图片和标题甚至还有简短描述的，但是没去想过这是怎么做到的。
直到最近偶然了解到 Open Graph Protocol 这个协议。

概括地说：Open Graph 协议就是为了社交媒体诞生的，最初由Facebook提出，现在许多社交媒体都能很好地支持这个协议。
为什么社交媒体需要这样一个协议呢？可以看看 The Open Graph Protocol 官方网页上的说明：

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

Open Graph 协议可以使任何网页在社交媒体上变成富媒体，举例来说，Facebook使用了这项协议才变得任何网页在Facebook上都能表现出相似的功能。

While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.

虽然存在许多技术和架构能结合在一起，但是还没有一种单一的技术能提供足够的信息让网页在社交媒体上呈现出丰富的表现。Open Graph协议建立在这些现成的技术上并且只需要开发者去做一件事。Open Graph协议有一个关键目标就是让开发者简便性，因此它提供了许多技术上和设计上的决策。

以上官网的解释过于枯燥生涩，其实没那么复杂，就好像我在微信分享一条信息给好友，社交媒体的设计者不单单期望分享的只是一条连接，如果能显示出缩略图，标题，还有简单的描述，这样不是会比显示一条看不懂的URL更能引起别人的兴趣吗？

因此，Open Graph 协议最基本的用法就是为社交媒体提供一些关于网页的信息，包括缩略图，标题等等，将来还会有更多的用途。

那么具体要怎么做呢？
这可能比想象的要简单，以下是摘自维基百科的一段例子：

<meta property="og:title" content="Example title of article">
<meta property="og:site_name" content="example.com website">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/example-title-of-article">
<meta property="og:image" content="http://example.com/article_thumbnail.jpg">
<meta property="og:image" content="http://example.com/website_logo.png">
<meta property="og:description" content="This example article is an example of OpenGraph protocol.">

以上 meta 写在网页的 head 区，那么这个页面在分享到社交媒体后，社交平台就能获得到有用的信息。既然是协议，就说明这些都是规范，所以很多平台都会兼容这个标准。

常用 Open Graph 属性：

• og:title 标题
• og:type 类型 常用值:article book movie
• og:image 略缩图地址
• og:url 页面地址
• og:description 页面的简单描述
• og:site_name 页面所在网站名
• og:videosrc 视频或者Flash地址
• og:audiosrc 音频地址