精品軟體與實用教程
介紹
開放圖譜協議使任何網頁都可以成為社交圖譜中的豐富物件。例如,這在Facebook 上使用,允許任何網頁具有與Facebook 上任何其他物件相同的功能。
雖然存在許多不同的技術和模式並且可以組合在一起,但沒有一種技術可以提供足夠的資訊來豐富地表示社交圖譜中的任何網頁。開放圖譜協定建立在這些現有技術的基礎上,為開發人員提供了一件事來實現。開發人員的簡單性是開放圖譜協議的關鍵目標,它為許多科技設計決策提供了資訊。
基本元數據
要將網頁轉換為圖形對象,您需要在頁面上添加基本元數據。我們基於RDFa建立了該協定的初始版本, 這意味著您將在網頁中放置額外的標籤。
每個頁面的四個必需屬性是:
og:title
- 物件的標題應出現在圖表中,例如“The Rock”。og:type
-對象的類型,例如“video.movie”。根據您指定的類型,可能還需要其他屬性。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" />
RDF 模式(在Turtle中)可以在ogp.me/ns中找到。
結構化屬性
某些屬性可以附加額外的元資料。這些元資料的指定方式與使用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
。
完整圖像範例:
該og:video
標籤具有與相同的標籤og:image
。這是一個例子:
該og:audio
標籤僅具有前3 個可用屬性(因為大小對聲音沒有意義):
陣列
如果一個標籤可以有多個值,只需在頁面上放置同一標籤的多個版本即可。在衝突期間優先考慮第一個標籤(從上到下)。
在聲明其根標記後放置結構化屬性。每當解析另一個根元素時,該結構化屬性就被視為已完成,並開始另一個根元素。
例如:
表示該頁面有3 張圖片,第一張圖片為300x300
,中間一張尺寸未指定,最後一張圖片1000
高度為px。
物件類型
為了在圖表中表示您的對象,您需要指定其類型。這是使用以下og:type
屬性完成的:
<meta property="og:type" content="website" />
當社群就某種類型的架構達成一致時,它就會被加入到全域類型清單中。類型系統中的所有其他物件都是 以下形式的CURIE
全域類型按垂直方向分組。每個垂直領域都有自己的命名空間。命名空間的值og:type
總是以命名空間為前綴,然後是句點。這是為了減少與使用者定義的命名空間類型的混淆,這些類型中始終包含冒號。
音樂
- 命名空間URI:
https://ogp.me/ns/music#
og:type
價值觀:
music:duration
-整數>=1 - 歌曲的長度(以秒為單位)。music:album
- music.album array - 這首歌來自的專輯。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:
https://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:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series
- video.tv_show - 此集屬於哪個系列。
多集電視節目。元數據與video.movie相同。
不屬於任何其他類別的影片。元數據與video.movie相同。
無垂直
這些是全局定義的對象,只是不適合垂直方向,但已被廣泛使用和商定。
og:type
價值觀:
article
- 命名空間URI:https://ogp.me/ns/article#
article:published_time
-日期時間- 文章首次發佈的時間。article:modified_time
-日期時間- 文章最後一次更改的時間。article:expiration_time
-日期時間- 當文章過期之後。article:author
-個人資料 陣列- 文章的作者。article:section
-字串- 高級部分名稱。例如技術article:tag
-字串 陣列- 與本文相關的標籤詞。
book
- 命名空間URI:https://ogp.me/ns/book#
book:author
-個人資料 陣列- 誰寫了這本書。book:isbn
-字串- ISBNbook:release_date
-日期時間- 書籍發行的日期。book:tag
-字串 陣列- 與本書相關的標籤詞。
profile
- 命名空間URI:https://ogp.me/ns/profile#
profile:first_name
-字串- 通常由父母給個人的名字或自己選擇的名字。profile:last_name
-字串- 從家庭或婚姻繼承的名字,個人眾所周知。profile:username
-字串- 用於標識它們的簡短的唯一字串。profile:gender
-列舉(男性,女性) - 他們的性別。
website
- 命名空間URI:https://ogp.me/ns/website#
除了基本屬性外,沒有其他屬性。任何未標記的網頁應被視為og:type
網站。
類型
在Open Graph 協定中定義屬性時使用下列類型。
類型 | 描述 | 文字 |
---|---|---|
布林值 | 布林值表示true 或false 值 | 真、假、1、0 |
約會時間 | DateTime 表示由日期(年、月、日)和可選時間部分(小時、分鐘)組成的時間值 | ISO 8601 |
列舉 | 由一組有界常數字串值(枚舉成員)組成的型別。 | 作為枚舉成員的字串值 |
漂浮 | 64 位有符號浮點數 | 所有符合以下格式的文字: 1.234 |
整數 | 32 位元有符號整數。在許多語言中,超過32 位元的整數會變成浮點數,因此我們限制Open Graph 協定以方便多語言使用。 | 所有符合以下格式的文字: 1234 |
細繩 | Unicode 字元序列 | 所有由Unicode 字元組成且不含轉義字元的文字 |
網址 | 標識Internet 資源的Unicode 字元序列。 | 使用https:// 或https:// 協議的所有有效URL |
討論與支持
您可以在Facebook 群組或 開發人員郵件列表中討論開放圖譜協議 。它目前被Facebook(請參閱他們的文檔)、Google(請參閱他們的文檔)和 mixi使用。它由IMDb、Microsoft、NHL、Posterous、Rotten Tomatoes、TIME、Yelp 以及許多其他網站出版。
實施
開源社群開發了許多解析器和發布工具。如果您也建立了一些很棒的東西,請讓Facebook 群組知道!
- Facebook Object Debugger - Facebook 的官方解析器和調試器
- Google Rich Snippets 測試工具- 特定垂直行業和搜尋引擎中的開放圖協議支援。
- PHP 驗證器和標記產生器- PHP5 物件中的OGP 2011 輸入驗證器和標記產生器
- PHP Consumer - 用於在PHP 中存取開放圖譜協定資料的小型庫
- PHP 中的OpenGraphNode - PHP 的簡單解析器
- PyOpenGraph - 用Python 編寫的函式庫,用於解析來自網站的Open Graph 協定訊息
- OpenGraph Ruby - Ruby Gem,可解析網頁並提取Open Graph 協定標記
- OpenGraph for Java - 用於表示Open Graph 協定的小型Java 類
- RDF::RDFa::Parser - Perl RDFa 解析器,它理解Open Graph 協議
- WordPress 外掛- Facebook 的官方WordPress 插件,它將Open Graph 元資料添加到WordPress 支援的網站。
- 備用WordPress OGP 插件- 一個簡單的輕量級WordPress 插件,可將Open Graph 元資料新增至WordPress 支援的網站。