FacebookのOGPをチェックする方法: 小粋空間

Top ＞ Facebook ＞ FacebookのOGPをチェックする方法

FacebookのOGPをチェックする方法

Posted at January 27,2012 1:23 AM
Tag：[]

すでにご存知の方も多いと思いますが、FacebookのOGP（Open Graph Protocol）がウェブサイトのページ上に適正に設定されていることをチェックする方法を紹介します。

１．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はミクシィやグリーでも利用されているようです。それらの設定方法については別途エントリーしようと思います。

２．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」を利用します。

Debugger

「Input URL」に、確認したいページのURLを入力して「デバッグ」をクリック。

Debugger

次のように青色のメッセージだけが表示されればOKです。「Object Properties」にOGPの取得内容が表示されます。

プロパティの設定が不足している場合などは次のような警告が表示されます。

致命的な問題がある場合は次のようなエラーが表示されます。ちなみにこのエラー原因は、og:urlの内容が存在しないURLを設定したためです。

エラー

３．その他

Debuggerではmeta要素部分のみのチェックのようですが、html要素にも次のような設定が必要となりますので、忘れないようにしましょう。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#">

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）