Facebook のいいね！ボタンと OGP の設置
ちょっと煽り気味のタイトルだけど、月間10万PVに貢献！Facebookからのアクセスを5倍に増やす方法 | gadget or gimmickという記事を読んだ。 なんでも、WebサイトをOGPに対応すると、いいことがあるらしい。
- ニュースフィードに表示されるようになる
- 表示される形式を指定できる
という訳で、この日記でも対応してみた。
OGPとは？
Web ページの情報を表すメタ情報。以下のページが参考になる。
- フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
- The Open Graph Protocol
- Like Button - Facebook開発者
- Open Graph protocol - Facebook開発者
昔からあった <meta name="description"> などの焼き直しみたいなもの。 例えば、このページだと以下のように指定している。
<meta property="og:title" content="Facebook のいいね！ボタンと OGP の設置 - まちゅダイアリー(2011-06-19)"> <meta property="og:site_name" content="まちゅダイアリー"> <meta property="og:description" content="RubyやLinuxなど、技術的に興味のあることについて。"> <meta property="og:image" content="http://friendfeed-api.com/v2/picture/kmachu"> <meta property="og:type" content="article"> <meta property="og:author" content="machu"> <meta property="fb:app_id" content="224243997595143"> <meta property="fb:admins" content="1275051501">
この情報（OGP）を設定しておくと、訪問者がいいね！ボタンを押してくれた時に Facebook のサイトにリンクの詳細情報（タイトルやdescription）が表示されるようになる。
といいつつ、実際にはOGPを設定していなくても、ある程度の情報は title タグや meta タグなどから自動的に Facebook 側で取得してくれるみたい。 Facebook がどの情報をどこから取得しているのかは、以下のツールを使うことで調べることができる。
Facebook 側の視点に立つと、いちいちHTMLを解析するよりは、og:****で情報を取得できる方が楽。 とすると、OGPに対応するとFacebookのニュースフィードに表示されるようになるというのは、OGPを普及させるための撒き餌みたいなものかな。
OGP設定のポイント
titleやdescriptionやauthorなどは、これまでのmetaタグとそれほど変わらない。 でも、以下の要素はこれまでとはちょっと違う。
<meta property="og:type" content="article"> <meta property="fb:app_id" content="224243997595143"> <meta property="fb:admins" content="1275051501">
og:typeはそのページが何か？を表すもの。 article や blog だけでなく、 book や city や cafe なんてのもある。 URL と 実体の関連づけという意味で重要な要素になるんだろうけど、ブログの場合はトップページに blog を指定して、個別ページに article を指定すれば良さそう。 blog はWebサイト全体を表す。なので、og:typeがblogとなっているページ（つまりトップページ）へのいいね！は、そのブログのファンであることを表す。 一方で og:type がarticleの場合、個別の記事がお気に入りということを表す。 Facebook では article だけ（ファンではないという意味で）特別扱いになっているみたい。
fb:app_id と fb:admins はどちらか片方を指定すればOK。 adminsは自身のFacebook ID。app_idはFacebook上で作成したアプリケーションのID（詳しい使い方は調べてない）。
という訳で、実験を兼ねて ogp.rb プラグインを作成して、この日記にも OGP 対応してみた。 どんな風に動くんだろう…。