すでにご存知の方も多いと思いますが、FacebookのOGP(Open Graph Protocol)がウェブサイトのページ上に適正に設定されていることをチェックする方法を紹介します。
1.OGP(Open Graph Protocol)とは
OGPとは、ソーシャルグラフ内で任意のウェブページを表現するための情報を提供する技術で、次のようなmeta要素を指します。
<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" />
OGPを設定すれば、Facebook上で該当のページを紹介するときにページのURLを貼り付けるだけで、次のように適切な内容が反映されます。犬の画像はog:imageに設定した画像、説明はog:descriptionに設定した内容です。
またOGPを設定しておけば、ページに設定した「いいね!」ボタンを押したときの公開範囲が友達のニュースフィードに拡大されるという大きなアドバンテージがあります。
ちなみにOGPはミクシィやグリーでも利用されているようです。それらの設定方法については別途エントリーしようと思います。
2.OGPをチェックする
本題です。OGPの設定はページごとに手作業で設定するのではなく、Movable TypeやWordPressなどのCMSでOGPを自動出力するケースが多いと思います。
<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:image" content="<mt:EntryAssets lastn="1"><$mt:AssetURL<></mt:EntryAssets>" />
このような場合、きちんとしたOGPが出力されていることを確認する必要があると思います。また、OGPの設定内容(つまりCMSのテンプレートタグ)を変更した場合も確認した方が良いでしょう。
OGPをチェックするには、Facebookの「Debugger」を利用します。
「Input URL」に、確認したいページのURLを入力して「デバッグ」をクリック。
次のように青色のメッセージだけが表示されればOKです。「Object Properties」にOGPの取得内容が表示されます。
プロパティの設定が不足している場合などは次のような警告が表示されます。
致命的な問題がある場合は次のようなエラーが表示されます。ちなみにこのエラー原因は、og:urlの内容が存在しないURLを設定したためです。
3.その他
Debuggerではmeta要素部分のみのチェックのようですが、html要素にも次のような設定が必要となりますので、忘れないようにしましょう。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">