• #OGP
  • #デバッグ
  • #反省
  • #調査手法
個人未分類

OGP調査の反省と学び

背景

nuxt-og-imageを使ったOGP画像生成を実装後、OGP確認ツール（rakko.tools）で「設定情報が取得出来ませんでした」と表示された。この問題を調査する際に不十分な調査で誤った結論に至った。

私（Claude）の調査ミス

1. 間違ったURLパスの確認

# 私がチェックしたURL（間違い）
curl -sI "https://log.eurekapu.com/__og-image__/image/og.png"
# → 404

# 正しいURL
curl -sI "https://log.eurekapu.com/__og-image__/static/og.png"
# → 200

問題: nuxt-og-image v5では静的生成時のパスが/static/になる。ドキュメントを確認せず、推測でURLを構築した。

2. HTMLメタタグの確認が不十分

# 私がやったこと
curl -sL "URL" | grep -i "og:"
# → 出力なし（と判断）

問題:

  • grepの出力が正しく取得できていない可能性を検証しなかった
  • 別の方法（ブラウザのDevTools、head -100で確認など）を試さなかった

3. 早合点による誤った結論

Web検索で「Dynamic OG images are not compatible with static sites」という情報を見つけ、これが原因だと早合点した。

問題:

  • 本番環境で実際に動いているかを先に確認すべきだった
  • v2時代の古い情報とv5の現在の仕様を区別しなかった

Codexの正しい調査手順

Codexは以下を確認した：

  1. 本番HTMLの確認: https://log.eurekapu.com/ で og:image メタタグが存在することを確認
  2. 正しいOG画像URLの確認: /__og-image__/static/og.png が200で取得できることを確認
  3. 複数ページで確認: トップページと記事ページ（/blog/nvidia-moat）の両方を確認
  4. 結論: 「サーバー側のOGPメタと画像生成は今は動いている」

今後の調査手順チェックリスト

OGP/SEO関連の問題を調査する際：

Step 1: 本番環境の実態確認（最優先）

# HTMLソースでメタタグ確認
curl -sL "https://example.com/page" | grep -E 'property="og:|name="twitter:' | head -20

# OG画像URLを直接確認（複数パターン試す）
curl -sI "https://example.com/__og-image__/static/og.png"
curl -sI "https://example.com/__og-image__/image/og.png"
curl -sI "https://example.com/__og-image__/image/page-path/og.png"

Step 2: 複数ページで確認

  • トップページ
  • 記事/コンテンツページ
  • 動的ルートページ

Step 3: OGP確認ツールのキャッシュを考慮

  • 初回失敗時は数分待って再試行
  • Facebook/Twitterのクローラキャッシュは時間がかかる
  • Facebook Sharing Debugger でキャッシュクリア可能

Step 4: 推測で結論を出さない

  • 「動いていない」と結論付ける前に、必ず本番で実データを確認
  • Web検索の情報はバージョンや日付を確認
  • 不確かな場合は「確認が必要」と伝える

教訓

「動いていない」と主張する前に、本番環境で実際に確認せよ

調査の順序：

  1. 本番で事実確認 → 2. 原因の仮説立て → 3. 修正提案

この順序を逆にすると、存在しない問題を解決しようとして時間を無駄にする。

関連ファイル