FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。(スマホ対応!最新版 ※9.21追記)

9.13
2013

468x468_2
↑こういう画像にすればOK。青い部分は、実際には白余白にします。

※2014/9追記:正方形で作成する必要はなくなったようです。
Facebook OGP画像の最新サイズ(※2014年9月)、もう正方形は不要

※2013/12/13追記:
実際に仕様通りに作成したOGP画像の作成例を別の記事で紹介しています。
作成する際の参考になると思いますのでよろしければご覧ください。

FacebookのOGP画像、最新サイズでの作成例をご紹介

※2013/9/21追記:
・この記事で言うスマホは、スマホのFacebookアプリでの閲覧を指しています。スマホのブラウザで「m.facebook.com」にアクセスした場合はまたさらに異なるようです。
・Facebookの公式docsがしれっと更新されてました。(Creating Object Types – Facebook開発者
最新のdocsの仕様によれば、OGPの画像サイズは「600×315px以上、1200×630px推奨」らしいです。

We suggest that you give us an image of at least 600×315 pixels. However, bigger is better, so if you have a 1200×630 or larger image that you can use, please give it to us. Also, we recommend that you keep images as close to a 1.91:1 aspect ratio as possible to avoid cropping. (Note: image sizes must be no more than 5MB in size.)

むう・・。一応600×315pxでもテストしてみましたが、AndroidのFacebookアプリで拡大されてしまう問題は解消されなかったので、なんだかなぁ、という感じです。
—–

FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。
って記事を昨日書いたんですが、記事中にもある通り、PCでのみ検証してました。
で、昨日の帰り道にスマホで見てみたら、残念ながら↑のサイズではうまくいかないケースもあるようで。

仕方ないので泣きながら山のようなサイズの画像を作ってひたすら検証し続けまして、ファイナルアンサーが出ました。
結論から言うと、上記の画像のように、「468×468pxの正方形の真ん中に468×245pxの長方形を入れる」がFAです。

468×468pxの正方形の真ん中に468×245pxの長方形を入れたパターン

実際にこのサイズの画像をOGPに設定したページはこちらです

ogp_pc
↑PCで見た場合、ニュースフィードにはセンター部分の長方形だけが表示され、タイムラインでは小さい正方形として表示されます。

ogp_sp
↑スマホに関してはPCとは仕様が異なります。
表示される画像の比率は、1.91:1 でおそらくほぼ同じなのですが、ニュースフィードもタイムラインも表示方式は同じです。

※スマホ、iOSはiPhone持てないのでiPodTouchで見てます。ただ、FacebookアプリはiOS版の最新で見てるので多分iPhoneと仕様は同じ。
※いずれも最新のFacebook公式アプリでのビューです。バージョンが古いと仕様が異なる場合があります。

さて、昨日の記事でも本件は色々とまとめましたが、「PCのタイムラインだけ切り捨てれば、1.91:1の比率でいいんじゃねーの」と思ってました。

ところが、どうやらスマホの検証をしていると、それだとAndroidがダメっぽいです。
マジ糞。

PCとiOSだけを考えれば、昨日の結論である「400×400pxサイズの画像の中心に、400×209pxの長方形の画像」で行けるんですよ。
Androidがそれだとダメ。

PCだと、OGP表示が新方式(画像が大きい)に変わるのは、OGP画像のwidthが400px以上(?)

昨日の検証結果でもわかる通り、PCの場合にOGP画像の表示が大きくなる分岐点は、OGP画像のwidthが400px~300pxの間です。

ogp_300300_n
↑ widthが300pxの画像だと、このように旧方式(画像が小さい)OGP表示になります。

ogp_400400_n
↑ widthが400pxの画像だと、このように新方式(画像が大きい)OGP表示になります。

iOSだと、OGP表示が新方式(画像が大きい)に変わるのは、OGP画像のwidthが300px以上(?)

iOSで検証してみたところ、PCとは異なり、表示が変わる分岐は300px~200pxの間であることがわかりました。

iphone_200
↑ widthが200pxの画像だと、このように旧方式(画像が小さい)OGP表示になります。

iphone_300
↑ widthが300pxの画像だと、このように新方式(画像が大きい)OGP表示になります。

ここまでを総合すれば、400px以上のwidthで画像を作れば、PCもiOSも大きい表示になるわけなので、昨日の記事の結論「400×400pxサイズの画像の中心に、400×209pxの長方形の画像」でも特に問題はないことになります。

Androidの場合、OGP表示が新方式(画像が大きい)に変わるのは、OGP画像のwidthが468px以上

問題はAndroidです。400pxの画像でも新方式になりませんでした。500pxであれば新方式になっていたので、表示が変わる分岐は500px~400pxの間であることがわかりました。
で、気になったのでちょっと細かく見てみたところ、どうやら468px以上であれば新方式になるようです。

android_468467
↑ この画像でわかる通り、467pxの場合は旧方式(画像が小さい)、468pxの場合は新方式(画像が大きい)です。

Androidだけ、OGP画像のクロップ(切り抜き)仕様が他と異なる

これが一番厄介です。468px以上ならドロでもOKということが分かったところで、じゃあ1.91:1かつ、width468px以上(468×245pxとか)なら良いかというと、何故か中央部分に拡大してクロップされてしまいます。
(↑の画像を見てもらっても、四隅の▲▼マークが表示されていないのがわかるかと。)

iphone_500
↑ iOSで500×261px(1.91:1)を表示すると、このように四隅の▲▼マークが表示され、綺麗に表示されています。

android_500
↑ ところが、Androidで500×261px(1.91:1)を表示すると、このように四隅の▲▼マークが表示されず、中央に寄って拡大されているのが分かります。

で、これを解消するためには、どうやらOGPの画像を正方形にするしかない(?)みたいです。
もしかしたら、heightも**px以上必要、とかあるのかもしれませんが、まあよくわからんので。

Androidに関しては、
・widthが468px以上じゃないと、新表示にならない
・正方形の画像にして、中心に1.91:1の画像を配置する作りにしないと、綺麗に1.91:1部分が表示されてくれない

という感じ。

なので、冒頭の通り、「468×468pxの正方形の真ん中に468×245pxの長方形を入れる」ってことになります。