BloggerをOGP(Open Graph Protocol)に対応させるときに問題になるのが「og:image」です。この「og:image」には、記事内で使われている画像や、記事のサムネイルを指定するのが一般的です。しかし、Bloggerには利用できそうなデータタグが存在しないので、静的画像ファイルへのリンクを指定することしかできません。
そこで、記事のRSSから画像ファイルが使用されているかをチェックし、使用されていれば一番最初に見つかった画像にリダイレクトするWEBアプリケーションを作ってみました。以下のようなURLで取得が可能です。
BloggerSpice
http://bloggerspice.appspot.com/postimage/[記事のURL]
たとえば、この記事に使用されている画像を取得する場合は以下のように指定します。
http://bloggerspice.appspot.com/postimage/http://rrvf.blogspot.com/2011/10/blogger-ogp-og-image.html
このWEBアプリケーションの仕様は以下の通りです。
- RSSを利用するので、RSSが利用できない非公開ブログでは利用不可
- 記事の中に画像が存在しない場合は、http://bloggerspice.appspot.com/bicon.png にリダイレクト
- RSSから取得した画像へのURLは、24時間キャッシュされる
このWEBアプリケーションをテンプレートに組み込む際は以下のように記述してください。
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url' property='og:image'/>
</b:if>とりあえず自分用に作成したので、要望等ありましたらコメントにてお願いします。