読者です 読者をやめる 読者になる 読者になる

OGP(Open Graph Protocol)について

OGP(Open Graph Protocol)って?

OGPは"The Open Graph protocol enables any web page to become a rich object in a social graph."(意訳:OGPはどんなウェブページもソーシャルグラフ上のリッチな要素にできるよ!)と説明されるもので、FacebookMixi,新しいもので言えばGREEなどで採用されています。(公式サイト)

Facebookの例で言えば、次のような例があります。 Before

f:id:lmt_swallow:20130704182401p:plain

After

f:id:lmt_swallow:20130704182408p:plain

これは私のサイトの例なのですが、ある程度スッキリしますね。 というより、Beforeの方を見ていると気持ち悪くなりますね…。(AfterはAfterでクソだけど。)

使う

使う際は、まずhtmlタグを編集します。 (HTML 5)

<html lang="ja" prefix="og: http://ogp.me/ns#”>

XHTMLなら xmlns:og="http://ogp.me/ns#" を<html>タグ内に記述すればオッケーです。

そしてココからが重要な要素で、headタグ内に記述します。 (公式サイトでの例)

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

og:title

タイトル指定。そのページのタイトルを記述。

og:type

コンテンツのタイプを指定。website,profile,book,article,video.movie,video,episode,video.tv_show,video.other,music.song,music.album,music.playlist,music.radio_stationといった要素が指定可能。

og:image

SNSなどでサイトのイメージとして表示される画像を指定。

og:url

URLの正答な表記を指定。

ここまでは必須とされているものです。ここからは推奨な要素。

og:audio

音楽ファイルを付属する際に使用。URL指定。

og:description

これはFacebookだと必須だった気がする。ページの紹介を二文で。(公式サイトより引用:A one to two sentence description of your object.)

og:determiner

タイトルの直前に付ける限定詞(この場合は冠詞)。a,an,the,autoのどれか。

og:locale

language_TERRITORY形式で指定。e.g. ja_JP en_US

og:locale:alternate

そのページに用意されている言語を指定(英語ページと日本語ページみたいに)。複数回定義できる。

og:site_name

サイト全体のタイトルを指定。

確認

要素が指定されているかの確認には、Facebook社が提供しているデバッガを利用すると幸せになれます。

f:id:lmt_swallow:20130704182546p:plain

まとめ

基本的にはこんな感じの要素を指定しておけばいいと思います。 その他にもog:email,og:isbnなんていった要素もありまして…興味があったら定義ファイルを覗いていただければオッケーだと思います。RDFで書かれてます。