开发内容协议（The Open Graph Protocol）什么是 Open Graph Protocol ? Ope

Open Graph 是一种互联网协议，最初由 Facebook 创建，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。

什么是 Open Graph Protocol ?

Open Graph Protocol (开放图谱协议)，简称 OG 协议，它是Facebook 在 2010 年 F8 开发者大会公布的一种 网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴，是一种为社交分享而生的 Meta 标签，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。它允许在 Facebook 上，其他网站能像 Facebook 内容一样具有丰富的“图形”对象，进而促进 Facebook 和其他网站之间的集成。

举个简单的例子，当我们分享一个链接（URL）给朋友时，在有的 App 上它只是一个链接，而在有的 APP 上，他却可以包含如下图所示的标题、图片、描述等信息：

The Facebook Company Is Now Meta | Meta (fb.com) 参考代码和分享效果地址

像飞书、WhatsApp、Twitter、Facebook 等社交软件，都会根据链接去抓取你给定 URL 的内容，以确定要包含哪些属性来进行共享展示。你可以通过在页面的头部代码中包含 og:tags 来显式定义属性；如果没有这些显示定义的信息，这些社交软件将在完成对给定 URL 的页面抓取后推断属性，然后使用这些属性信息组装共享框并进行展示。

其实这一切是依赖具体 APP 的实现，（是否会根据 URL 去抓内容），对于同一 URL, 我们可以看看微信和飞书上表现的形式

微信：

飞书：

为什么需要使用 OG 协议？

我们知道，构建内容和维护网站通常可能需要耗费大量时间，我们当然希望自己的内容能够在社交分享时能够脱颖而出。先来看下有无 OG 协议时，同一个链接被解析的差别：

没有开放图谱协议时：此时社交软件正确地获取了页面的标题和描述，但它所含有的信息有限，看起来并不诱人。

设置 OG 之后

互联网上的内容通常至少有一个目标——与他人分享。如果你只是将它发送给一个朋友，有没有开放图谱协议可能不重要。但是如果你想运营、分享或希望它在任何具有丰富预览功能的社交网络或应用程序上共享、传播时，你会希望该预览尽可能抓住别人的眼球。像下面这样丰富而有效的信息将有助于鼓励人们点击查看你的内容。

如何给网站添加 OG 协议

基础属性

og:title - 指定你想要在共享时展示的标题。这通常与你网页的<title>标签相同，例如“百度一下，你就知道”。
og:type- 对象的类型，例如“video.movie”。根据你指定的类型的不同，可能还需要添加一些其他的不同属性。
og:image - 一个图片 URL。
og:url - 指定你想要共享的 URL/当前页面的 URL（可以是短链接），例如“www.baidu.com/”

给网站设置 OG 标签时，应该将其与其他元数据一起放置在<head>标签中。使用的标签还是<meta>，添加方式如下：

<html prefix="og: https://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="https://www.imdb.com/title/tt0117500/" />
    <meta
      property="og:image"
      content="https://ia.media-imdb.com/images/rock.jpg"
    />
    ...
  </head>
  ...
</html>

<meta
  name="description"
  content="description of your website/webpage, make sure you use keywords!"
/>

开放图标签介绍

Open Graph (ogp.me/) 参考网址

title

最多 65 个字符。

og:title

最多 35 个字符。

<meta property="og:title" content="short title of your website/webpage" />

og:site_name

你的内容所在的整个网站的名称。如果你的对象是较大网站的一部分，则应为整个网站的名称

og:url

<meta property="og:url" content="https://www.example.com/webpage/" />

og:description

页面的描述，最多 65 个字符。类似 og:title，这通常应该和你网站的<meta type=“description”>标签相同，当然，你也可以使其不同。

<meta property="og:description" content="description of your website/webpage" />

og:image

尺寸小于 300KB 且最小尺寸为 300 x 200 的图像（JPG 或 PNG）。此图像一般应通过具有有效非自签名证书的 HTTPS 链接提供。

<meta
  property="og:image"
  content="//cdn.example.com/uploads/images/webpage_300x200.png"
/>

虽然使用og:image添加图像比较容易，但有时让你的图像正确显示可能具有挑战性。开放图谱协议包括一些图像标签，例如og:image:urlvsog:image:secure_url以及og:image:width和og:image:height，可以对图像进行更细致的控制

尽量确保你遵循开放图形文档中的所有注释和示例。此外，一些社交网络可能会对图像有特殊要求。例如，Twitter要求比例为2:1，最小尺寸为 300x157，最大尺寸为 4096x4096，小于 5MB，JPG、PNG、WEBP 或 GIF 格式。

og:video

og:video 标签与 og:image 标签相同，用于补充“图形”对象的视频文件的 URL。

og:type

为了在图形中表示你的对象，你需要指定其类型。这里是可用的全部类型列表。你还可以指定自己的类型。

<meta property="og:type" content="article" />

设置开放图标签时，你需要了解哪种类型对你的网站更有意义。如果你的页面专注于单个视频，则使用“video”类型可能是有意义的；如果它是一个没有特定垂直行业的一般网站，你可能更适合使用“website”类型。

og:locale

资源的语言环境。如果你有其他语言翻译可用，你也可以使用 og:locale:alternate。如果不指定 og:locale，则默认为 en_US。

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

video/audio

还可以共享音频/视频。例如，Facebook 和 Twitter 可以很好地共享视频。当然，WhatsApp 也有这个选项，比如当你分享 Instagram 或 Youtube 链接时，WhatsApp 的预览会在应用内附带视频播放。

favicon

要获得对所有浏览器和设备的最佳图标支持，请阅读此内容 Does a favicon have to be 32×32 or 16×16? - Stack Overflow

Twitter 和其他使用开发图的社交媒体

大多数社交网络都会遵循 OG 规则，一些社交应用也包括自己的扩展，已帮助自定义其生态系统的一些外观展示。

例如，Twitter 允许你指定 twitter:card, 这是你展示你的网站时可以使用的“卡片”类型。他们的卡类型包括:

summary
summary_large_image
app
player

进一步探究开放图标签

虽然以上介绍涵盖了一个网站中可能包含的大部分标签，但还有一些标签可能会帮助你和你的企业在整个社交网络中更多的被吸引和发现。如果你有兴趣深入研究，The Open Graph protocol官方文档将是一个很好的使用指南。

如果你只是在寻找入门示例，例如为博客文章添加设置标签，你可以采用类似下面的结果：

<meta property="og:site_name" content="Colby Fayock" />
<meta
  property="og:title"
  content="Anyone Can Map! Inspiration and an
introduction to the world of mapping - Colby Fayock"
/>
<meta
  property="og:description"
  content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…"
/>
<meta
  property="og:url"
  content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"
/>
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta
  property="og:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta
  property="og:image:secure_url"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta
  property="twitter:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="twitter:site" content="@colbyfayock" />

其他参考网站

How to Make Sense of Google Analytics and the Traffic to Your Website (freecodecamp.org) How to set up and track YouTube Channel performance with Google Analytics (freecodecamp.org)How to set up and track YouTube Channel performance with Google Analytics (freecodecamp.org)