Npcink Blog
切换菜单

开放图谱协议

在开放图谱协议允许任何网页成为社交图的丰富的对象。例如，它在 Facebook 上用于允许任何网页具有与 Facebook 上任何其他对象相同的功能

更新于
本页目录7 节

在开放图谱协议允许任何网页成为社交图的丰富的对象。例如，它在 Facebook 上用于允许任何网页具有与 Facebook 上任何其他对象相同的功能。

尽管存在许多不同的技术和模式并且可以将它们组合在一起，但是没有一种技术可以提供足够的信息来丰富地表示社交图中的任何网页。Open Graph 协议建立在这些现有技术的基础上，为开发人员提供了一件事。开发人员的简便性是 Open Graph 协议的主要目标，该协议已为许多技术设计决策提供了依据。

基本元数据

要将网页变成图形对象，您需要向页面添加基本元数据。我们已将协议的初始版本基于 RDFa，这意味着您将<meta>在<head>网页的中放置其他标签。每个页面的四个必需属性是：

  • og:title - 对象的标题，因为它应该出现在图形中，例如“ The Rock”。
  • og:type- 对象的类型，例如“ video.movi​​e”。根据您指定的类型，可能还需要其他属性。
  • og:image - 图片网址，应代表图表中的对象。
  • og:url - 将在图形中用作其永久 ID 的对象的规范 URL，例如“ http://www.imdb.com/title/tt0117500/”。

例如，以下是 The Rock on IMDB 的 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>

可选元数据

以下属性对于任何对象都是可选的，通常建议使用：

  • og:audio - 伴随该对象的音频文件的 URL。
  • og:description - 对对象的一到两个句子描述。
  • og:determiner- 句子中此对象标题之前出现的单词。（a，an，the，“”，auto）的枚举。如果auto选择，则数据的使用者应在“ a”或“ an”之间选择。默认值为“”（空白）。
  • og:locale- 标记这些标签的语言环境。格式为language_TERRITORY。默认值为en_US。
  • og:locale:alternate- 可以使用此页面的一系列其他语言环境。
  • og:site_name- 如果您的对象是大型网站的一部分，则应在整个网站上显示该名称。例如“ IMDb”。
  • og:video - 补充此对象的视频文件的 URL。

例如（仅用于显示目的的换行符）：

<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

RDF 模式（在 Turtle 中）可以在 ogp.me/ns 中找到。

结构化属性

一些属性可以附加额外的元数据。使用property和和 其他元数据相同的方式指定这些content，但是property将会有额外的符号:。

该og:image属性具有一些可选的结构化属性：

  • og:image:url- 与相同og:image。
  • og:image:secure_url - 如果网页需要 HTTPS，则使用备用网址。
  • og:image:type- 此图像的 MIME 类型。
  • og:image:width - 宽像素数。
  • og:image:height - 高像素数。
  • og:image:alt- 图片中内容的说明（非标题）。如果页面指定 og：image，则应指定og:image:alt。

完整图片示例：

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

该og:video标签具有相同的标签，展示的og:image。这是一个例子：

<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

该og:audio标签只可用（因为大小不会使声音的意义上）第 3 个属性：

<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

数组

如果标签可以有多个值，只需<meta>在页面上放置同一标签的多个版本 。在冲突期间，第一个标签（从上到下）被赋予优先级。

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

在声明其根标记后放置结构化属性。每当解析另一个根元素时，就认为该结构化属性已完成并启动了另一个。

例如：

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

表示此页面上有 3 张图片，第一张图片为300x300，中间一张图片的尺寸未指定，最后一张为 1000px 高。

对象类型

为了在图形中表示对象，您需要指定其类型。使用og:type属性完成此操作：

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

当社区同意某种类型的模式时，会将其添加到全局类型列表中。类型系统中的所有其他对象均为 以下形式的 CURIE：

<head prefix="my_namespace: http://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />

全局类型分组为垂直。每个行业都有自己的名称空间。og:type命名空间的值始终以该命名空间为前缀，然后带有句点。这是为了减少与用户定义的命名空间类型（总是包含冒号）之间的混淆。

音乐

og:type 值：

music.song

  • music:duration- 整数 > = 1- 歌曲的长度（以秒为单位）。
  • music:album- music.album 阵列 - 专辑这首歌曲是从。
  • music:album:disc- 整数 > = 1- 这首歌在专辑的哪张光盘上。
  • music:album:track- 整数 > = 1- 这首歌是哪首歌。
  • music:musician- 个人资料 数组 - 制作这首歌的音乐家。

music.album

  • music:song- music.song - 在这张专辑中的歌曲。
  • music:song:disc- 整数 > = 1- 与之相同，music:album:disc但取反。
  • music:song:track- 整数 > = 1- 与之相同，music:album:track但取反。
  • music:musician- 个人资料 - 制作这首歌的音乐家。
  • music:release_date- 日期时间 - 日期专辑发行。

music.playlist

music.radio_station

视频

og:type 值：

video.movie

video.episode

  • video:actor- 与 video.movi​​e 相同
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series- video.tv_show - 哪些系列这一事件属于。

video.tv_show

多集电视节目。元数据与 video.movi​​e 相同。

video.other

不属于任何其他类别的视频。元数据与 video.movi​​e 相同。

没有垂直

这些是全局定义的对象，它们不适合垂直使用，但却得到了广泛使用和认可。

og:type 值：

article - 命名空间 URI： http://ogp.me/ns/article#

book - 命名空间 URI： http://ogp.me/ns/book#

profile - 命名空间 URI： http://ogp.me/ns/profile#

  • profile:first_name- 字符串 - 通常由父母或自己选择的名称。
  • profile:last_name- 字符串 - 从家庭或婚姻继承而来的个人惯用的名字。
  • profile:username- 字符串 - 标识它们的短而唯一的字符串。
  • profile:gender- 枚举（男，女）- 他们的性别。

website - 命名空间 URI： http://ogp.me/ns/website#

除了基本属性外，没有其他属性。任何未标记的网页均应视为og:type网站。

种类

在“开放图谱”协议中定义属性时，使用以下类型。

类型描述文字
布尔型布尔值表示正确或错误的值正确，错误，1、0
约会时间DateTime 表示由日期（年，月，日）和可选的时间部分（小时，分钟）组成的时间值ISO 8601
枚举由常量字符串值（枚举成员）的有界集合组成的类型。作为枚举成员的字符串值
浮动一个 64 位带符号浮点数符合以下格式的所有文字：

1.234
-1.234
1.2e3
-1.2e3
7E-10
整数一个 32 位有符号整数。在许多语言中，超过 32 位的整数会变成浮点数，因此我们限制了 Open Graph 协议，以便于使用多种语言。符合以下格式的所有文字：

1234
-123
串Unicode 字符序列所有文字由 Unicode 字符组成，没有转义字符
网址标识 Internet 资源的 Unicode 字符序列。所有使用 http：// 或 https：// 协议的有效 URL

讨论与支持

您可以在 Facebook 组或 开发人员邮件列表中讨论开放图谱协议 。目前，它正在被 Facebook（请参阅其文档），Google（请参阅其文档）和 mixi 使用。它正在由 IMDb，Microsoft，NHL，Posterous，烂番茄，TIME，Yelp 等许多公司出版。

实作

开源社区已经开发了许多解析器和发布工具。让 Facebook 小组知道您是否也建立了一些很棒的东西！

Open Graph 协议最初是在 Facebook 上创建的，并受 Dublin Core，链接相关规范，Microformats 和 RDFa 的启发。本页描述的规范可在 Open Web Foundation Agreement 版本 0.9 下获得。这个网站是开源的。

延伸阅读

# 文档资源

继续阅读

  1. 《提问的智慧》精读注解版

  2. 石蒜模拟器 - 网页上添加一个棒棒糖小人装饰

  3. mui - 最接近原生 APP 体验的高性能前端框架