Logo
Published on

The Open Graph Protocol

Authors

最近在学习 SEO 的时候，发现 meta 标签的内容还挺多的，除了常规的author、description、keywords等，还有一个叫Open Graph Protocol的东西。

先祭出官方文档

介绍

OGP允许任何网页成为一个社交图谱中十分丰富的对象。例如 Facebook 使用这个协议允许任何网页具有与Facebook 上任何其它对象相同的功能。

虽然现在有很多技术和协议可以组合使用，但是并没有一个单独的技术能让任意的网页提供足够的信息来丰富地呈现社交图谱中。Open Graph 协议建立在已有的技术之上，并且为开发人员提供了一个可实现的功能。Open Graph 协议的关键目标是开发人员使用的简便性。

基础元数据

要将网页转换为图形对象，需要向页面添加基本元数据。我们基于 RDFa 完成了协议的初始版本，这意味着可以将新增的 <meta> 标签放置在 <head> 之间。每个页面的四个必需属性是：

og:title - 对象的标题应出现在图表中，例如“The Rock”。

og:type - 对象的类型，例如“video.movi​​e”。根据指定的类型，可能还需要其他属性。

og:image - 应代表图表中对象的图像 URL。

og:url - 对象的规范 URL，将用作图表中的永久 ID，例如“https://www.imdb.com/title/tt0117500/”。

举例来说，以下是IMDB 上《The Rock》的 Open Graph 协议标记：

<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>

可选元数据

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

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="https://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="https://example.com/bond/trailer.swf" />

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

结构化属性

某些属性可以附加额外的元数据。这些元数据的指定方式与其他元数据相同，都使用property 和 content，但 property 会附加额外的内容:

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

og:image:url - 与 相同og:image。

og:image:secure_url - 如果网页需要 HTTPS，则使用备用 URL。

og:image:type -此图像的MIME 类型。

og:image:width - 宽度的像素数。

og:image:height - 高的像素数。

og:image:alt - 图片内容的描述（不是标题）。如果页面指定了 og:image，则应指定og:image:alt。

完整示例：

<meta property="og:image" content="https://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="https://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 个可用属性（因为尺寸 (size) 对于声音来说没有意义）：

<meta property="og:audio" content="https://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="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />

将结构化属性放在声明其根标记之后。每当解析另一个根元素时，该结构化属性都被视为已完成，并启动另一个结构化属性。

例如：

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

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

对象类型

为了使对象能够在图中表示出来，需要指定其类型。这可以通过以下 og:type 属性完成：

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

当社区就类型的架构达成一致时，它将被添加到全局类型列表中。类型系统中的所有其他对象都是 CURIE，其形式为：

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

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

音乐

命名空间 URI：https://ogp.me/ns/music#

og:type值：

1.music.song

music:duration - 整数>=1 - 歌曲的长度（以秒为单位）。 music:album - 数组- 这首歌所属的专辑。 music:album:disc - 整数>=1 – 这首歌位于专辑的哪个光盘上。 music:album:track - 整数>=1 - 这首歌是哪首曲目。 music:musician - 数组- 创作这首歌的音乐家。

2.music.album

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

3.music.playlist

music:song - 与 music.album 上的相同 music:song:disc music:song:track music:creator - 个人资料 - 此播放列表的创建者。

4.music.radio_station

music:creator - 个人资料- 本站的创建者。

视频

命名空间 URI：https://ogp.me/ns/video#

og:type值：

1.video.movie

video:actor - 数组 - 电影中的演员。 video:actor:role - 字符串- 他们扮演的角色。 video:director - 数组- 电影的导演。 video:writer - 数组 - 电影编剧。 video:duration - 整数>=1 - 电影的长度（以秒为单位）。 video:release_date -日期时间 - 电影上映的日期。 video:tag - 字符串数组- 与这部电影相关的标记词。

2.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 - 这一集属于哪个系列。

3.video.tv_show

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

4.video.other

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

非垂类

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

og:type值：

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

article:published_time -日期时间- 文章首次发布的时间。 article:modified_time -日期时间- 文章最后修改的时间。 article:expiration_time -日期时间- 当文章过期后。 article:author -个人资料 数组- 文章的作者。 article:section -字符串- 高级部分名称。例如技术 article:tag - 字符串 数组- 与本文相关的标记词。

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

book:author - 个人资料 数组- 谁写了这本书。 book:isbn - 字符串- ISBN book:release_date - 日期时间- 书籍发行的日期。 book:tag - 字符串 数组- 与这本书相关的标记词。

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

profile:first_name - 字符串- 通常由父母赋予个人的名字或自己选择的名字。 profile:last_name - 字符串- 从家庭或婚姻继承而来的名字，个人以此名字为人所知。 profile:username - 字符串- 用于识别它们的简短而唯一的字符串。 profile:gender - 枚举（男性，女性）- 他们的性别。

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

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

类型

在 Open Graph 协议中定义属性时使用以下类型：

类型描述文字
Boolean布尔值表示真值或假值rue, false, 1, 0
DateTimeDateTime 表示由日期（年、月、日）和可选时间部分（小时、分钟）组成的时间值ISO 8601
Enum由一组有界限的常量字符串值（枚举成员）组成的类型。作为枚举成员的字符串值
Float64 位有符号浮点数符合以下格式的所有文字：1.234、-1.234、1.2e3、-1.2e3、7E-10
Integer32 位有符号整数。在许多语言中，超过 32 位的整数会变成浮点数，因此我们限制了 Open Graph 协议，以便于多语言使用。符合以下格式的所有文字：1234、-123
StringUnicode 字符序列所有文字均由没有转义字符的 Unicode 字符组成
URL用于标识互联网资源的 Unicode 字符序列。所有使用 https:// 或 https:// 协议的有效 URL

小结

上述就是 Open Graph 协议在官网的内容，具体的 key-value 其实也不用刻意去记下来，知道有这么个东西，需要的时候再去官网查即可。

Discuss on Twitter • View on GitHub