これだけは知っておきたいOGP （Open Graph Protocol）
OGP （Open Graph Protocol）。
facebook、mixi、GREEなどのSNSで使われている共通の仕様のことだが、重要な役割を担っている割に、あまり知られていない。今後のソーシャル時代に備え、確実におさえておきたい事項に間違いないので紹介する。特にウェブ制作をしていたり、サイトにいいね！ボタンを設置している方には、すぐにでも導入をおすすめする。
OGPとは
OGPを簡単に説明すると、「このウェブページは、こんな内容です」ということを明言するための仕様だ。
誰に明言しているかというと、それは例えばfacebookに、だ。
facebookでは、あるウェブページがいいね！された時に、
「○○さんがリンクについていいね！と言っています」
とウォール上に投稿されることになるが、これはOGPを導入していないサイトでのこと。
OGP導入済みのサイトをいいね！した場合は下記のように投稿される。
導入していない場合に比べて、
記事元のURL、ページタイトル、サイト説明、サムネイルが表示されている。
特に、サムネイルが表示される効果は大きいだろう。
このように、いいね！された時の表示をウェブページ側で指定しておく、
ということができるのがOGPだ。
導入はメタタグのみ
導入はウェブページのHTMLを編集できるなら簡単だ。以下を参考にメタタグを追記して欲しい。それだけでOGPを導入することができる。
※以下例は私がfacebookApps JAPANを始めた理由という、先の記事のOGP。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <title>私がfacebookApps JAPANを始めた理由</title> <meta property="og:title" content="私がfacebookApps JAPANを始めた理由"> <meta property="og:type" content="article"> <meta property="og:description" content="フェイスブックアップスジャパンでは、facebook活用、facebookアプリ開発や制作に役立つ情報を紹介しています。"> <meta property="og:url" content="http://facebookapps.jp/vision/"> <meta property="og:image" content="http://nex.fm/wp-content/uploads/2011/03/a0790_000107_m-300×200.jpg"> <meta property="og:site_name" content="facebookApps JAPAN"> <meta property="og:email" content="info@facebookapps.jp"> </head> <body>
このように、メタタグにいろんな情報を追記することで、facebookに情報を伝えることができる。
基本的には<meta property=”何を指定するか” content=”どのように指定するか”>
と考えれば分かりやすい。上の例以外にも多数のメタタグが存在するので、説明と合わせて紹介する。
OGPの例
og:type
ウェブページが何のページであるか（必須）
例：blog,article,website
og:title
ウェブページの名前（必須）
og:image
ウェブページのサムネイル（必須）
og:url
ウェブページの URL（必須）
og:description
ウェブページの説明
og:site_name
サイト名
og:emailまたはog:phone_number
連絡先
og:locality
場所
og:latitude,og:longitude
経度緯度での位置情報
例：37.416343,-122.153013
og:country-name
国名
応用編
例えば動画コンテンツの場合、属性を指定することもできる。
<meta property="og:video" content="動画のURL"> <meta property="og:video:width" content="600"> <meta property="og:video:height" content="400"> <meta property="og:video:type" content="application/x-shockwave-flash" />
オーディオの場合。
<meta property="og:audio" content="mp3等のURL"> <meta property="og:audio:title" content="曲名"> <meta property="og:audio:artist" content="アーティスト名"> <meta property="og:audio:album" content="アルバム名"> <meta property="og:audio:type" content="application/mp3" />
以上のように、OGPは簡単に導入できて、重要な役割を担っている。
曲などは必ず指定しておきたいジャンルのコンテンツだろう。
他にも、例えばカフェのウェブサイトでは、店名や位置情報を明記するのが良いかもしれない。
しかも驚くことにOGPではog:typeにcafeという設定までできる。
いろんな設定値を眺めているだけでも楽しくなるOGP、ぜひ導入をおすすめする。
OGPの公式サイトは以下URLから
http://ogp.me/