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 == "index"'> <meta content='xxxx.jpg' property='og:image'/> </b:if>後半はBloggerオンリーの話でしたが、是非試してみてください。
