OGPトラブルの原因と解決手順（キャッシュ/タグ/画像/配信の総点検）

1. タグの整合（まずは“ソースの真実”）

• og:title / og:description：ページのH1/要約と齟齬がないか。
• og:image：絶対URL（https）・画像が200OKで取得可能か。
• og:url と link rel="canonical" の一致（末尾スラッシュ含む）。
• twitter:card は summary_large_image を明示。

Next.js では generateMetadata でページごとにOGPを生成すると整合が取りやすくなります。

2. 画像要件（比率・視認性・容量）

• サイズ：1200×630（1.91:1）。文字は7語以内・高コントラスト。
• 容量：200KB前後を目安に 画像圧縮。
• フォーマット：WebP推奨（互換が必要ならJPEG）。透明や線主体はPNG。
• CDN経由で200OKか、Content-Type が正しいか（image/jpeg, image/webp, image/png）。

量産は サムネ一括生成 → 圧縮の順が最短です。

3. URLとキャッシュ階層（未反映の正体）

反映遅延の多くはキャッシュ階層に起因します。確認すべきは（1）SNS側キャッシュ、（2）CDN、（3）ブラウザ、（4）アプリの再検証設定です。

• SNSキャッシュ：X Card Validator / Facebook Debugger で「再取得」。
• CDN：OGP画像URLをパージ（Cache-Control: s-maxage の設定も見直し）。
• ブラウザ：ハードリロード、クエリパラメータでキャッシュ回避（検証時のみ）。
• アプリ：ISR/再検証の間隔が長すぎないか（Next.jsのrevalidate）。

4. プラットフォーム別：デバッガで最終確認

• X（Twitter）: Card Validator でプレビュー・HTTPレスポンス・メタの取得可否を確認。
• Facebook/Instagram: Sharing Debugger で再取得・スクレイプログを確認。
• LinkedIn: Post Inspector でカード生成を確認。

再取得で解消しない場合、og:url と canonical の不一致や、画像のHTTPエラー、リダイレクト多段化を疑います。

5. Next.js実装ポイント（再発防止）

• generateMetadata で slugごとにOGPを生成（タイトル/説明/URL/画像）。
• OG画像ルート（opengraph-image.tsx）は contentType を正しく、display:flex など許可CSSのみ。
• HTML側は canonical を正規URLに統一、重複URLは 301/308 で収束。
• 画像の配信は絶対URL・正しいMIME・200OK、CDNはパージ可能なパス設計に。

6. 事例別クイックレシピ

公開前チェックリスト（10項目）

• 画像 1200×630 / 200KB前後 / 高コントラスト。
• 絶対URLで og:image を指している。
• og:url と canonical が一致。
• og:title / og:description の齟齬なし。
• twitter:card = summary_large_image。
• CDN/ブラウザのキャッシュをパージ済み。
• SNSデバッガで再取得し、崩れがない。
• 画像のHTTPレスポンス 200 / 正しい Content-Type。
• HTMLの canonical は正規URL。
• 重複URLは 301/308 で収束。