Facebookで記事がシェアされば際、せっかくなら大きな画像を表示させたいものです。
一説によると、大きな画像を表示することで、クリック率も3倍に上がるそうです。
Facebookでいいねやシェアされた際に表示される画像は、OGPに設定された画像が表示されるようですが、大きく表示するためには、高解像度の大きな画像が必要なようです。
また、同じ記事がシェアされた場合でも、PCとスマホなどデバイスによって違っているようです。
そこで、テストFacebookページを作り、それぞれの環境で表示テストを行ってみました。
まずは主要な解像度の画像でそれぞれの表示を確認してみました。
まず、90ｘ90では、別の画像（バナーとして貼ってあった賢威の画像）が表示されてしまいました。
154×154と200×200では、設定した画像がサムネイルとして表示されました。
154×154で表示表示されたのは、またま賢威の画像より大きかったため、優先して表示されたようです。
200×200以上でないと、OGPの画像として認識してもらえないというのが正しいようです。
PCでは、600×600以上の場合、全て大きな画像で表示されました。
スマホアプリでは、600×600は大きく表示されたものの、640×480ではサムネイル表示になってしまいます。
この辺りに境目がありそうです。
1024×748以上は全て大きく表示されました。
スマホサイトでは、1024×748までがサムネイル表示され、1200×630以上が大きな画像で表示されます。
デバイスや環境でかなり違いがあることが分かります。
ここまでをまとめるとこのようになります。
では次に、それぞれの環境ごとに境界線となる解像度を追い込んでいきます。
まずはPCサイトから。
200×200と600×600の間ということは分かりましたので、その間をテストしながら追い込んでいきます。
まず、500×500では大きな画像で表示されたものの、400×400ではサムネイル表示となってしまいました。
ちなみに旧タイムラインでは、400×400でも大きく表示されていました。
この辺りが新タイムラインの変更点でもあるようです。
別のサイトで、新タイムラインの画像表示エリアが484×252になるという情報があったので、
試してみましたが、これもサムネイル表示になってしまいました。
幅のみを広げ、500×252にしてみても、やはりサムネイル表示です。
高さも少し広げ、500×261にしてみたところ、今度は大きな画像になりました。
思い切ってさきほど失敗した484×252を1pxづつ大きくして485×253にしたところ、うまく大きな画像で表示されました。
この結果をまとめるとこのようになります。
結論としては、PCの新タイムラインで画像を大きく表示する条件は、
幅485px以上かつ高さ253px以上
となりました。
次に、スマホアプリでの境界線となる解像度を追い込んでいきます。
iPhoneがなく確認できなたったのが残念ですが、とりあえずAndroidで確認していきます。
こちらも先ほどの結果から480px～600px辺りが境界のようですので、
ここで追い込んでみます。
まず、600×500ではサムネイル表示となってしまいましたが、600×550では大きな画像が表示されます。
正方形のような気がしてきたので、550×550で試してみたところ、やはり大きな画像が表示されます。
正方形もまま追い込んでいくと、515px以上で大きな画像が表示されることが分かりました。
本当に正しいか確認のため、幅・高さそれぞれ1pxづつ小さくしてみたところ、どちらもサムネイル表示になってしまいますので、
正方形というのが正しいようです。
この結果をまとめるとこのようになります。
結論としては、スマホアプリ（Android）で画像を大きく表示する条件は、
幅515px以上かつ高さ515px以上
となりました。
解像度だけでなく、アスペクト比も違うとは驚きです。
最後にスマホサイトの境界線を調べてみます。
スマホサイトでFacebookを使っている人がどれほどいるのか疑問ではありますが、念のため。
こちらも最初のテストで1024×748以上1200×630未満だということがわかりましたので、この間で絞り込んでみます。
まず、1100×600で試してみたところ、大きな画像が表示されましたので、高さを600pxに固定したまま幅を追い込んで行きます。
その結果、幅1040pxが境界線ということが分かりました。
次に幅を1040pxに固定して思い切って高さ300pxで試してみます。
この場合は小さすぎ、サムネイル表示になってしまったので、その間を絞り込んでいった結果、544pxが境界線という事がわかりました。
試しに1px小さくしてみたところ、やはりサムネイル表示となってしまいました。
この結果をまとめるとこのようになります。
結果、スマホサイト（Android）で画像を大きく表示する条件は、
幅1040px以上かつ高さ544px以上
となりました。
３環境の中では最も大きな画像が必要となる上、アスペクト比（縦横比）もやはり関連性がないように見受けられます。
これらの境界線となる解像度を上回り、大きな画像が表示された場合でも、その表示する画像の処理方法にはまた各デバイスや環境ごとに異なるようです。
スマホサイトでは、縦横ともに縮小され、ゆがんだ画像が表示されます。
以上のテスト結果をまとめると、こちらのようになります。
| デバイス＆環境 | 画像（小） | 画像（大） | 大きな画像の処理 |
|---|---|---|---|
| PCサイト | 200x200以上 | 485x253以上 | 幅縮小・高さカット |
| スマホアプリ | 200x200以上 | 515x515以上 | 幅縮小・高さカット 真ん中で切り抜き |
| スマホサイト | 200x200以上 | 1040x544以上 | 縦横ともに縮小（ゆがむ） |
まず、200×200以下の画像は、基本的に認識されませんで注意が必要です。
WordPressのサムネイル画像初期設定は154×154ですので、場合によっては設定を変更する必要があるかもしれません。
大きな画像を表示させたい場合、全てのデバイスや環境に合わせるには、幅1040px以上が必要ということになります。
特に上下はカットされる可能性が大きいため、より注意が必要です。
Facebookは頻繁に仕様変更があり、高解像度化する傾向もありますので、できれば大きめの画像を用意しておいた方が無難といえそうです。
スポンサードリンク
Copyright © 2024 Wordpress奮闘記 All Rights Reserved.
コメントはありません。
トラックバックURL