タイムライン(新しいニュースフィード)を使用するようになってから、
サムネイルが切れている画像を目にすることが多くなったため
Facebook のOGPで設定する画像サイズについて調べてみました。
Facebookの開発者ページで解説されている通り、
「最小値が50×50ピクセル」で「アスペクト比(長辺と短辺の比率)が3:1以下」であれば、
ある程度大きな画像を設定していても
ニュースフィードで表示されている最大値である90ピクセルに最適化するよう
横幅90ピクセルで自動的に縮小されていました。
ところが、
新しいニュースフィードでは長辺を90ピクセルで縮小しているようで、
短辺が90ピクセル以上の大きな画像を設定すると、
サムネイルの両端が切れてしまいます。
※90×80ピクセルの画像でテストしてみたところ、問題なく表示されましたので
短辺が90ピクセルを超える場合のみのようです。
どちらのニュースフィードでもきれいに表示させるためには
長方形の画像の場合は余白をプラスして、
90×90ピクセルの正方形にした方がよさそうです。
※OGPに設定する画像は長方形でも問題ありませんが、正方形が推奨されています。
(参照)Like Button – Facebook開発者
https://developers.facebook.com/docs/reference/plugins/like/
「Open Graph Tags」の項に記載。
テストをしていて気になったのですが、
新しいニュースフィードのサムネイルの最大値は「99×116ピクセル」で、
90×90ピクセルのサムネイルを配置したときにきれいに見えるように、
あらかじめ余白が設定されているようです。
大きな画像を設定すると、このサイズ全面も使えるようなので
よりインパクトのあるサムネイルを設定したい場合は、
「99×116ピクセル」でも設定できそうです。
※今後、仕様変更されることも考えられますので、 短期のキャンペーンページなどで使用されると安全かと思います。
最後に、
正方形で作成することを推奨されているので、
「116×116ピクセル」でも実験してみました。
正確にセンタリングされないようなので、
センター位置がわかりやすいデザインにすると、新しいニュースフィードでは若干違和感があります。
(上記の例では、左に1px寄っていました。)
[まとめ]
OGP用の画像を一種の「バナー」と考え、目を引くデザインにされる機会があると思いますが、
無難に作成する場合は「90×90ピクセル」、
短期的にインパクト勝負で使用する場合は「99×116ピクセル」
で設定されるとよいのではないかと思います。