SNS用OGP画像の確認方法とうまく表示できない時の対処法

OGP画像の確認方法とうまく表示できない時の対処法

今回はFacebookやTwitterのOGP画像が上手く表示できない方や画像がぼやけてしまう方など、今やっている方法で本当に問題無いのか不安だという方向けです。

上手く表示されないと嘆く前にやって欲しい表示確認の方法と、OGP画像の推奨サイズを説明します。
もちろん便利な公式ツールがありますので安心して下さいね。
なお、WordPressなどでブログをされている人はOGP設定が出来ている前提です。

こんな人は参考になります
  • 思った画像サイズで表示されない
  • 画像の端が切れる
  • いや、そもそも画像サイズは何が正解?
SNSで必須のOGP設定&最適画像サイズ

OGPとは?シェアされる最適なOGP画像サイズとOGPタグ設定

大抵の場合、画像サイズはFacebookとTwitter共通で使えます。

FacebookのOGP画像サイズと確認ツールは?

高解像度表示なら、画像サイズは1200 x 630ピクセル。
小さくても600 x 315ピクセル以上を使います。

600 x 315ピクセル以下だとグッと小さい表示にされてしまいます。

OGP投稿画像サイズ

画像:OGP画像largeサイズ
図解:OGP画像smallサイズ
ポイント
  • 縦横どちらかのサイズが足りないと引き延ばされ、結果溢れた所がトリミングされる。
  • 画像の端が切れるのを防ぐには、上記サイズの様にアスペクト比「1.91:1」で画像を作る。

OGP画像確認ツール – シェアデバッガー

SNSでシェアして貰いたい記事なら、記事公開時にOGP画像の表示確認をしましょう。
画像が表示されない、テキストがおかしいなど、思いがけないエラーを未然に防げます。

以下、公式のシェアデバッガーです。

図解:FacebookのOGPシェアデバッガー使い方
Facebookの公式ツール、シェアデバッガー。

① シェアデバッガー

タブで切り替わるので、これを選択。

② ブログ記事のURLを入力

ブログ記事のURLやキャンペーンページのURLを入力。オブジェクトURLと言います。

③ デバッグ

デバッグボタンをクリック。
「新しい情報を取得」ボタンが出たらそれをクリック。
上手く行けば、下にそのオブジェクトURLで設定した画像やタイトルなど様々な情報が表示されます。

④ もう一度スクレイピング

つまりオブジェクトの更新です。

すでに他の画像をデバッグした事があれば、その時の情報がキャッシュとしてブラウザに残っている事があります。その場合うまく新しいデータが取得出来ずにエラーになる事があります。

その場合は、ブラウザの再読み込みしてみたり、キャッシュをクリアすると解決します。
そして、「もう一度スクレイピング」ボタンを押せばOK。
それでも駄目な場合は、OGPの設定にミスが無いか調べましょう。


改めて、確認ツールのシェアデバッガーを使う理由は、

・OGP画像がどの様にタイムラインに表示されるのかを確認し、ミスが無いか事前にチェックする為。
・クローラーが1回はレンダリングしないと画像が表示されない。つまり最初にシェアした人には画像が出ないのでそれを解消する為。

基本的にはシェアデバッガーでURLを入力すればOGP画像の先読みをしてくれます。 これでどんな風にOGP画像が表示されるか確認出来ます。

参考:シェアデバッガー
参考:アスペクト比ベストプラクティス

TwitterのOGP画像サイズと確認ツールは?

画像:Twitter投稿画像summary_large

大きな画像を含むリンクページ投稿は600 x 315ピクセル。
アスペクト比「1.91:1」もFacebookと同じですね。

小さい投稿画像にしたいなら「summary」

<meta name="twitter:card" content="summary" />
最小サイズ144 x 144ピクセル、最大4096 x 4096ピクセル。サイズは2MBまで。
画像:Twitter投稿画像summary

良く使う大きい投稿画像なら「summary_large_image」

<meta name="twitter:card" content="summary_large_image" />

大きな画像を含むリンクページ投稿は600 x 315ピクセルの画像を用意しておけば問題ありません。Facebookと同じくアスペクト比「1.91:1」。

以下、カードバリデーターという公式のテストツールです。

OGP画像確認ツール – カードバリデーター

画像:Twitter投稿画像カードバリデーター
TwitterのOGPカードバリデーター

① Card URL

ブログ記事のURLやキャンペーンページのURLを入力。

② Preview card

「Preview card」ボタンを押すことで画像を表示させます。

③ Card preview

投稿した際の画像プレビューです。

ポイント
  • 縦横どちらかのサイズが足りないと引き延ばされ、結果溢れた所がトリミングされる。
  • 画像の端が切れるのを防ぐには、上記サイズの様にアスペクト比「1.91:1」で画像を作る。

改めて、確認ツールのカードバリデーターを使う理由は、

・OGP画像がどの様にタイムラインに表示されるのかを確認し、ミスが無いか事前にチェックする為。

Facebookと同じで、ブログ記事公開前には表示確認しましょう。

参考:カードバリデーター

まとめ – 各OGP画像サイズと公開までの流れ

画像のサイズはFacebook、Twitter共に、

600 x 315ピクセル。

もし用意出来るなら高解像度サイズの1200 x 630ピクセル。

画像の比率はアスペクト比「1.91:1」
推奨サイズ600 x 315ピクセルでなくても「1.91:1」の比率なら画像の端が不自然に切れたりはしないはずです。

画像がぼやけたり、端が切れたりするのが嫌ならば、大きくて縦横の比率を守ったサイズを設定します。

そして、ブログ公開前に、

シェアデバッガー、カードバリデーターで表示確認をしましょう。間違った状態で公開してしまうと修正が面倒、あるいは事実上不可能になります。

読んで頂いて、ありがとうございました。

SNSで必須のOGP設定&最適画像サイズ

OGPとは?シェアされる最適なOGP画像サイズとOGPタグ設定

画像:Facebookのプロフィール写真・画像を上手に設定するコツは?

Facebookのプロフィール写真・画像を上手に設定するコツは?