メタタグの確認方法
どこで見るかで答えが変わる

確認する場所は3つ：それぞれ見えるものが違う

確かめる順番：5つの手順

1. 1. ソース表示で、元のHTMLにタグがあるかを見る

   Windowsは Ctrl+U、Macは Command+Option+U でソースを開き、ページ内検索で <title、name="description"、name="robots"、rel="canonical"、og: を順に探します。canonicalとrobotsは、ここに無ければ「無い」と判断します。

2. 2. 開発者ツールのコンソールで、描画後のタグを一覧にする

   下のコードをコンソールに貼ると、描画後のページにあるtitle・meta・canonicalを一覧にし、それぞれが <head> と <body> のどちらにあるかも出します。手順1と食い違うタグは、JavaScriptで足されたか書き換えられたものです。

3. 3. SNSのクローラーとして取ったHTMLと比べる

   OGPはSNSのクローラーが読みます。ターミナルで User-Agent をFacebookのクローラー（facebookexternalhit）にして取ると、SNSに渡るHTMLが確かめられます。フレームワークによっては、ブラウザ向けと中身が変わります。

4. 4. URL検査で、canonicalがGoogleに届いているかを見る

   Search ConsoleのURL検査で「ユーザーが指定した正規URL」を見ます。ページにcanonicalを書いたのにここが空なら、Googleは受け取れていません。「Googleが選択した正規URL」が別のURLなら、Googleは別のページを正規と判断しています。

5. 5. チェックツールで、抜けと文字数をまとめて確かめる

   最後にツールで全体を見ます。ツールはサーバーが返した元のHTMLを読むので、手順1と同じ立場の結果です。描画後にしか無いタグは「無い」と出ます。それが正しい指摘か、手順2と比べて判断します。

手順2：コンソールに貼るコード

[...document.querySelectorAll('title, meta[name], meta[property], link[rel="canonical"]')]
  .map((el) => ({
    where: document.head.contains(el) ? 'head' : 'body',
    tag: el.getAttribute('name') || el.getAttribute('property') || el.getAttribute('rel') || 'title',
    value: el.getAttribute('content') || el.getAttribute('href') || el.textContent,
  }))

手順3：SNSのクローラーとして取る

curl -s -A "facebookexternalhit/1.1" https://example.com/ | grep -oE '<(title|meta|link)[^>]*(og:|description|canonical|robots)[^>]*>|<title>[^<]*'

curlの結果の読み方（scriptの中の文字に引っかかる落とし穴）はSPAはAIクローラーに読まれているかに、URL検査の状態の見分け方は検出 - インデックス未登録の原因と対処にまとめています。

タグごとの合格ラインと、直すべき状態

直す順番は、検索に出るかどうかを決めるものから。robots（noindex）とcanonicalが先、titleとdescriptionが次、OGPとviewportがその次です。titleを整えても、Googleは本文の見出しやog:titleなども材料にして検索結果のタイトルを作るため、書いたとおりに出るとは限りません。

書き方そのものはtitleタグの書き方・meta descriptionの書き方・canonicalタグの設定・OGPタグの設定方法で解説しています。この記事は「入っているか、正しく届いているか」の確かめ方に絞っています。

落とし穴1：メタタグが <body> に出ている（このサイトで実測）

Next.js 15.2以降は、動的に描画するページで、メタタグの準備を待たずにページを送り始め、できたメタタグを <body> の末尾へ流し込みます（ストリーミング）。JavaScriptを動かせないクローラーだけには、従来どおり <head> に入れて返します。このサイトで動的に描画している5ページを2026年10月23日に確かめたところ、メタタグが <body> 側に出ていたのは診断結果の共有ページだけでした。そのページを、取り方を変えて取得した結果です。

さらにブラウザで描画し終えた後のページを開発者ツールで見ても、4つのタグは <body> に残ったままで、<head> へは移っていませんでした。Next.jsのドキュメントは「Googlebotなど、JavaScriptを実行してDOM全体を見るボットは正しく解釈することを確認した」としています。一方でGoogleは、canonicalを <head> 内でしか受け付けないと明記しています。

判断はこうです。2つの公式の説明が食い違う箇所に、検索に出るかを左右するcanonicalを置いておく理由はありません。このサイトでは同じ日に、Next.jsの設定（htmlLimitedBots）で、すべての取得にメタタグを <head> で返すよう変えました。影響するのは動的なページだけで、静的に作っている記事やツールのページは、もともと <head> に入っていました。

自分のサイトがNext.jsなら、ブラウザのUser-Agentとfacebookexternalhitでソースを取り比べてください。<title> の位置が違えば、このストリーミングが起きています。

落とし穴2：ツールがSVGアイコンのtitleを拾う

ロゴやアイコンをSVGで埋め込むと、読み上げ用に <title> 要素を入れることがあります。ブラウザがページのtitleとして使うのは、SVGの外にある最初の <title> です。ところがタグ名だけで探すツールは、SVGの中のtitleまで拾い、ページのtitleと取り違えます。

ディレベースのチェックにもこの取り違えがありました。最後に見つけた <title> で上書きしていたため、本文にSVGのtitleがあると、そちらを報告していました。2026年10月23日に、本番と同じCloudflare Workersの環境で次の3つのHTMLを読ませ、修正前後を比べています。

ツールでtitleが見覚えのない短い語（サイト名やロゴの名前など）になっていたら、まずソース表示で、SVGの中に <title> が無いかを確かめてください。ツールの指摘より、手順1の元のHTMLが正です。

落とし穴3：開発者ツールで見えたから大丈夫、と判断する

タグマネージャーやJavaScriptでcanonicalやdescriptionを足しているサイトでは、開発者ツールには正しく出ます。けれど元のHTMLには無いか、別の値が入っています。SNSのクローラーはJavaScriptを動かさないため、OGPを後から足しても共有時の表示には反映されません。

Googleは、元のHTMLでcanonicalを設定できない場合は、元のHTMLには入れずJavaScriptだけで設定するよう案内しています。元のHTMLとJavaScriptで違う値を出すのがいちばん悪い状態です。手順1と手順2の結果が一致しているかを、合否の基準にしてください。

関連ツール

• OGP確認・メタタグチェック｜title・description・OGP・canonicalを一括で確認
• SEOスコアチェック｜noindexの警告と、メタタグ以外の項目もまとめて診断
• 構造化データチェック｜JSON-LDの記述を確認

出典（2026年10月23日に確認）

• Google検索セントラル — Googleがサポートするmetaタグ（meta keywordsは不使用）
• Google検索セントラル — 正規URLの指定（canonicalは <head> 内のみ受け付け）
• Google検索セントラル — 検索結果のタイトルリンク（作成に使う情報）
• Search Console ヘルプ — URL検査ツール（ユーザーが指定した正規URL）
• Next.js — generateMetadata（ストリーミングメタデータ・v15.2.0〜）