Open Graph Protocolに対応してみた

Facebookの流行に合わせて、当ブログをOpen Graph Protocol対応にしてみました。

Open Graph Protocolのサイト

Open Graph Protocol（OGP）は、大まかに言えば、ソーシャルネットワーク向けに、ウェブページに要約情報を入れる仕組みです。
Facebook／mixi／GREEなどがOGPに対応しています。

1.ウェブページをOGP対応にする

ウェブページをOGP対応にするには、そのページのHTMLヘッダー部分（<head>～</head>）に、meta要素を使って情報を出力するようにします。
最低限必要なmeta要素は、以下の4つです。

meta要素内容
og:titleウェブページのタイトル
og:typeウェブページのタイプ
og:imageウェブページのイメージを表すような画像のアドレス
og:urlウェブページのアドレス

たとえば、当方のブログのメインページでは、以下のようなmeta要素を入れました。 

<meta property="og:title" content="The blog of H.Fujimotoのメインページ" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://www.h-fj.com/blog/" />
<meta property="og:image" content="http://www.h-fj.com/pic/hf.png" />

実際には、content属性の値はテンプレートタグで出力するようにしました。
テンプレートタグの書き方の例は、linkerさんのブログで紹介されています。
また、メインページだけでなく、各アーカイブページにもOGP用のmeta要素を出力しました。

上記のmeta要素のほかに、Facebook独自のmeta要素もあります。
このあたりの詳細は、FacebookのOpen Graph Protocolのドキュメントを参照してください。

2.「いいね」とインサイトへの対応

Facebook向けの対応として、「いいね」ボタンの追加と、インサイトへの対応を行いました。

「いいね」ボタンは、「Like Button」のSocial Pluginsのコードをベースに、個々のブログ記事に対応させました。
ブログ記事のテンプレートに以下のコードを追加しています。 

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like href="<$mt:EntryPermalink$>" layout="box_count" show_faces="true" width="44"></fb:like>

また、インサイトに対応させるために、ブログのメインページのテンプレートのヘッダー部分に、以下の行を追加しました。
なお、「1268097446」は、私のFacebookでのIDです。
ご自分のブログに設定する場合は、ご自分のIDに変える必要があります。 

<meta property="fb:admins" content="1268097446"/>