OG画像が出ない時の直し方10
OG画像（SNSサムネ）が表示されない原因を10項目で切り分け。重複タグの統一／画像サイズ・到達性／キャッシュ更新／検証手順まで、Blogger実装に合わせて具体例つきで解説。
記事を共有してもサムネが出ない／古い画像のまま──多くはタグの重複や画像到達性、キャッシュが原因です。Blogger想定で、最小セットに絞って確実に直す手順をまとめます。
TL;DR（まず結論）
- OG/Twitterタグは1セットに統一（テーマと二重禁止）
- 画像は十分な解像度・200〜400KB・高コントラスト
- 画像URL到達性（200/OK、HTTPS、リダイレクトなし）
- 共有デバッガでキャッシュ更新（再スクレイプ）
- 本文先頭にアイキャッチ埋め込み＋
width/heightでCLS対策
症状の切り分け
- サムネが無：OGタグ未設定／重複衝突／画像非到達
- 古いサムネ：キャッシュ未更新／同名差し替え
- サービス限定で不具合：Xカード設定／Messenger/LINEのキャッシュ差
原因トップ10
- OG/Twitterタグの重複（テーマと記事で二重）
- 画像サイズ・比率不適合（必要解像度未満／縦長）
- 画像URLがリダイレクト（短縮URLやクエリで弾かれる）
- HTTP 4xx/403/ミスマイム（Content-Typeがimageでない）
- http/https混在（Mixed Content）
- robots等で画像取得不可（画像パスをDisallow）
- キャッシュ未更新（旧サムネを保持）
- twitter:card不備（summary_large_image未設定）
- canonical不整合（別URLが正規扱い）
- ファイル容量過多（数MBでタイムアウト）
解決：最小セットに統一
テーマ側にOG/Twitterがある場合は記事側を増やさず、テーマで1セットに。テーマに無い場合のみ、以下を<head>へ（やむを得ず記事本文に置く場合も1回だけ）。
<meta property="og:title" content="【記事タイトル】">
<meta property="og:description" content="【120–160字の要約】">
<meta property="og:type" content="article">
<meta property="og:url" content="【記事URL】">
<meta property="og:image" content="【OG画像URL（/s1200/推奨）】">
<meta name="twitter:card" content="summary_large_image">
本文先頭にはレスポンシブ埋め込みを配置（今回の画像URLをそのまま使用可）。
検証：キャッシュを更新する
- 共有デバッガでURLを入力→「再取得/再スクレイプ」
- Xカードの検証でプレビュー確認（要ログイン）
- 同名置換は避け、ファイル名を変えると更新が早い
curl -I 【OG画像URL】でHTTP 200 / image/jpeg|pngを確認
Blogger実装の注意（実務）
- テーマ > HTMLを編集：既存のOG/Twitter/robots重複を整理
- 画像URL：
/s320//s640//s1024//s1536を用途別に使い分け - canonical：記事URLに統一（短縮や別URL回避）
- CLS対策：本文のimgに
width/height指定＋sizes
チェックリスト（コピペ運用）
- [ ] テーマにOG/Twitterが1セットだけ
- [ ] 画像は十分な解像度／200〜400KB／高コントラスト
- [ ]
og:imageは/s1200/のURL - [ ] 画像URLはHTTPS・リダイレクト無し・HTTP 200
- [ ]
twitter:card=summary_large_image - [ ] 共有デバッガで再スクレイプ済み
- [ ] 本文先頭にアイキャッチ設置（
width/heightあり）
Q&A
Q. 画像はJPGとPNGどちらが良い？
A. 写真やグラデはJPG（品質80〜88）、ロゴ・文字多めはPNG。容量は200〜400KBが目安。
Q. サービスごとに見え方が違うのは？
A. 各サービスのキャッシュとOGの解釈差です。まず再スクレイプ、ダメならファイル名変更で突破。
コメント
コメントを投稿