FacebookのOGP(更新版)

2012/02/28

種別

トピックス

◎2012.6.2更新
5月に入った位からFacebookの仕様変更もあり、OGPに関しての内容が多少古くなってきましたので、一部内容を更新しました。

SNS(Facebook、mixi、GREE等)では、OGP(Open Graph Protocol)といった共通の仕様があります。”OGPって何？”といったところから、一部仕様が変更されている点やWordPressとの連携について紹介します。

OGPって何？

簡単に言うと、ウェブサイトをSNSと連携させる際、｢このウェブページはこういった内容ですよ｣といった情報をHTMLに付加することで、SNS側へウェブページの内容を分かりやすく伝えてあげるための仕様のことです。
Facebookで説明すると、Open Graphタグをウェブページに含めることで、そのページは”Facebookページ”と同等の機能を果すことができるようになります。つまり、ユーザーがウェブページ上のいいね！ボタンを押すと、ページとユーザーの間に繋がりができ、そのウェブページはFacebook上のユーザーにも知れ渡ることになります。使い方次第で、ウェブサイト上のコンテンツをいいね！した人をターゲットに広告を出稿することも可能な訳です。
また、Facecebookでは、｢いいね！した人のウォールやプロフィール｣｢シェアした人のウォール｣でOGPの情報を使っています。ウェブページにOpen Graphタグを付加することで、Facebook上にウェブページの内容を表示する際、タイトル･イメージ･概要等の情報をどのように表示するか指定することができます。

HTMLのどこにどうやって書けばいいの？

ヘッダー内のメタタグに記述してやります。例をあげると…。

HTML

<!DOCTYPE html>
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="og:type" content="website" />
<meta property="og:title" content="Webクリエイターネット" />
<meta property="og:image" content="http://webcreator-net.com/image/user.jpg" />
<meta property="og:url" content="http://webcreator-net.com" />
<meta property="og:site_name" content="Webクリエイターネット" />
<meta property="og:description" content="Webクリエイターネットは、デザインやWeb関連の情報、制作メモを書き留めて公開しているプライベートサイトです" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:admins" content="○○○○○○○○○○○○○○○" />
<meta property="fb:app_id" content="○○○○○○○○○○○○○○○" />
</head>

説明

●xmlns:og~xmlns:fb~…XMLの名前空間
XHTMLでは必要です(旧バージョンのInternet ExplorerでXFBMLの動作時に必要)。
HTML5では書く必要はありません(記述すると、HTML5のバリデータチェックでエラーが出力されてしまいます)。

●og:type…ウェブページが何のページなのか[必須]
例) blog、article、website

●og:title…ウェブページのタイトル[必須]

●og:image…ウェブページのサムネイル[必須]
Facebookの仕様変更で、og:imageのサイズが200px×200px以上に変更されています(※それ以下のサイズだとデバッグ時にエラーが出力されます)。

●og:url…ウェブページのURL[必須]

●og:site_name…ウェブサイト名

●og:description…ウェブページの説明[必須]
以前は必須項目ではなかったと思うのですが、指定しないと”og:descriptionを明示的に提供してください”とデバッグ時にエラーが出力されます。

●og:locale
以下のように説明していましたが、こちらも仕様変更で記述する必要がなくなりました。逆に、記述するとデバッグ時にエラーが出力されます。｢複数読み込んでますよ！｣といった感じのエラーです。

昨年の後半に追加されたパラメータの一つで、FacebookのOpen Graphのアクション･オブジェクトは多言語に対応しています。そのため、サポートしているロケールを”og:locale”に定義してやることで、適切な翻訳が行えます。
複数の言語をサポートする場合、alternateを用いて、content属性を追加します。
例えば、フランス語とスペイン語をサポートする場合、以下のように記述します。
<meta property=”og:locale:alternate” content=”fr_FR” />
<meta property=”og:locale:alternate” content=”es_ES” />

og:localeを含め、アクション･オブジェクトの国際化に関する詳細をお知りになりたい方は、Internationalizationのページをご確認ください。
※英語ですので、Googleツールバーの翻訳機能が便利です。

●fb:admins…○の箇所にはユーザーIDを入力[必須]
“https://graph.facebook.com/ユーザー名”にアクセスし、ユーザーIDを調べます。

Firefox等のブラウザでは、ブラウザ上にFacebookのアカウント情報が表示されます。一番上の”id”の箇所に表示されているのがユーザーIDです(※Internet Explorerの場合は、jsファイルがダウンロードされるので、そちらを確認してください)。

●fb:app_id…○の箇所にはアプリIDを入力[必須]
“http://developers.facebook.com/setup/“にアクセスし、アプリを登録することで取得できます。”アプリを登録？”っといっても、実際アプリを作る必要はなく、”設置したいサイトの情報をFacebookに登録する”といった感じです。

“fb:admins”か”fb:app_id”のどちらかを指定すればよいみたいです。
指定していないとデバッグ時にエラーが出力されます。

OGPの出力チェック

ウェブページにFacebook用のOGPを設定する際、Facebook Developers内にあるデバッガーツールが便利です。
以下にアクセスして、OGPの出力チェックをしたいウェブページのURLを入力します(※OGPを設定した際、設定が反映されるまでに時間がかかる場合があります。これはFacebookのサーバーに残っているキャッシュのせいです。出力チェックとともにキャッシュクリアも出来ますので、デバッガーを活用しましょう！また、直ぐにキャッシュがクリアされない場合は、反映されるまで数日待ちましょう)。
⇒ デバッガー：Facebook Developers

OGPの出力チェックに問題がなければ、以下のような画面が表示されます。

※画像をクリックすると拡大表示されます

以前、｢WordPressでFacebookのOGPを出力したい場合、WP-OGPがおすすめです｣と紹介しましたが、WP-OGPは、2011年の2月より更新されておらず、プラグインのソースを一部修正しないと機能しないため、私自身も使用するのをやめました。

WordPress用にFacebookのOGPを出力するテンプレートを作成しましたので、そちらの内容を記事にしました。プラグインに頼らずWordPressでFacebookのOGPを出力できます。
以下に対応しています。

og:type…TOPページとその他のページタイプ
og:title…全ページのタイトル
og:image…アイキャッチ画像もしくは指定画像を表示
アイキャッチ画像を設定していない場合は、指定の画像を表示。
使用中のサムネイルサイズを変えずに、OGP用にカスタムサイズを使用。
※これは、og:imageが200px×200px以上に変更されたことへの対応です。
og:url…全ページのURL
og:site_name…サイト名
og:description…抜粋(文字数指定)もしくはWordPressに設定済みのキャッチフレーズ
fb:admins…ユーザーID
fb:app_id…アプリケーションID