以前、BloggerをOGPに対応させる時に問題になる「og:image」をなんとかするという記事を書きました。

BloggerをOGPに対応させるときのog:imageをなんとかする

http://rrvf.blogspot.jp/2011/10/blogger-ogp-og-image.html

この問題を解決するには、Blogger側で使用できるデータタグの中に「og:image」に適切なものが存在しないので、外部サービスを立ち上げて対応しました。

BloggerSpice

http://bloggerspice.appspot.com/

このサービスを現在でも使っている方がたくさん居るみたいなので、嬉しいです。

動作内容としては、記事に使用されている一番最初の画像にリダイレクトする、という単純なものなのですが、これがないとBloggerでは、Twitterカードの「twitter:image」や、Facebookの「og:image」などに対応することが難しくなっているのが現状です。

しかし、このサービスにも少し問題がありました。

BloggerSpiceの問題点

かなり昔に公開したこの「BloggerSpice」は、取得した画像URLのサイズオプション(PicasaやGoogle+にアップロードした際の限定のオプションで、s128、s64-c、など)を変更せずにそのままリダイレクトしています。

そのため、記事で使用された際のサイズオプションが小さい場合、アイキャッチ画像として正しく認識されなかったり、解像度が下がったりする問題がありました。その他にも、サービスがJavaで書かれているので立ち上がりが遅いという問題もあります。

そこで今回は、同じような新しいサービスを立ち上げました。

Blogger Entry Image Extractor

http://blogger-entry-image.appspot.com/

このサービスは旧「BloggerSpice」と同じような動作ですが、PHPで書きなおしたり、画像のサイズオプションを指定可能にしたりと、少しだけ高機能になっています。上のリンクにを開くとすぐにBlogger画像にリダイレクトされますが、正常な動作です。

テンプレートへの記述方法

このサービスを利用するには、テンプレートのtwitter:imageやog:imageのタグを書き換える必要があります。

<meta name='twitter:image' expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + data:blog.url'/>
<meta property='og:image' expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + 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

関連性がある記事

Disqusでコメント