在開放圖譜協議允許任何網頁成為社交圖的豐富的對象。例如,它在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
,中間一張圖片的尺寸未指定,最后一張為1000
px高。
對象類型
為了在圖形中表示對象,您需要指定其類型。使用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
命名空間的值始終以該命名空間為前綴,然后帶有句點。這是為了減少與用戶定義的命名空間類型(總是包含冒號)之間的混淆。
音樂
- 命名空間URI:?
http://ogp.me/ns/music#
og:type
?值:
music:duration
-?整數?> = 1-歌曲的長度(以秒為單位)。music:album
-?music.album?陣列?-專輯這首歌曲是從。music:album:disc
-?整數?> = 1-這首歌在專輯的哪張光盤上。music:album:track
-?整數?> = 1-這首歌是哪首歌。music:musician
-?個人資料?數組?-制作這首歌的音樂家。
music:song
-?music.song?-在這張專輯中的歌曲。music:song:disc
-?整數?> = 1-與之相同,music:album:disc
但取反。music:song:track
-?整數?> = 1-與之相同,music:album:track
但取反。music:musician
-?個人資料?-制作這首歌的音樂家。music:release_date
-?日期時間?-日期專輯發行。
music:song
-與music.album上的相同music:song:disc
music:song:track
music:creator
-?個人資料?-此播放列表的創建者。
music:creator
-?個人資料?-該電臺的創建者。
視頻
- 命名空間URI:?
http://ogp.me/ns/video#
og:type
?值:
video:actor
-?個人資料?數組?-電影中的演員。video:actor:role
-?字符串?-他們扮演的角色。video:director
-?個人資料?數組?-電影導演。video:writer
-?配置文件?數組?-電影的作家。video:duration
-?整數?> = 1-電影的長度,以秒為單位。video:release_date
-?日期時間?-日期電影被釋放。video:tag
-?字符串?數組?-與此電影關聯的標記詞。
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.movi??e相同。
不屬于任何其他類別的視頻。元數據與video.movi??e相同。
沒有垂直
這些是全局定義的對象,它們不適合垂直使用,但卻得到了廣泛使用和認可。
og:type
?值:
article
?-命名空間URI:?http://ogp.me/ns/article#
article:published_time
-?日期時間?-當文章首次發表。article:modified_time
-?日期時間?-當文章最后改變。article:expiration_time
-?日期時間?-當文章后過時。article:author
-?個人資料?數組?-文章作者。article:section
-?字符串?-高級部分名稱。例如技術article:tag
-?字符串?數組?-與本文相關的標記詞。
book
?-命名空間URI:?http://ogp.me/ns/book#
book:author
-?個人資料?數組?-誰撰寫了這本書。book:isbn
-?字符串?-的ISBNbook:release_date
-?日期時間?-日期書被釋放。book:tag
-?字符串?數組?-與這本書相關的標記詞。
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小組知道您是否也建立了一些很棒的東西!
- Facebook對象調試器?-Facebook的官方解析器和調試器
- Google Rich Snippets測試工具?-在特定行業和搜索引擎中支持開放圖譜協議。
- PHP驗證器和標記生成器-PHP5對象中的OGP 2011輸入驗證器和標記生成器
- PHP Consumer-一個小型庫,用于訪問PHP中的開放圖譜協議數據
- PHP中的OpenGraphNode-PHP的簡單解析器
- PyOpenGraph-用Python編寫的庫,用于從網站解析Open Graph協議信息
- OpenGraph Ruby-解析網頁并提取Open Graph協議標記的Ruby Gem
- OpenGraph for Java-用于表示Open Graph協議的小型Java類
- RDF :: RDFa ::?Parser-了解Open Graph協議的Perl RDFa解析器
- WordPress插件?-Facebook的官方WordPress插件,它將Open Graph元數據添加到WordPress支持的站點。
- 備用WordPress OGP插件?-一個簡單的輕量級WordPress插件,可向WordPress支持的站點添加Open Graph元數據。
Open Graph協議最初是在Facebook上創建的,并受Dublin Core,鏈接相關規范,Microformats和RDFa的啟發。本頁描述的規范可在Open Web Foundation Agreement版本0.9下獲得。這個網站是開源的。