og协议

一、什么是og协议

       og是Open Graph的简称，是一种互联网协议。Open Graph Protocol 本身是一套 Metatags 的规范，用来标注页面的类型和描述页面的内容。由 Facebook 在2010年F8会议上公布。

二、作用

       如果您想分享一个网站时，想把内容尽可能的展示在分享的链接上，即希望在分享时，对方能预览该链接。以此吸引他人点击。

       当使用了og协议后，以下是twitter上分享后展示的效果，则不是一个单独的链接。

三、添加

       在page的header头中加入以下meta数据。

<meta property="og:title" content="Colby Fayock - A UX Designer &amp; Front-end Developer Blog" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" />
<meta property="og:url" content="https://www.colbyfayock.com" />

其他的一些标签：

• og:description：页面的描述。与相似，除非您希望以其他方式展示它，否则og:title

  它可能与您网站的标签相同。

• og:locale：如果您要本地化标签，则包括区域设置可能很有意义。格式为language_TERRITORY，默认为``en_US。

• og:site_name：您的内容所在的整个网站的名称。如果您在博客文章页面上，则可能有一个title使用该博客文章标题的标题，其中``site_name就是您博客的名称。

• og:video：是否有支持您内容的视频？这是一个包含它的机会。使用此标记将链接添加到您的视频。

• og:type：常用值:article book movie   website

四、测试

header中添加后，需要验证是否生效，可以进入以下链接进行测试。注意：被测试的分享链接需要能被外网访问。

• twitter：https:[

  //cards-dev.twitter.com/validator

  ](cards-dev.twitter.com/validator)

• facebook：https:[

  //developers.facebook.com/tools/debug/

  ](developers.facebook.com/tools/debug…)

• Pinterest：https:[

  //developers.pinterest.com/tools/url-debugger/

  ](developers.pinterest.com/tools/url-d…)

[参考文献] What is Open Graph and how can I use it for my web site?