今回はFacebookやTwitterのOGP画像が上手く表示できない方や画像がぼやけてしまう方など、今やっている方法で本当に問題無いのか不安だという方向けです。
上手く表示されないと嘆く前にやって欲しい表示確認の方法と、OGP画像の推奨サイズを説明します。
もちろん便利な公式ツールがありますので安心して下さいね。
なお、WordPressなどでブログをされている人はOGP設定が出来ている前提です。
- 思った画像サイズで表示されない
- 画像の端が切れる
- いや、そもそも画像サイズは何が正解？
この記事の目次
FacebookのOGP画像サイズと確認ツールは？
高解像度表示なら、画像サイズは1200 x 630ピクセル。
小さくても600 x 315ピクセル以上を使います。
600 x 315ピクセル以下だとグッと小さい表示にされてしまいます。
OGP投稿画像サイズ
- 縦横どちらかのサイズが足りないと引き延ばされ、結果溢れた所がトリミングされる。
- 画像の端が切れるのを防ぐには、上記サイズの様にアスペクト比「1.91：1」で画像を作る。
OGP画像確認ツール – シェアデバッガー
SNSでシェアして貰いたい記事なら、記事公開時にOGP画像の表示確認をしましょう。
画像が表示されない、テキストがおかしいなど、思いがけないエラーを未然に防げます。
以下、公式のシェアデバッガーです。
① シェアデバッガー
タブで切り替わるので、これを選択。
② ブログ記事のURLを入力
ブログ記事のURLやキャンペーンページのURLを入力。オブジェクトURLと言います。
③ デバッグ
デバッグボタンをクリック。
「新しい情報を取得」ボタンが出たらそれをクリック。
上手く行けば、下にそのオブジェクトURLで設定した画像やタイトルなど様々な情報が表示されます。
④ もう一度スクレイピング
つまりオブジェクトの更新です。
すでに他の画像をデバッグした事があれば、その時の情報がキャッシュとしてブラウザに残っている事があります。その場合うまく新しいデータが取得出来ずにエラーになる事があります。
その場合は、ブラウザの再読み込みしてみたり、キャッシュをクリアすると解決します。
そして、「もう一度スクレイピング」ボタンを押せばOK。
それでも駄目な場合は、OGPの設定にミスが無いか調べましょう。
・クローラーが1回はレンダリングしないと画像が表示されない。つまり最初にシェアした人には画像が出ないのでそれを解消する為。
基本的にはシェアデバッガーでURLを入力すればOGP画像の先読みをしてくれます。 これでどんな風にOGP画像が表示されるか確認出来ます。
参考：シェアデバッガー
参考：アスペクト比ベストプラクティス
FacebookのOGP画像が表示されないときは？
画像が上手く表示されない理由は大体同じです。
- OGPタグ設定が間違っている
- キャッシュなど読み込みでトラブっている
実はキャッシュやネットワークの関係で上手く表示されない事もあります。
キャッシュの場合は紹介したシェアデバッガーを使ってください。ブログ記事公開前の確認は必須です。
OGPの設定の場合は以下の記事にまとめてありますので参考にどうぞ。
TwitterのOGP画像サイズと確認ツールは？
大きな画像を含むリンクページ投稿は600 x 315ピクセル。
アスペクト比「1.91：1」もFacebookと同じですね。
小さい投稿画像にしたいなら「summary」
<meta name="twitter:card" content="summary" />
良く使う大きい投稿画像なら「summary_large_image」
<meta name="twitter:card" content="summary_large_image" />大きな画像を含むリンクページ投稿は600 x 315ピクセルの画像を用意しておけば問題ありません。Facebookと同じくアスペクト比「1.91：1」。
以下、カードバリデーターという公式のテストツールです。
OGP画像確認ツール – カードバリデーター
① Card URL
ブログ記事のURLやキャンペーンページのURLを入力。
② Preview card
「Preview card」ボタンを押すことで画像を表示させます。
③ Card preview
投稿した際の画像プレビューです。
- 縦横どちらかのサイズが足りないと引き延ばされ、結果溢れた所がトリミングされる。
- 画像の端が切れるのを防ぐには、上記サイズの様にアスペクト比「1.91：1」で画像を作る。
改めて、確認ツールのカードバリデーターを使う理由は、
Facebookと同じで、ブログ記事公開前には表示確認しましょう。
参考：カードバリデーター
TwitterのOGP画像が表示されないときは？
やはり画像が上手く表示されない理由もFacebookと大体同じです。
- OGPタグ設定が間違っている
- キャッシュなど読み込みでトラブっている
Twitterのブログに設定したOGP画像はキャッシュやネットワークの関係で上手く表示されない事も良くあります。
ブログ記事にOGP画像を設定したら、記事公開前に毎回カードバリデーターを使って画像が読み込まれるか確認しましょう。
OGPの設定が怪しい時は以下の記事を参考にどうぞ。
まとめ – 各OGP画像サイズと公開までの流れ
画像のサイズはFacebook、Twitter共に、
600 x 315ピクセル。
もし用意出来るなら高解像度サイズの1200 x 630ピクセル。
画像の比率はアスペクト比「1.91：1」。
推奨サイズ600 x 315ピクセルでなくても「1.91：１」の比率なら画像の端が不自然に切れたりはしないはずです。
画像がぼやけたり、端が切れたりするのが嫌ならば、大きくて縦横の比率を守ったサイズを設定します。
そして、ブログ公開前に、
シェアデバッガー、カードバリデーターで表示確認をしましょう。間違った状態で公開してしまうと修正が面倒、あるいは事実上不可能になります。
読んで頂いて、ありがとうございました。
note
大抵の場合、画像サイズはFacebookとTwitter共通で使えます。