og:imageとJSON-LD imageをページソースで確認する方法

"GSCで画像404が出たとき、記事ページのog:imageやJSON-LDのimageが何を指しているかをブラウザで確認する手順を解説します。Ctrl+UとF12の2通りの方法を紹介します。"

GSCで /images/blog/... の404エラーが出たとき、「実際にどのURLが指定されているのか」をブラウザで直接確認するのが最短の切り分け方法です。

og:image や JSON-LD の "image" の値が意図したパスになっていなければ、画像ファイルの配置を直す前に設定側の問題を疑う必要があります。

今日の結論

ページソース（Ctrl+U）から og:image を検索するのが手軽で確実

F12 → Elements タブからも同様にメタタグを確認できる

確認したURLを新しいタブで開いてHTTP 200かどうかを目視する

404のままなら imageBasePath と public/images/ の実ファイルを照合する

確認手順

Ctrl+U でページソースを開く（推奨）

本番の /blog/<slug> をブラウザで開く
Ctrl + U でページソースを表示する（Macは Command + U）
Ctrl + F で og:image を検索し、content="..." のURLを確認する
そのURLを新しいタブで開き、HTTP 200 で画像が表示されるか確認する
必要なら同じ手順で "image" を検索し、JSON-LDの値も確認する

F12 → Elements から確認する（補足）

Ctrl+U が使えない環境（一部ブラウザ設定やCMS）では DevTools を使います。

F12 で DevTools を開く
Elements タブ → <head> の中を展開する
<meta property="og:image" を探してURLを確認する

404が続く場合の照合先

確認したURLが404のままの場合、以下の2点を照合します。

確認先	内容
`posts.ts` の `imageBasePath`	記事に設定している画像ベースパスが正しいか
`public/images/` の実ファイル	該当パスにファイルが存在するか

imageBasePath の命名規則や配置ルールは関連記事にまとめています。

まとめ

og:image の確認は「ページソースを開いて検索する」だけで完了します。GSCのエラーと実際の配信URLが一致しているかを先に目視確認することで、ファイル配置の修正かコード設定の修正かを素早く切り分けられます。

画像404のGSCエラーは記事URLでインデックスリクエストするの手順3でも、この確認方法を使います。

免責: 本記事は2026年6月5日の実務確認をもとに執筆しています。ブラウザのショートカットやDevToolsのUIはバージョンによって異なる場合があります。Next.jsのimageBasePath仕様も変更されることがあるため、重要な判断は公式ドキュメントでご確認ください。