【暫定】Google BloggerにOGPの設定をする方法【2015年版】

現在、動作確認、整理中です（あとで、追記します）
分かってる範囲で書いておきます。

BloggerのOGPは設定する必要がない？！

・html - What is <link rel="image_src"> - Stack Overflow

<link href='記事最初の画像URL' rel='image_src'/>

もしかすると、なにも設定しない方がよいのではないか？と思うのですが調査中です。
特に画像なんですが、いつからか不明ですが、記事の一番最初の画像がヘッダーに上記のような形で挿入されています。

画像のある記事で、HTMLソースをみて、image_srcで検索すればわかるかと思います。

で、これを、FaceBookのOGPが画像として認識してくれるんですね。

https://developers.facebook.com/tools/debug/

標準のテンプレート「シンプル」でなにも設定しないで調べてみたのが上記の画像です。認識されているように見えます。
内容だけが、サイトの概要になっていて、それ以外はすべて記事のものになっています。
だから、概要の部分だけちょっと何とかすればOGPに対応できるし、逆に何もしなくてもほぼ認識されてるのに近いかなぁと思います。

画像なんですが、Amazonアソシエイトの本の画像を記事の一番最初に貼り付けていたのですが、それが反映されています。

今まで、よく見かけたOGPの設定

<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->

・AddThis | Adding Open Graph Tags Using Blogger

上記のようなのが標準的だったと思います。
画像は、「data:blog.postImageThumbnailUrl」を使用して記事のサムネイル画像を設定するという方法ですね。サイドバーの人気記事とかに使われているサムネイル画像がこれで取得しているのでそれをつかうという方法ですね。ただ、画像サイズが小さいんですね。

記事の一番最初の画像を取得するタグがある

・data:post.firstImageUrl | Nonsubject

いつからか不明なのですが、Bloggetのテンプレートで使用できるタグの一つとして、「data:post.firstImageUrl」というものがあります。これで記事の一番最初のURLが取得できます。

ただし、これ、bodyタグないでないと動作しないんですね。OGPの場合は、Headタグに挿入しないとダメなので使えないと・・・。