【Facebook】OGPで「いいね！」情報をカスタマイズ

HTML・CSS

「いいね！」をクリックすると
自分のウォールにその情報が掲載されますが、
以下のような状態になったことはないでしょうか？
　

サムネイルに、記事の内容とは直接関係のない
ブログのプロフィール画像や広告の画像が表示されたり、
タイトルが長くてわかりにくいものが表示されたり。
「もっと見やすければいいのに！」と不満に思うことがあると思います。
　

　

この「いいね！」した際の情報は、
OGPを設定することでカスタマイズすることができます。

何もしなくてもFacebook側で設定してくれますが、
ウォールに表示される情報がきちんと設定されていれば、
よりわかりやすく、記憶に残りやすくなり、
「いいね！」をした本人だけでなく、
友達のウォールに表示された記事がクリックされる機会が増えるかもしれません。
　

　

■OGPとは

OGP (Open Graph Protocol) といい、
さまざまな SNS サイトで使われるようになった仕様のことです。
プログラムから読めるように、HTMLに記述します。
Facebookでは、
「xmlns属性」と「meta情報」を記述することにより、設定することができます。

（参照） Open Graph protocol – Facebook開発者
 http://developers.facebook.com/docs/opengraph/
　

　

■記述方法
住所や電話番号、メールアドレス、言語なども詳しく設定できますが、
以下の情報があれば十分だと思います。

・html

<html xmlns:og="http://ogp.me/ns#">

・head内

<meta property="og:locale" content="使用言語（日本語の場合：ja_JP）" />
<meta property="og:title" content="記事のタイトル（必須）" />
<meta property="og:type" content="記事のタイプ（必須）" />
<meta property="og:url" content="記事のURL（必須）" />
<meta property="og:image" content="指定したい画像のパス" />
<meta property="og:site_name" content="記事が属するサイト名（必須）" />
<meta property="og:description" content="記事の説明文" />

※「og:type」には、ページタイプを設定します。以下のリストから選択。

（参照） Open Graph protocol – Facebook開発者「Object types」
http://developers.facebook.com/docs/opengraph/#types

※「og:locale」「og:description」は設定しなくても問題ありませんが、
　設定した方がわかりやすいので追加しました。
　（特に必要なければ削除してください。）
　

　

■OGP記述後

設定前より、ぐっとわかりやすい情報になりました！

これなら、リンクする前に具体的な内容がわかるので、
「ちょっと読んでみようかな」と思ってもらえるのではないでしょうか？
　

　

■OGPを設定する際の便利なツール＋mixiチェック対応
　

●URLリンター
設定した情報を詳しく解説＆なにか問題があればエラーを表示してくれるページです。
一度入力したOGP情報は、Facebookにキャッシュされてしまいますので記述内容を修正する際は、以下のツールでキャッシュをクリアしてください。
http://developers.facebook.com/tools/lint
　
●mixiチェック対応
Facebookだけでなく、mixiチェックの対応も同時にすることがあると思いますが、その場合は、少し追加することで対応できます。
※PC以外のデバイス対応も有り。詳しくは、参照ページをご覧ください。
　
・html

<html xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#">

・head内
サムネイル画像は「og:image」以外に、 mixi 独自の「mixi:image」で複数設定することができます。
（ユーザがいずれかの画像を選択可能。）

<meta property="mixi:image" content="http://example.com/images/sample1.jpg" />
<meta property="mixi:image" content="http://example.com/images/sample2.jpg" />

　
（参照）
技術仕様 << mixi Developer Center (ミクシィデベロッパーセンター)
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check
Check API < mixi Developer Center (ミクシィデベロッパーセンター)
http://developer.mixi.co.jp/connect/mixi_graph_api/mixi_io_spec_top/check-api
サービス管理 < mixi Developer Center (ミクシィデベロッパーセンター)
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/mixicheck

こちらでご紹介しました情報は、2011年6月23日現在のものです。仕様変更によりサイズ等が変わることも考えられますので、今後のFacebookの公式発表に十分ご注意ください。