以前、BloggerをOGPに対応させる時に問題になる「og:image」をなんとかするという記事を書きました。
BloggerをOGPに対応させるときのog:imageをなんとかする
この問題を解決するには、Blogger側で使用できるデータタグの中に「og:image」に適切なものが存在しないので、外部サービスを立ち上げて対応しました。
BloggerSpice
このサービスを現在でも使っている方がたくさん居るみたいなので、嬉しいです。
動作内容としては、記事に使用されている一番最初の画像にリダイレクトする、という単純なものなのですが、これがないとBloggerでは、Twitterカードの「twitter:image」や、Facebookの「og:image」などに対応することが難しくなっているのが現状です。
しかし、このサービスにも少し問題がありました。
BloggerSpiceの問題点
かなり昔に公開したこの「BloggerSpice」は、取得した画像URLのサイズオプション（PicasaやGoogle+にアップロードした際の限定のオプションで、s128、s64-c、など）を変更せずにそのままリダイレクトしています。
そのため、記事で使用された際のサイズオプションが小さい場合、アイキャッチ画像として正しく認識されなかったり、解像度が下がったりする問題がありました。その他にも、サービスがJavaで書かれているので立ち上がりが遅いという問題もあります。
そこで今回は、同じような新しいサービスを立ち上げました。
Blogger Entry Image Extractor
このサービスは旧「BloggerSpice」と同じような動作ですが、PHPで書きなおしたり、画像のサイズオプションを指定可能にしたりと、少しだけ高機能になっています。上のリンクにを開くとすぐにBlogger画像にリダイレクトされますが、正常な動作です。
テンプレートへの記述方法
このサービスを利用するには、テンプレートのtwitter:imageやog:imageのタグを書き換える必要があります。
<meta name='twitter:image' expr:content='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url'/>
<meta property='og:image' expr:content='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url'/>上記のように「BloggerSpice」同等、記事のURLを結合する形で使用します。旧サービスと違う点として「s」というオプション値が指定できるようになっています。
なぜこのオプション値が必要になるかというと、記事から画像を取得した時に、このサイズオプションが小さい場合があるためです。このオプション値を設定しておくことで、常に同じサイズの画像を取得することができます。
この値は、先ほど少し触れた通り、Google＋やPicasaに画像をアップロードした際の画像サイズオプションを指定するものとなっています。今回の例では「s900」という値を指定います。この場合、元画像の幅が900ピクセルを超えている場合は、幅が900ピクセルになるように圧縮されます。
TwitterカードとOGPの詳しい設定方法は以下の記事を参照してください。今回のサービスを利用する場合は多少読み替える必要がありますが、ご容赦ください。
Bloggerで記事にディスクリプションを個別に設定する方法
http://rrvf.blogspot.jp/2014/03/blogger-seo-article-description.html