見出し構造アナライザーとは?

見出し構造アナライザーはHTMLを解析し、H1〜H6の階層をツリーとして可視化します。スキップされた見出しレベル、重複するH1タグ、SEOランキングやスクリーンリーダーのナビゲーションに悪影響を与える構造的な問題を表示します。

HTML文書全体や単一の記事を貼り付けると、アナライザーはh1からh6までのタグを文書順に抽出します。レベルの飛び(h2からいきなりh4)、h1が複数ある、見出しが空、スクリプト内に隠れている、といった問題を指摘します。ツリー表示で壊れた階層が一目で分かります。

使い方

  1. ステップ1 — HTML ソース、または見出しに # を使った Markdown を貼り付けます。
  2. ステップ2 — ツールがすべての見出しタグを抽出し、レベルインジケーター付きのネストされたツリーとして表示します。
  3. ステップ3 — レベルのスキップやH1の欠如などのフラグ付き問題を確認し、分析レポートをエクスポートします。

使用するタイミング

  • ブログ記事を公開する前に、スクリーンリーダーやクローラーが見出し構造を綺麗に読めるかを点検するとき。
  • 競合記事の構造を調べ、ページ内で話題をどう整理しているかを把握するとき。
  • WordPressやCMSテーマが本文の外側のサイドバーに余計なh2を埋め込むバグを発見するとき。

結果

ブログ記事のHTMLを貼り付けて、サイドバーがH2からH4へ一気に飛んでいないか確認しましょう。この抜けはスクリーンリーダーや検索クローラーを混乱させます。

よくある質問

見出しレベルの飛びは本当にSEOに悪影響?
間接的にはあります。Google自身は見出しの順序はランキング要因ではないと言っていますが、飛びはスクリーンリーダーを混乱させ、可読性を下げ、構造の悪いページのサインになりがちです。読みやすいページの方がインテント一致や滞在時間で良い傾向があります。
1ページにh1が複数あるのは良くない?
HTML5は技術的にはsectioning要素内で複数h1を許容しますが、多くのCMSテンプレートやSEOツールは依然としてページ名を表す単一h1を想定しています。h1が2つあるのはたいていテンプレートのバグかウィジェットの誤用です。
隠されている要素や折りたたまれた要素の見出しもカウントされる?
されます。HTMLに存在する限り、クローラーもスクリーンリーダーも読み取ります。アコーディオン、モバイル専用セクション、タブはどれも画面に表示されていなくてもアウトラインに含まれます。
AMPやMDX、JSXのソースでも動く?
ツールは生のHTMLを解析するので、AMPはそのまま動きます。MDXやJSXはレンダー結果(DevTools > Elements > bodyのouterHTMLをコピー)を貼り付けてください。Headingのようなコンポーネントタグは、実際のh1からh6にレンダリングされるまでパーサーから見えません。
レポートをコンテンツ監査用のスプレッドシートに書き出すには?
「レポートを書き出す」ボタンで貼り付け用のプレーンテキストアウトラインをダウンロードできます。ツリーを直接コピーしてもOKです。各見出しのレベル・テキスト・検出された問題が列挙されており、編集担当への共有にそのまま使えます。

関連ツール