OGP (Open Graph Protocol) を試してみました
- 投稿日：2011年1月22日 02:18
- カテゴリ：スクリプト関連
こんにちは、ほうじ茶が切れたので仕方なく麦茶を飲んでいるHitoyamです。熱い麦茶は微妙。
さて、チェック済の方も多いかと思いますが、@amachang の『フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か』を読んだので、試してみました。
くわしくは @amachang のエントリに全て載ってるのですが、一応自分用にメモ。
OGP (Open Graph Protocol) とは
ウェブサイトの情報を表すメタデータをHTMLに付加する記述方法なのだそうで、SNSサイトなどで多く使われているみたいです。
The Open Graph Protocol によるとRDFaがベースになってるみたいなことが書いてありますが、書き方はやっぱりRDFaに似てる感じです。MicrodataとかMicroformatsとかとはちょっと違って、meta要素として記述。メタデータを扱うので、名前空間も必要になりますね。
自分のブログで試してみる
というワケで、とりあえずやってみました。@amachang のを参考にしつつ、プロパティなどは The Open Graph Protocol にあるのをざっと確認。
<html xmlns:og="http://ogp.me/ns#">
<meta property="og:title" content="3Dメガネを作ってみた" />
<meta property="og:type" content="article" />
<meta property="fb:admins" content="hitoyam" />
<meta property="og:url" content="http://www.hitoyam.com/web/2010/11/29_2359.html" />
<meta property="og:image" content="http://farm6.static.flickr.com/5003/5213690970_991aa2d0da_z.jpg" />
<meta property="og:site_name" content="その仕事、蠍は留守です" />
<meta property="og:email" content="hitoyam@gmail.com" />それで何が起こるのかというと、ブログエントリページに設置してある「いいね！」を押した時のウォールの表示が変わるワケですね。
実際に「いいね！」してみた
今まではブログのURLとエントリHTMLの<title>で設定しているページタイトルが生で表示されていたのですが、og:site_name で指定しているブログのタイトルと og:title で指定しているエントリのタイトルが反映されるようになりました。
ちなみに一度反映されても、「いいね！」を取り消したりすると繋がりがなくなって、その後もそのページの OGP は反映されない状態になるっぽいです。これでハマりかけました。
MTのテンプレにもちょっと工夫を
og:image には一応そのエントリでメインとして使っている写真を入れてありますが、写真がないエントリもあるのですよね。なので、MTのテンプレの中で以下のように処理しておきました。これで画像のないエントリの時にも好きな画像を出せるようになります。まぁ、それだけなんですけど。
<mt:If tag="for_top_entrylist">
<mt:for_top_entrylist> /* 画像用のカスタムフィールドです */
<mt:Else>
http://www.hitoyam.com/images/sasoru.png
</mt:If>
メタデータ、流行るといいな
前々から思ってたことをこの際ハッキリ言っちゃいますけど、メタデータって正直あんまり人気ないじゃないですか。ね。
でもでも、昨今のFacebook人気に乗じて、OGPの流れからセマンティックなこと全体に光が当たるようになっていくといいなぁなどと思っているのです。超期待しているのです。
皆さんもそう思いますよね！ そうですよね！ わかります！
季節的にはセマンティックWebコンファレンスも迫ってきましたし、いまだ2回目の開催がいつなのか不明なセマンティックウェブ勉強会でも、こういうところからやってみてはどうかしら。
関連URL
- 投稿日：2011年1月22日 02:18
- カテゴリ：スクリプト関連