[{"data":1,"prerenderedAt":517},["ShallowReactive",2],{"content-/ogp-investigation-learnings":3,"all-pages-for-dir":494,"related-/ogp-investigation-learnings":495,"og-image-/ogp-investigation-learnings":516},{"id":4,"title":5,"body":6,"category":478,"concepts":479,"description":480,"extension":481,"meta":482,"navigation":82,"ogImage":479,"path":483,"project_name":479,"published":484,"publishedAt":485,"seo":486,"source":479,"stem":487,"tags":488,"todo":479,"unpublished":484,"updatedAt":479,"__hash__":493},"pages/2025-12/2025-12-23/ogp-investigation-learnings.md","OGP調査の反省と学び",{"type":7,"value":8,"toc":461},"minimark",[9,13,17,21,25,30,110,121,125,172,177,191,195,198,202,210,214,217,259,262,265,269,364,368,379,383,401,405,416,419,427,430,435,438,441,457],[10,11,5],"h1",{"id":12},"ogp調査の反省と学び",[14,15,16],"h2",{"id":16},"背景",[18,19,20],"p",{},"nuxt-og-imageを使ったOGP画像生成を実装後、OGP確認ツール（rakko.tools）で「設定情報が取得出来ませんでした」と表示された。この問題を調査する際に不十分な調査で誤った結論に至った。",[14,22,24],{"id":23},"私claudeの調査ミス","私（Claude）の調査ミス",[26,27,29],"h3",{"id":28},"_1-間違ったurlパスの確認","1. 間違ったURLパスの確認",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-bash shiki shiki-themes vitesse-light vitesse-light","# 私がチェックしたURL（間違い）\ncurl -sI \"https://log.eurekapu.com/__og-image__/image/og.png\"\n# → 404\n\n# 正しいURL\ncurl -sI \"https://log.eurekapu.com/__og-image__/static/og.png\"\n# → 200\n","bash","",[38,39,40,49,71,77,84,90,104],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sxvE3","# 私がチェックしたURL（間違い）\n",[41,50,52,56,60,64,68],{"class":43,"line":51},2,[41,53,55],{"class":54},"senZ8","curl",[41,57,59],{"class":58},"snbK4"," -sI",[41,61,63],{"class":62},"sMJiu"," \"",[41,65,67],{"class":66},"sdGka","https://log.eurekapu.com/__og-image__/image/og.png",[41,69,70],{"class":62},"\"\n",[41,72,74],{"class":43,"line":73},3,[41,75,76],{"class":47},"# → 404\n",[41,78,80],{"class":43,"line":79},4,[41,81,83],{"emptyLinePlaceholder":82},true,"\n",[41,85,87],{"class":43,"line":86},5,[41,88,89],{"class":47},"# 正しいURL\n",[41,91,93,95,97,99,102],{"class":43,"line":92},6,[41,94,55],{"class":54},[41,96,59],{"class":58},[41,98,63],{"class":62},[41,100,101],{"class":66},"https://log.eurekapu.com/__og-image__/static/og.png",[41,103,70],{"class":62},[41,105,107],{"class":43,"line":106},7,[41,108,109],{"class":47},"# → 200\n",[18,111,112,116,117,120],{},[113,114,115],"strong",{},"問題",": nuxt-og-image v5では静的生成時のパスが",[38,118,119],{},"/static/","になる。ドキュメントを確認せず、推測でURLを構築した。",[26,122,124],{"id":123},"_2-htmlメタタグの確認が不十分","2. HTMLメタタグの確認が不十分",[31,126,128],{"className":33,"code":127,"language":35,"meta":36,"style":36},"# 私がやったこと\ncurl -sL \"URL\" | grep -i \"og:\"\n# → 出力なし（と判断）\n",[38,129,130,135,167],{"__ignoreMap":36},[41,131,132],{"class":43,"line":44},[41,133,134],{"class":47},"# 私がやったこと\n",[41,136,137,139,142,144,147,150,154,157,160,162,165],{"class":43,"line":51},[41,138,55],{"class":54},[41,140,141],{"class":58}," -sL",[41,143,63],{"class":62},[41,145,146],{"class":66},"URL",[41,148,149],{"class":62},"\"",[41,151,153],{"class":152},"stQ0i"," |",[41,155,156],{"class":54}," grep",[41,158,159],{"class":58}," -i",[41,161,63],{"class":62},[41,163,164],{"class":66},"og:",[41,166,70],{"class":62},[41,168,169],{"class":43,"line":73},[41,170,171],{"class":47},"# → 出力なし（と判断）\n",[18,173,174,176],{},[113,175,115],{},":",[178,179,180,184],"ul",{},[181,182,183],"li",{},"grepの出力が正しく取得できていない可能性を検証しなかった",[181,185,186,187,190],{},"別の方法（ブラウザのDevTools、",[38,188,189],{},"head -100","で確認など）を試さなかった",[26,192,194],{"id":193},"_3-早合点による誤った結論","3. 早合点による誤った結論",[18,196,197],{},"Web検索で「Dynamic OG images are not compatible with static sites」という情報を見つけ、これが原因だと早合点した。",[18,199,200,176],{},[113,201,115],{},[178,203,204,207],{},[181,205,206],{},"本番環境で実際に動いているかを先に確認すべきだった",[181,208,209],{},"v2時代の古い情報とv5の現在の仕様を区別しなかった",[14,211,213],{"id":212},"codexの正しい調査手順","Codexの正しい調査手順",[18,215,216],{},"Codexは以下を確認した：",[218,219,220,234,243,253],"ol",{},[181,221,222,225,226,229,230,233],{},[113,223,224],{},"本番HTMLの確認",": ",[38,227,228],{},"https://log.eurekapu.com/"," で ",[38,231,232],{},"og:image"," メタタグが存在することを確認",[181,235,236,225,239,242],{},[113,237,238],{},"正しいOG画像URLの確認",[38,240,241],{},"/__og-image__/static/og.png"," が200で取得できることを確認",[181,244,245,248,249,252],{},[113,246,247],{},"複数ページで確認",": トップページと記事ページ（",[38,250,251],{},"/blog/nvidia-moat","）の両方を確認",[181,254,255,258],{},[113,256,257],{},"結論",": 「サーバー側のOGPメタと画像生成は今は動いている」",[14,260,261],{"id":261},"今後の調査手順チェックリスト",[18,263,264],{},"OGP/SEO関連の問題を調査する際：",[26,266,268],{"id":267},"step-1-本番環境の実態確認最優先","Step 1: 本番環境の実態確認（最優先）",[31,270,272],{"className":33,"code":271,"language":35,"meta":36,"style":36},"# HTMLソースでメタタグ確認\ncurl -sL \"https://example.com/page\" | grep -E 'property=\"og:|name=\"twitter:' | head -20\n\n# OG画像URLを直接確認（複数パターン試す）\ncurl -sI \"https://example.com/__og-image__/static/og.png\"\ncurl -sI \"https://example.com/__og-image__/image/og.png\"\ncurl -sI \"https://example.com/__og-image__/image/page-path/og.png\"\n",[38,273,274,279,316,320,325,338,351],{"__ignoreMap":36},[41,275,276],{"class":43,"line":44},[41,277,278],{"class":47},"# HTMLソースでメタタグ確認\n",[41,280,281,283,285,287,290,292,294,296,299,302,305,308,310,313],{"class":43,"line":51},[41,282,55],{"class":54},[41,284,141],{"class":58},[41,286,63],{"class":62},[41,288,289],{"class":66},"https://example.com/page",[41,291,149],{"class":62},[41,293,153],{"class":152},[41,295,156],{"class":54},[41,297,298],{"class":58}," -E",[41,300,301],{"class":62}," '",[41,303,304],{"class":66},"property=\"og:|name=\"twitter:",[41,306,307],{"class":62},"'",[41,309,153],{"class":152},[41,311,312],{"class":54}," head",[41,314,315],{"class":58}," -20\n",[41,317,318],{"class":43,"line":73},[41,319,83],{"emptyLinePlaceholder":82},[41,321,322],{"class":43,"line":79},[41,323,324],{"class":47},"# OG画像URLを直接確認（複数パターン試す）\n",[41,326,327,329,331,333,336],{"class":43,"line":86},[41,328,55],{"class":54},[41,330,59],{"class":58},[41,332,63],{"class":62},[41,334,335],{"class":66},"https://example.com/__og-image__/static/og.png",[41,337,70],{"class":62},[41,339,340,342,344,346,349],{"class":43,"line":92},[41,341,55],{"class":54},[41,343,59],{"class":58},[41,345,63],{"class":62},[41,347,348],{"class":66},"https://example.com/__og-image__/image/og.png",[41,350,70],{"class":62},[41,352,353,355,357,359,362],{"class":43,"line":106},[41,354,55],{"class":54},[41,356,59],{"class":58},[41,358,63],{"class":62},[41,360,361],{"class":66},"https://example.com/__og-image__/image/page-path/og.png",[41,363,70],{"class":62},[26,365,367],{"id":366},"step-2-複数ページで確認","Step 2: 複数ページで確認",[178,369,370,373,376],{},[181,371,372],{},"トップページ",[181,374,375],{},"記事/コンテンツページ",[181,377,378],{},"動的ルートページ",[26,380,382],{"id":381},"step-3-ogp確認ツールのキャッシュを考慮","Step 3: OGP確認ツールのキャッシュを考慮",[178,384,385,388,391],{},[181,386,387],{},"初回失敗時は数分待って再試行",[181,389,390],{},"Facebook/Twitterのクローラキャッシュは時間がかかる",[181,392,393,400],{},[394,395,399],"a",{"href":396,"rel":397},"https://developers.facebook.com/tools/debug/",[398],"nofollow","Facebook Sharing Debugger"," でキャッシュクリア可能",[26,402,404],{"id":403},"step-4-推測で結論を出さない","Step 4: 推測で結論を出さない",[178,406,407,410,413],{},[181,408,409],{},"「動いていない」と結論付ける前に、必ず本番で実データを確認",[181,411,412],{},"Web検索の情報はバージョンや日付を確認",[181,414,415],{},"不確かな場合は「確認が必要」と伝える",[14,417,418],{"id":418},"教訓",[420,421,422],"blockquote",{},[18,423,424],{},[113,425,426],{},"「動いていない」と主張する前に、本番環境で実際に確認せよ",[18,428,429],{},"調査の順序：",[218,431,432],{},[181,433,434],{},"本番で事実確認 → 2. 原因の仮説立て → 3. 修正提案",[18,436,437],{},"この順序を逆にすると、存在しない問題を解決しようとして時間を無駄にする。",[14,439,440],{"id":440},"関連ファイル",[178,442,443,450],{},[181,444,445,446],{},"OGP実装ガイド: ",[394,447,449],{"href":448},"/ogp-image-generation-plan","/2025-12-23/ogp-image-generation-plan",[181,451,452,453],{},"実装進捗ログ: ",[394,454,456],{"href":455},"/og-image-implementation-log","/2025-12-23/og-image-implementation-log",[458,459,460],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}",{"title":36,"searchDepth":51,"depth":51,"links":462},[463,464,469,470,476,477],{"id":16,"depth":51,"text":16},{"id":23,"depth":51,"text":24,"children":465},[466,467,468],{"id":28,"depth":73,"text":29},{"id":123,"depth":73,"text":124},{"id":193,"depth":73,"text":194},{"id":212,"depth":51,"text":213},{"id":261,"depth":51,"text":261,"children":471},[472,473,474,475],{"id":267,"depth":73,"text":268},{"id":366,"depth":73,"text":367},{"id":381,"depth":73,"text":382},{"id":403,"depth":73,"text":404},{"id":418,"depth":51,"text":418},{"id":440,"depth":51,"text":440},"personal",null,"nuxt-og-image の動作確認における調査ミスと、正しい確認手順のドキュメント","md",{},"/ogp-investigation-learnings",false,"2025-12-23T00:00:00.000Z",{"title":5,"description":480},"2025-12/2025-12-23/ogp-investigation-learnings",[489,490,491,492],"OGP","デバッグ","反省","調査手法","JQLHrEQKvfJS4FxFLCqiWa8HfkG4eAUorkWZ8hwR85A",[],[496,500,504,508,512],{"title":497,"path":498,"publishedAt":499},"移行サイトのSEO・AI-SEO改善を1日で回した — 画像altを480件、記事の要点を203本、OG画像を署名付きに","/wordpress-nuxt-ai-seo-phase-c","2026-07-27T00:00:00.000Z",{"title":501,"path":502,"publishedAt":503},"Nuxtで画像が表示されないバグを追ったら、ビルド除外の設計に行き着いた","/content-visibility-and-image-path-fixes","2026-07-24T00:00:00.000Z",{"title":505,"path":506,"publishedAt":507},"自作Chrome拡張のXの動画ダウンロードボタンが消えた——DOM構造の変化を追って復活させた","/x-video-download-button-fix","2026-07-05T00:00:00.000Z",{"title":509,"path":510,"publishedAt":511},"Chrome DevTools MCP の autoConnect が今度は『chrome://inspect の許可ボタンを押しても永久に噛み合わない』で詰まった","/chrome-devtools-mcp-autoconnect-stuck-again","2026-06-25T00:00:00.000Z",{"title":513,"path":514,"publishedAt":515},"tool-call-malformedの真因は巨大ファイルではなかった—計測で思い込みを覆した日","/tool-call-malformed-daily-ops","2026-05-30T00:00:00.000Z","https://log.eurekapu.com/og/blog/ogp-investigation-learnings.png?v=2025-12-23T00%3A00%3A00.000Z&title=OGP%E8%AA%BF%E6%9F%BB%E3%81%AE%E5%8F%8D%E7%9C%81%E3%81%A8%E5%AD%A6%E3%81%B3&author=Kei%20Komatsu&sig=49d99db1e33e8bb3",1785654689125]