«前の日記(2011-06-15 (水)) 最新 次の日記(2011-07-16 (土))»  

まちゅダイアリー


2011-06-19 (日)

Facebook のいいね!ボタンと OGP の設置

ちょっと煽り気味のタイトルだけど、月間10万PVに貢献!Facebookからのアクセスを5倍に増やす方法 | gadget or gimmickという記事を読んだ。 なんでも、WebサイトをOGPに対応すると、いいことがあるらしい。

  • ニュースフィードに表示されるようになる
  • 表示される形式を指定できる

という訳で、この日記でも対応してみた。

OGPとは?

Web ページの情報を表すメタ情報。以下のページが参考になる。

昔からあった <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 対応してみた。 どんな風に動くんだろう…。

参考

このページのOGP情報

Tags: tDiary
本日のツッコミ(全5件) [ツッコミを入れる]
えろぺお (2011-06-20 (月) 02:16)

ogpは1ページ1エントリ前提で設計されてるので、tDiaryのように複数のエントリがあるとどうなるか興味がありますね。この日記はほとんど1日1エントリなのでそのへんよくわからないですし。

まちゅ (2011-06-20 (月) 03:48)

Facebook側はセクションアンカーを認識して別ページ扱いになってますね。<br>今は、og:titleは共通扱い(title_tagから取得)で、og:urlは未指定(tDiaryサーバ側ではhashを取得できない)にしています。<br><br>blogkitのほうが相性いいのは確かですね。

kenz (2011-06-22 (水) 17:04)

複数エントリあったとしても、metaタグは1urlに対して1エントリ分しか指定できないので問題ないですよね<br>1ページにイイネボタンが複数設置してあったとしても、それぞれのイイネが示しているURLが違えばそれぞれのURLにあるmetaタグを取得して来るだけです。

まちゅ (2011-06-22 (水) 23:09)

いいね!ボタンの数を問題にしている訳ではないです。<br>例えば、 20110624.html#p01 と 20110624.html#p02 という2つのPermalinkがあった場合に、ogp:titleとogp:urlが1つしか指定できないよねという話です。

kenz (2011-06-23 (木) 00:00)

なるほど アンカーで分けている場合なんですね<br>Facebook用のエイリアスURLを作るとかがいいのかな