CyberLibrarian

【注意】 このドキュメントは、The Open Graph protocol(2017年7月27日公開版)の和訳です。
このドキュメントの正式版はhttp://ogp.me/にある英語版であり、このドキュメントには翻訳に起因する誤りがありえます。誤訳、誤植などのご指摘は、訳者までお願い致します。

訳注： 一部、元のドキュメントの明らかな誤りと思われるHTML記述を修正しました。

First Update: 2018年7月3日

はじめに

オープン・グラフ・プロトコル(Open Graph protocol:OGP)を用いると、任意のウェブ・ページをリッチなソーシャル・グラフのオブジェクトにすることができます。たとえば、Facebookでは、任意のウェブ・ページがFacebookの他のオブジェクトと同じ機能を持てるようにするためにこれを用います。

さまざまな技術やスキーマが存在しており、それらを組み合わせることもできますが、ソーシャル・グラフ内で任意のウェブ・ページを豊かに表現するのに十分な情報を提供してくれる単一の技術は存在しません。オープン・グラフ・プロトコルは、これらの既存の技術をベースにしており、実装を行うための1つの機能を開発者に提供します。開発者にとって容易であることは、オープン・グラフ・プロトコルの重要な目標であり、技術設計上の決定の多くを伝えています。

基本的なメタデータ

ウェブ・ページをグラフ・オブジェクトにするためには、ページに基本的なメタデータを追加する必要があります。我々はRDFaの初期バージョンのプロトコルをベースとしました。これは、自身のウェブ・ページの<head>に<meta>タグを追加することを意味します。各ページに対する4つの必須のプロパティーは次のとおりです。

例えば、IMDBのThe Rockに対するオープン・グラフ・プロトコルのマークアップは次のとおりです。

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

オプションのメタデータ

次のプロパティーはオブジェクトに対してオプションですが、一般的に推奨されます。

例えば、(改行は、表示上の目的でしかない)：

<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プロパティーには、オプションの構造化プロパティーがいくつかあります。

画像の完全な例:

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

グローバルなタイプは分野(vertical)にグループ分けされています。各分野は独自の名前空間を持ちます。名前空間に対するog:typeの値の前には常に名前空間とピリオドが付きます。これは、常にコロンが付いているユーザ定義の名前空間のタイプとの混同を少なくするためです。

音楽

og:typeの値:

music.song

music.album

music.playlist

music.radio_station

動画

og:typeの値:

video.movie

video.episode

video.tv_show

複数エピソードのテレビ番組。メタデータはvideo.movieと同じ

video.other

他のカテゴリに属さない動画。メタデータはvideo.movieと同じ

非特定分野

これらは、特定の分野には当てはまりませんが、広く用いられ、合意されている、グローバルに定義されているオブジェクトです。

og:typeの値:

article - 名前空間URI: http://ogp.me/ns/article#

book - 名前空間URI: http://ogp.me/ns/book#

profile - 名前空間URI: http://ogp.me/ns/profile#

website - 名前空間URI: http://ogp.me/ns/website#

基本的なプロパティー以外にはプロパティーはありません。マークアップされていないウェブ・ページは、og:type websiteとして扱われるべきです。

型

オープン・グラフ・プロトコルで属性を定義する場合は、次の型が用いられます。

型 説明 リテラル
ブール型 (Boolean) ブールは真か偽の値を表す。 true、false、1、0
日時型 (DateTime) DateTimeは、日付(年、月、日)とオプションの時間要素(時間、分)で構成される時間的な値を表す。 ISO 8601
列挙型 (Enum) 固定の文字列値の有界集合(列挙メンバー)で構成される型 列挙のメンバーである文字列の値
浮動小数点型 (Float) 64ビットの符号付き浮動小数点数 次の形式に準拠するすべてのリテラル

1.234
-1.234
1.2e3
-1.2e3
7E-10
整数型 (Integer) 32ビットの符号付き整数。多くの言語では32ビットを超える整数は浮動小数点になるため、容易な多言語の利用のためにオープン・グラフ・プロトコルを制限している。 次の形式に準拠するすべてのリテラル

1234
-123
文字列型 (String) Unicodeの文字列 エスケープ文字のないUnicode文字で構成されるすべてのリテラル
URL インターネット資源を識別するUnicodeの文字列 http://またはhttps://のプロトコルを利用するすべての有効なURL

議論とサポート

オープン・グラフ・プロトコルについては、Facebookグループまたは開発者メーリングリストで議論できます。現在、Facebook(ドキュメントを参照)、Google(ドキュメントを参照)、mixiで利用されています。これは、IMDb、Microsoft、NHL、Posterous、Rotten Tomatoes、TIME、Yelp、その他の多くによって発表されています。

実装

オープン・ソース・コミュニティは、いくつかのパーサや公開用ツールを開発しています。あなたが素晴らしいツールを作成したら、Facebookグループに知らせてください！