サイトを更新したりブログで記事を書いたりしてウェブページが新たに生成され、Facebookのいいね！ボタンやmixiチェックなどを実行すると、そのページ情報が巨大なSNSの世界に流れ込む。Open Graph Protocolとは、その際に決まった共通のフォーマットに沿ってあらかじめページに放り込んでおいて、SNS側(プログラム)が読み取りやすい格好にしておく情報のことを指すんですが、roughtabにもさっそく組み込んでみました。
Example
Open Graph ProtocolのサイトではThe Rock on IMDBをベーシックなmetadataとして例に挙げていますが、マークアップは以下のようなものになります。
<html xmlns:og="http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
この例では、
- og:title - ウェブページのタイトル
- og:type - 何のウェブページなのか
- og:url - ウェブページのURL
- og:image - ウェブページに関連する画像
の4つが指定されているが、ともにOpen Graph Protocoにおいて必須項目となり、その他videoやaudioなど様々な情報を盛ることができる。
Sample
昨日ポストしたアーセナルvsバルセロナのページを例にとってみると以下のような格好になります。
<meta property="og:type" content="article" /> <meta property="og:site_name" content="blog | roughtab" /> <meta property="og:title" content="10-11 UEFA Champions League Round of 16 1st Leg Arsenal vs Barcelona" /> <meta property="og:url" content="https://roughtab.com/blog/archives/2011/02/17222835.php" /> <meta property="og:description" content=" 15日16日に開催された試合の中で最も世界中のフットボールファンが心待ちにしてた大決戦。ロンドンともいえどもボールポゼッションはバルサが大きく上回ったが、残り15分でチームと流れが見違えるほど変わり..." /> <meta property="og:image" content="https://roughtab.com/blog/archives/images/17222835ogp.jpg">
こんなようなmetadataを記事毎に出力させるようにすればオッケー！というわけです。roughtabはMovable Type 5で共通のヘッダーテンプレートを使用しつつ、複数のブログを設置しているので、各ブログの記事毎にog:imageを指定したい場合の設定が少々ややこしくなるんですが、カスタムフィールドのシステム設定でアセットを利用可能にするスカイアークシステムさんの「EnableAssetOverSystem」というプラグインを追加して解決。
これによってog:imageで読み込む画像については、用意できたらこんな格好でアップして、面倒くさくて用意しない場合にはこのロゴ画像が出力されるように設定をしました。
ブログ記事テンプレートの編集についてはmersy's labの@mersyさんがこちらで詳しく紹介してくださっています。ありがとうございます。
ちなみにWordPressでのOpen Graph Protocol実装方法は5509の@Noriさんがこちらの記事で説明してくれています。
comments