Blogger で大きい画像の URL を取得できるようになり、Facebook の og:image の設定が簡単になりました。
今までの Blogger の data:blog.postImageThumbnailUrl では、最大 72px 四方の画像しか取得できません。
投稿内の最初の画像に限り、data:post.firstImageUrl タグにより原寸大を取得できましたが、<head> 内では展開されないため、og:image には使えませんでした。
data:blog.postImageThumbnailUrl を JavaScript で編集して人気の投稿などの画像に原寸大を使うこと自体はできます。しかし、OGP などのページのメタデータは、後から動的に変更するものは、確認した限り全てのサービスで無効でした。
そのため、これまでは、OGP の og:image を利用するソーシャルメディア用の画像は実質的に Blogger には設定する事ができませんでした。例えば、Facebook、Pinterest、AddThis。とくに AddThis で利用される画像は、og:image のみと厳格なため、画像を使ったツールは現実的に全て使えませんでした。
Blogger に新しいタグが追加されたことにより、それが可能になりました。いつものように公式のアナウンスはなしです。
グローバルに原寸大画像の URL を取得できる Blogger タグ
data:blog.postImageUrl
こんな単純な機能がなぜなかったのだろうと思えますが、こちらのサイトさんに掲載されていました。
SEO note For Blogger Header Meta Tags | TrickAdda.Com
Primary SEO Meta Tags for Blogger 2015 - MS Design
2015年1月の投稿ですので、そのあたりで追加されたと思われます。
Nonnsubject でもすでに導入していて、次のようなコードになっています。
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUE7qRHH44-YVnGdyLmUDMWstVoroKUGMw_S9-Hem49zXFSel4lRPPMP9dx-t_zhQyYmjjHMYt0UjScdEufIfy4JLMHLbEFIeiR9aQctFp8xLJsTAGfIepGTNNvA3A-bxl6r9RX9HhFgmC/d/' property='og:image'/>
</b:if>
</head>
原寸大の画像の URL を og:image に指定。なければ、予め Picasa に用意した共通の画像を指定しています。
以前のコード
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUE7qRHH44-YVnGdyLmUDMWstVoroKUGMw_S9-Hem49zXFSel4lRPPMP9dx-t_zhQyYmjjHMYt0UjScdEufIfy4JLMHLbEFIeiR9aQctFp8xLJsTAGfIepGTNNvA3A-bxl6r9RX9HhFgmC/d/' property='og:image'/>
</b:if>
</head>
このコードでは 72x72px の画像しか指定できないので、指定しないほうが良かったくらいです。
Debugger でも画像が小さすぎるエラーが出ます。
もちろん、twitter cards の twitter:image も指定できます。
<meta expr:content='data:blog.postImageUrl' property='twitter:image'/>
先の MS Design さんにあるコードは、タイプに summary_large_image を指定されています。
<meta content='summary_large_image' name='twitter:card'/>
なければ、通常の summary を指定。
<meta content='summary' name='twitter:card'/>
なるほど、今までは小さいイメージしか取得できなかったので、積極的には追加しませんでしたが、大きいイメージを取得できるなら、summary_large_image が良いかもしれませんね。
人気の投稿などに使われている Picasa の c72-c の画像は、きれいではないので、ページの表示速度と相談しながら応用も検討したいですね。