これだけは知っておきたい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://facebookapps.jp/wp-content/uploads/2011/03/a0790_000107_m-300x200.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/