2011/06/07

Facebookに投稿する前に、OGPの設定を確認できる"URLリンター"について

Facebookを見ているとブログやサイトのリンクの横にOGPで設定されたサムネイルが出ますが、設定されていないと本文と関係ないものが表示されてて「OGPェ・・」となる機会が増えてきました。

Facebookに投稿する前に、URLリンターを使うと事前にOGPの設定が確認できます。

本文に画像があるのに関係ないサムネイルが表示される例。OGPのイメージをサイト全体で設定している場合は仕方ないんですが。。


URLリンターの使い方


URLリンターにアクセスして、確認したいURLを入力し、Lintボタンを押すだけです。
http://developers.facebook.com/tools/lint/


確認すると、Facebook上でどのように表示されるか、OGPのテストができます。
足りないOGPプロパティについても指摘してくれます。



og:imageについて


OGPを設定する際に、たまにサイト全体に同じ画像を指定しているサイト/ブログがありますが、個人的にこれは逆効果になる場合もあるのではと思います。サイトのブランドロゴを常に出したい・・みたいな思いもあるかもですが、閲覧者にとっては記事ごとにサムネイルが表示される方がよいですよね。


Bloggerのog:imageについて


このブログはGoogleのBloggerを使ってるんですが、やはりGoogleのブログですのでOGPへの対応は早急には進んでいないようです。特にサイトの記事ごとにog:imageを指定する事は、現状のBloggerのテンプレートの仕様上難しいのではと思います。

色々確認すると(前は無かったと思うのですが)、BloggerではURLが記事の場合、headタグ内に
<link rel="image_src" href="xxxx.jpg" />
が挿入されるようになっています。この画像は、多分記事中の先頭画像のサムネイルになっていて、72px*72pxで出力されています。これがog:imageの代わりのように使われていますが、この画像のURLのみをテンプレートに出力して、og:imageとして記述したかったのですが、どうもURLのみを出力するタグが無いようです。
content='blog.imageSrcTag'
というタグがあってlinkタグごと出力されるものはあるのですが・・とても中途半端な仕様ですね。。

このような状態ですので、正式対応するまでは、
・ブログトップや一覧ページではog:imageを指定 (ブログ全体用の画像)
・記事にはog:imageを指定しない
という条件をテンプレートに記述して対応しています。

とりあえずog:imageが記事ごとに設定できないブログやシステムの場合はこの方法で逃げるのはありだと思いました。

Bloggerで、og:imageを記事以外に指定するテンプレートタグ


xxxx.jpgにはブログ全体のロゴなどを指定してください。
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='xxxx.jpg' property='og:image'/>
</b:if>
後半はBloggerオンリーの話でしたが、是非試してみてください。