ガイド
SNSでOpen Graph画像が崩れる理由
切り抜き・未表示・古い画像表示など、OG画像の典型トラブルを解決します。
ページは正常でもSNSプレビューだけ崩れることがあります。多くは画像サイズ、メタタグ、キャッシュが原因です。
OG画像サイズを固定する
共有用画像のサイズを標準化して使い回します。
比率が不安定だとSNSごとのトリミング差が出やすくなります。
OGタグの参照先を確認
og:image / og:title / og:description を本番HTMLで確認します。
og:image は絶対URLで、200応答かつ公開アクセス可能である必要があります。
キャッシュ更新を考慮
SNS側はプレビューをキャッシュします。
更新後は再スクレイプ系ツールを使って反映を確認しましょう。
- 画像差し替え時はURLも更新
- 同一ファイル名の使い回しを避ける
- 再取得後に再確認
ファイル形式と配信確認
小さすぎる画像や特殊形式は失敗しやすいです。
認証不要で読み込める一般的な形式を使います。
投稿前に必ず検証
公開前にOGプレビューで表示確認する習慣を付けましょう。
こんなときに有効
- 画像が大きく切れる
- 古いサムネイルが出続ける
- SNSごとに表示が違う
- 画像が表示されない
原因を標準化で潰す
画像仕様とタグ確認手順を統一すれば、OGトラブルは大幅に減らせます。