2015年6月1日月曜日

Bloggerに新しいタグが追加、大きい画像を取得できるようになりました

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でもすでに導入していて、次のようなコードになっています。

<head>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='http://lh6.googleusercontent.com/-Z6ax3FG6D9o/UsWmwYdLK8I/AAAAAAAAHlU/oqbhxbVLZfg/d/' property='og:image'/>
</b:if>
</head>

原寸大の画像のURLをog:imageに指定して、なければ、予めPicasaに用意した共通の画像を指定しています。

以前のコード

<head>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://lh6.googleusercontent.com/-Z6ax3FG6D9o/UsWmwYdLK8I/AAAAAAAAHlU/oqbhxbVLZfg/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の画像は、きれいではないので、ページの表示速度と相談しながら応用も検討したいですね。