OGP
最終更新日時：2012-01-20 15:07:03
Facebook
概要
OGPは、Open Graph Protocol の略で、Webページについての情報を HTML に付加するために定められました。
これは主に SNS のプログラムがターゲットとなる Web ページを解析するにあたって有効な情報を得るために使われており、Facebook、mixi、グリーなどでは、この OGP が使われているようです。
例えば、OGP を使うことにより、Facebook のいいねボタンがクリックされた際にどのようなタイトルでどのような概要でどのような画像が表示されるのか、、、を指定することが可能となります。
OGP の詳細や正確な情報は、OGP公式サイト をどうぞ。
使用方法
OGP による記述は、HTML 内に meta タグを使うことにより行います。
指定可能なプロパティは以下の通りです。
ちなみに、og:audio 以降はオプショナルらしいですが、オプショナルなものとそれ以外とで何が違うのかは不明です(/_＼*)
| property | 内容 |
|---|---|
| og:title | コンテンツのタイトル |
| og:type | コンテンツのタイプ。詳細はOGP公式サイトに記述有り |
| og:url | コンテンツのURL |
| og:image | コンテンツと関連のある画像ファイル |
| og:audio | コンテンツと関連のあるオーディオファイル |
| og:description | コンテンツの説明 |
| og:determiner | このタイトルに付く冠詞。a/an/the/""/auto から選択 |
| og:locale | コンテンツのロケール |
| og:locale:alternate | その他利用可能なロケール |
| og:site_name | サイト名 |
| og:video | コンテンツを補完する？動画 |
実際の記述例は以下の通り。
※公式サイトより抜粋
<meta property="og:title" content="content="Lightly and Leniently" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://lightly.wjg.jp/" />
<meta property="og:image" content="http://lightly.wjg.jp/logo.png" />
<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_UK" />
<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" />