h1〜h6の目次ツリー抽出とSEO構造チェック
記事やWebページのHTMLソースを貼り付けるだけで、h1〜h6の見出しタグを抽出し、階層の深さに応じてインデントを付けた目次ツリーとして表示する無料ツールです。ページ全体の論理構造を一目で把握でき、見出しの入れ子が適切かどうかをSEOやアクセシビリティの観点から素早く点検できます。インストールや会員登録は不要で、解析はすべてお使いの端末内で完結します。
使い方はかんたんです。上部のテキストエリアにHTMLソース（ページ全体でも本文の一部でも可）を貼り付けると、自動的に見出しが抽出されてアウトラインが表示されます。入力が空のままでもサンプルのHTMLで表示するので、動作をすぐに確認できます。「目次をコピー」を押すと、インデント付きのテキスト目次をクリップボードにコピーできます。
各見出しについて、タグの種類（h1〜h6）、見出しのテキスト、空白を除いた文字数を表示します。ページ全体では、見出しの総数、h1の数、最も深い階層のレベル、検出した問題の数をまとめて確認できます。見出しが長すぎたり短すぎたりする箇所や、階層が深くなりすぎている構成の発見に役立ちます。
本ツールは、見出し構造でよく問題になる次のポイントを自動で診断し、該当する場合に警告として表示します。
| チェック項目 | 内容 | なぜ問題か |
|---|---|---|
| h1の欠落 | ページにh1が1つも無い | ページの主題が伝わりにくくなる |
| h1の複数 | h1が2つ以上ある | 主題が分散し、構造が曖昧になりやすい |
| レベルのスキップ | h2の次にh4など段を飛ばす | 階層が不明瞭になり読み上げ順序が乱れる |
| 空の見出し | テキストが空の見出しタグ | 目次に意味を持たない項目が生まれる |
見出しのレベルは、文字の見た目の大きさではなく文書の論理的な階層で選ぶことが大切です。大見出しの下に中見出し、その下に小見出しという入れ子を1段ずつ深くしていくことで、検索エンジンや支援技術がページの構造を正しく理解できます。デザイン上の理由でサイズを変えたい場合は、見出しレベルを変えるのではなくCSSで調整するのが望ましい方法です。
貼り付けたHTMLは、ブラウザに組み込まれたDOMParserで文字列として解析します。DOMParserが生成する文書は表示中のページに接続されないため、HTMLに含まれるスクリプトや画像・外部リソースの読み込みは実行・発火しません。取り出すのは見出しのテキストだけで、外部への通信も行わないため、他人のページのソースでも安心して構造を確認できます。