Facebook の Like Button だとか mixiチェックだとかを入れるときに、OGPで指定したウォールなどに共有されるサムネイル画像の大きさについてメモ。
- サムネイル画像は複数枚指定（複数行）してOK（「いいね」では意味がない）
- 画像の大きさは50×50ピクセル以上を推奨（ウォール表示の最大サイズは幅90px）
- 画像の長辺：短辺の比率は3：1以上であること（正方形が推奨）
50×50ピクセル以上で、長辺：短辺 が 3：1 以上であること。
というのが最低限の条件。
この条件を満たさないものは、「いいね」でも「シェア」でも無視される。
条件を満たす最小の50×50ピクセルの画像を指定すると、
↓こんな感じになる。
ちなみに、Facebookにおける最良の大きさは何ピクセルかというと、幅が90ピクセル。
↓こんな感じになる。
「Square images work best」ってFacebookさんが言っているので、サンプルは正方形で作りました。
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.
幅90px以上の大きさの画像を指定した場合は、幅90pxにリサイズされるので、ウォール上の最大サイズは幅が90pxということになる。画像を自動で縮小されたくないような細かいデザインをするなら、90×90ピクセルでデザインすると良さそう。
mixi
mixiチェックに関して→mixiチェック << mixi Developer Center (ミクシィ デベロッパーセンター)
- サムネイル画像を複数枚指定（複数行）する場合、指定できる画像の枚数は5枚まで
- 画像フォーマットは JPEG, PNG, GIF（アニメーションGIF除く）に対応
- 画像の容量が400KBを超える画像は無視される
- 画像の容量が1KB未満の画像は無視される
- 画像の大きさが幅76ピクセル、高さ76ピクセル以下のものは無視される
- 画像の大きさは幅180ピクセル、高さ180ピクセル以上を推奨
- 画像の URL として指定できるのは HTTP のみ (HTTPS 未対応)
ということで、キャプチャ用意。
↓これがFacebookで言うところのウォールで共有されるサムネイルの大きさ。
76×76ピクセルより大きい画像を用意した場合は、76pxにリサイズされる。
ちなみに、推奨されている180×180ピクセルがどこに使われているのかというと…
↓mixiチェックの個別ページにあたるページに使用される。
だから結局mixiチェックの場合は、180×180ピクセルで用意するのが最良。
何ピクセルで用意する？
- FacebookのLike Buttonだけであれば、90×90ピクセルで用意すればよい。
- FacebookのLike Buttonとmixiチェック両方あるなら、180×180ピクセルで用意すればよい。
おまけ：Google+の「+1」で使用される画像とサイズ
どうやらGoogle+も「og:image」を見ている様子。
長辺が45ピクセルにリサイズされるので、ちっちゃ！(・д・)と思った次第です。