umeda

【Facebook】OGPの画像サイズについて(タイムライン対応)

タイムライン(新しいニュースフィード)を使用するようになってから、
サムネイルが切れている画像を目にすることが多くなったため
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」の項に記載。

og:image – The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.

 

 ✽ ✽ ✽ ✽ ✽

 

テストをしていて気になったのですが、
新しいニュースフィードのサムネイルの最大値は「99×116ピクセル」で、
90×90ピクセルのサムネイルを配置したときにきれいに見えるように、
あらかじめ余白が設定されているようです。

大きな画像を設定すると、このサイズ全面も使えるようなので
よりインパクトのあるサムネイルを設定したい場合は、
「99×116ピクセル」でも設定できそうです。

 

※今後、仕様変更されることも考えられますので、  短期のキャンペーンページなどで使用されると安全かと思います。

 

 

最後に、
正方形で作成することを推奨されているので、
「116×116ピクセル」でも実験してみました。

正確にセンタリングされないようなので、
センター位置がわかりやすいデザインにすると、新しいニュースフィードでは若干違和感があります。
(上記の例では、左に1px寄っていました。)

 ✽ ✽ ✽ ✽ ✽

[まとめ]

OGP用の画像を一種の「バナー」と考え、目を引くデザインにされる機会があると思いますが、
無難に作成する場合は「90×90ピクセル」
短期的にインパクト勝負で使用する場合は「99×116ピクセル」
で設定されるとよいのではないかと思います。

こちらでご紹介しました情報は、2011年12月7日現在のものです。 仕様変更によりサイズ等が変わることも考えられますので、 今後のFacebookの公式発表に十分ご注意ください。
新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら