【Facebook仕様変更】リンク投稿における画像表示サイズが変更されました
ぬががががが。またかよーまたかよー。
すでに「おや?」と思われている方もいるはず。Facebookのニュースフィード仕様が変更されています。新ニュースフィードの導入間近ということなんでしょうかね。
Facebook本の著者としては対応せざるを得ませんよ。
ということでですね、これはもう見てもらったほうが早い。
ニュースフィードを眺めていると、時折こんな感じにニュースフィードの幅いっぱいになったリンク投稿が流れてきているのではないかと思います。
表示されるOGPの画像サイズが大きくなったことで、表示されるリンクタイトルやリンク先の概要も今まで以上の情報量が見えるようになりました。
このリンク投稿における画像サイズの変更は、記憶にある限りこれで2度目。
もともとリンク投稿におけるOGP画像の表示サイズは90px × 90pxの正方形だったのですが、これが2013年1月中旬ごろに、およそ3倍の表示面積になる154px ×154pxの正方形へと変更されました。
それが、今回はもっとえらいことに･･･。面積もさることながら、とうとう画像表示が正方形から長方形へと移行してしまいました。
どんな仕様変更があったのか?
文頭でちょっと触れましたが、いつになるかはちと不明ながら、Facebookはニュースフィードのリニューアルを控えています。
このあたりのことも踏まえられてのことだと思いますが、米国時間の9/10からFacebook広告における仕様変更というのがありまして、直接的にはこの変更に伴ってのものだと考えられます。
最新のリンク投稿における画像サイズ仕様
ここからは最新の仕様に関する話。
先程も書いたように、今回の仕様変更は、Facebook広告の仕様に引っ張られるものになります。そこで、リンク投稿における画像表示サイズは、Facebook広告のものと同じと考えたほうがいいでしょう。
その仕様によると以下のとおりとなっています。
- 画像アスペクト比
1.91:1 - 最小画像サイズ
400px × 209px
※モバイル版は560px × 292px - 推奨画像サイズ
1200px × 627px
なお、最小画像サイズよりも小さな画像がOGPのog:imageに設定されている場合、これまでの154px × 154px、それよりも小さい場合は90px ×90pxで表示されることになります。
推奨サイズから言って、最小画像サイズ通りの画像よりも多少大きめの画像を設定するようにしたいですね。
とは言え、ブログの場合、そこまで大きな画像を掲載するということはほぼありません。だいたい記事エリアに収めることを考えると、多くのブログが横幅640pxに満たないのではないでしょうか。
この辺りから考えると、幅600pxくらいをベースにog:imageが設定されるようにしていくのがベストかもしれません。
WordPressユーザー向けの対応方法
当ブログでは、早速この仕様への対応を行いました。
ということで、その対応方法をシェアしておきたいと思います。
事前の準備としてOGPの対応がされていなければなりません。
ただ、プラグインを利用している場合、少々面倒なことになりかねないので、できればこれを機会にWordPressユーザーはプラグインレスなOGP対応を行うのが望ましいです。
それについては、ちょうど当ブログでの対応方法を記事にしてあるので、そちらを参照してください。
1) functions.phpでOGP用のサムネイル生成の設定を行う
これまでのリンク投稿の画像仕様上、当ブログではサムネイル(アイキャッチ画像)を直接OGPが読みこむようにしていました。
しかし、これでは新仕様に対応できないので、新たにOGP用のサムネイルを生成するようにしました。
まずはfunctions.phpに変更を加えます。これは、もともとサムネイルを吐き出すようにしていることを前提に進めますよ。
/* サムネイル設定 */ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 幅数値, 高さ数値, true );
サムネイルを吐き出すようにしている場合、だいたいこのような記述がされていると思います。
ここに以下のように記述を加えてください。
/* サムネイル設定 */ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 幅数値, 高さ数値, true ); add_image_size( 'ogp_thumbnail', 600, 314, true );
add_image_sizeで記事のサムネイルサイズとは別に、OGP用のサムネイルを吐き出すよう命令する一文を入れています。
2) プラグインレスなOGPを一部書き換える
上述したプラグインレスなOGP対応の記述のうち、og:imageの記述を少し変更します。
<?php $str = $post->post_content; $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//Search Post Image
if (is_single()) {//Single
if (has_post_thumbnail()) {//Has Post Thumbnail
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'ogp_thumbnail', false, '');
functions.phpで新たに加えたOGP用のサムネイルの記述に「ogp_thumbnail」という引数を付けていますが、この引数をOGPでサムネイルを引っ張る記述に加えましょう。
こうすることで、生成された600px × 314pxの画像がog:imageに呼び出されるようになります。
3) サムネイルの再生成を行う
ここまで進めれば、あとはサムネイルを再生成まで行けば準備は完了となります。
基本的に一度投稿した記事は、上記の対応を行っても新しいサイズのサムネイルは用意されていません。そこで、以下のプラグインを利用します。
プラグインの名前の通り、サムネイルを再生成してくれる機能を持っています。
これをインストール後、WordPressのツールメニューに新たに追加されている「Regen. Thumbnail」をクリックし、全画像のサムネイルを再生成してください。
記事投稿数というか、画像のアップロード枚数によりけりですが、かなり時間がかかると思います。ちなみに当ブログの場合、1時間半以上掛かりました。
4) デバッガーでFacebookの再クロールを行う
そして、ここまで進められればようやくすべてが完了となります。
OGP用の画像を吐き出すように設定し、OGPでその画像を呼び出せるように変更し、さらにサムネイルを再生成しても、一度Facebookにクロールされた記事のOGPは変わらないんですね。しかもキャッシュがやたら強力。
かなり古い記事は兎も角としても、最近更新を更新したブログ記事のOGPは以前のまま。これを変更するには、デバッガーを使って再クロールさせる必要があるわけです。
とは言え、記事数が多いとこんなことやるのは正直すごい面倒くさい。。
個人的にはここは敢えて最近のものだけに絞って再クロールをかけておいて、古いものは放置しておくのもアリではないかと。
もしくは対応完了後に投稿される記事から、と割りきってしまうのもアリではないかと思います。つか100とか200ならまだしも1000、2000とか記事があったらやってられませんよ。。
新仕様に対応するメリット
正直、ここまで画像サイズが変わってくると、ニュースフィードに表示された時のクリック率にも大きく影響が出るでしょうし、当然リーチ率にも影響が出てくることは想像に難くありません。
実際、ブログ記事をFacebookでシェアする際に、画像投稿にリンクをくっつけて投稿するほうが、クリック率は高めですし、リーチ率も伸びることがわかっています。
画像サイズがここまで大きくなると、同様の効果が得られるのではないかという期待も比例して大きくなっちゃいます。
Facebookをハブにして集客したいと考えるなら、画像の大きさというアドバンテージをみすみす見逃す手はありません。
ぜひ、この新仕様に対応してみてはどうでしょうか?
あ、ちなみにですが、この新仕様はニュースフィードの他に、Facebookページのタイムラインにも適用されています。
個人プロフィールのタイムラインを見て画像が小さいままじゃんと思う人もいると思いますが、そちらは以前の仕様のままなだけで、ニュースフィードとFacebookページはしっかり新仕様へ変更されているので勘違いしないようにしてくださいね。