コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。it今回はFacebookやTwitterのOGP画像が上手く表示できない方や画像がぼやけてしまう方など、今やっている方法で本当に問題無いのか不安だという方向けです。上手く表示されないと嘆く前にやって欲しい表示確認の方法と、OGP画像の推奨サイズを説明します。便利な公式ツールがありますので安心して下さいね。WordPressなどでブログをされている人はOGP設定が出来ている前提です。こんな人は参考になります思った画像サイズで表示されない画像の端が切れるいや、そもそも画像サイズは何が正解?フエル大抵の場合、画像サイズはFacebookとTwitter共通で使えます。315ピクセル以上を使います。315ピクセル以下だとグッと小さい表示にされてしまいます。OGP投稿画像サイズポイント縦横どちらかのサイズが足りないと引き延ばされ、結果溢れた所がトリミングされる。画像の端が切れるのを防ぐには、上記サイズの様にアスペクト比「1.91:1」で画像を作る。シェアデバッガーSNSでシェアして貰いたい記事なら、記事公開時にOGP画像の表示確認をしましょう。画像が表示されない、テキストがおかしいなど、思いがけないエラーを未然に防げます。以下、公式のシェアデバッガーです。Facebookの公式ツール、シェアデバッガー。シェアデバッガータブで切り替わるので、これを選択。ブログ記事のURLを入力ブログ記事のURLやキャンペーンページのURLを入力。オブジェクトURLと言います。デバッグデバッグボタンをクリック。「新しい情報を取得」ボタンが出たらそれをクリック。上手く行けば、下にそのオブジェクトURLで設定した画像やタイトルなど様々な情報が表示されます。一度スクレイピングつまりオブジェクトの更新です。他の画像をデバッグした事があれば、その時の情報がキャッシュとしてブラウザに残っている事があります。その場合うまく新しいデータが取得出来ずにエラーになる事があります。その場合は、ブラウザの再読み込みしてみたり、キャッシュをクリアすると解決します。「もう一度スクレイピング」ボタンを押せばOK。それでも駄目な場合は、OGPの設定にミスが無いか調べましょう。・OGP画像がどの様にタイムラインに表示されるのかを確認し、ミスが無いか事前にチェックする為。・クローラーが1回はレンダリングしないと画像が表示されない。最初にシェアした人には画像が出ないのでそれを解消する為。基本的にはシェアデバッガーでURLを入力すればOGP画像の先読みをしてくれます。これでどんな風にOGP画像が表示されるか確認出来ます。アスペクト比ベストプラクティスFacebookのOGP画像が表示されないときは?画像が上手く表示されない理由は大体同じです。OGPタグ設定が間違っているキャッシュなど読み込みでトラブっている実はキャッシュやネットワークの関係で上手く表示されない事もあります。キャッシュの場合は紹介したシェアデバッガーを使ってください。ブログ記事公開前の確認は必須です。OGPの設定の場合は以下の記事にまとめてありますので参考にどうぞ。アスペクト比「1.91:1」もFacebookと同じですね。