top-bnr

FacebookのOGP画像で大きく表示される最小サイズとは?

 

FacebookのOGP画像の表示サイズが異なるのはなぜ?

これまでに、Facebookに関係する画像サイズについて色々ご紹介してきました。ところが、ブログ等のウェブページをシェアした際に表示されるサムネイル画像(OGP画像)についてご紹介していないことに気づき、少し調べてみました。

OGP画像とは?

Facebookでシェアした際に表示される、赤い枠線で囲まれた画像を指します。

設定しているOGP画像の大きさによって、画像の表示サイズが変わってきます。

OGP画像例 大
OGP画像例 小

OGP画像の大きさはどの程度?

一般的に、キレイな画像を表示させたい場合は1200px×630pxが推奨されており、最低サイズは600px×315pxと言われています。

実際に試した結果は、600px×210pxまでは大きいサイズで表示され、600px×200px(3:1)のサイズになると小さいサイズで表示されました。

OGP画像サイズ 600px×210px
OGP画像サイズ 600px×200px

OGP画像はどこで設定?

htmlソースのmetaタグで設定できます。

propertyにog:imageを設定し、contentに表示したい画像のURLを設定します。

meta property="og:image" content="https://www.realmax.co.jp/wp-content/uploads/2016/02/0317leaf-724x1024.png"

OGP画像を確認する方法

設定した画像がどのように表示されるかを簡単に確認できるサイトをご紹介します。

なお、こちらのサイトは、各サイズでどのように表示されるかを確認するためのサイトで、設定した画像がどのサイズで表示されるかは確認できません

OGP画像に設定したい画像ファイルをOGP画像シミュレータに設定

赤枠内にファイルをドラッグ&ドロップで追加をするか

画像ファイルをドラッグ&ドロップ

または、範囲内をクリックしてファイルを選択して下さい。

クリックして画像ファイルを選択

各サイズに対応した画像を表示

OGP画像の趣味レート結果

こちらは、今回のOGP画像に使用した画像を設定した結果です。

特に、文字が入っている画像の場合は、こちらで確認を行うことで「文字が途中で切れてしまった」ということを防ぐことができます。

まとめ

個人的に、最小サイズが600px×210pxだったことに少し驚きました。ただ、使用したファイルがjpg形式だったため、210pxになると表示画像が若干荒くなっていました。png形式での比較を行って、また比較してみたいと思います。

なお、過去のFacebookの画像関係の記事が気になる方は、以下のリンクをご利用ください。

bottom-bnr
  • ブログランキング・にほんブログ村へ
  • FC2ブログランキングへ
  • 人気ブログランキングへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る