HTMLソースやMarkdown原稿を貼り付けるだけで、見出し階層をツリー構造で可視化し、 H1の重複や見出しレベルの飛びなど、SEO・アクセシビリティ上の問題点を自動で洗い出します。
入力モード
見出しアウトライン
見出しを含むHTMLまたはMarkdownを貼り付けると、
ここにアウトラインが表示されます。
検出された問題(0件)
テキストを入力すると問題の有無を判定します。
構造の健全性
未入力
テキストを入力すると自動で判定されます。
レベル別の見出し数
H1
0
H2
0
H3
0
H4
0
H5
0
H6
0
CHECKPOINT
良好な見出し構造の目安は「H1が1つだけ」「レベルが1段階ずつ下がっている」「空の見出しがない」の3点です。この3つを満たせば、多くの場合SEO・アクセシビリティ上の基本的な問題は解消されます。
見出し構造チェッカーとは?H1〜H6の階層をアウトライン表示で確認できるツール
見出し構造チェッカーは、HTMLソースやMarkdown原稿に含まれるH1〜H6の見出しタグ(見出し記法)を解析し、見出しの階層構造をツリー形式でひと目で確認できる無料ツールです。
執筆時には気づきにくい「H1の重複」「見出しレベルの飛び(H2の次にH4など)」「空の見出し」といった、SEOやアクセシビリティに影響しうる構造上の問題を自動で検出し、該当箇所を行番号つきで一覧表示します。
公開前のブログ記事やLPのHTML、Markdown原稿をそのまま貼り付けるだけで確認できるため、 CMSに入稿する前のセルフチェックや、既存ページの構造レビューにもご活用いただけます。
こんなシーンで便利です
記事公開前の最終チェックに
ブログ記事やLPのHTMLソースを公開前に貼り付けて、見出し階層に不自然な飛びや重複がないかを最終確認する用途に。
Markdown原稿の構成チェックに
見出し記法(# 〜 ######)で執筆した原稿をそのまま貼り付けて、公開用に変換する前に見出し構成を確認したい場合に使えます。
既存ページのリライト・構造改善時に
検索順位が伸び悩んでいる既存記事のHTMLを取得して貼り付け、見出し構造に問題がないかを見直す際の診断ツールとして活用できます。
ライターへの執筆ルール共有・教育に
見出しレベルのルールに不慣れなライターの原稿をチェックし、どこにどのような問題があるかを具体的に指摘するための確認ツールとして利用できます。
使い方は簡単 4ステップ
- 「HTMLモード」または「Markdownモード」を選択します。
- チェックしたいHTMLソース、またはMarkdown原稿をテキストエリアに貼り付けます。
- 見出し階層がツリー形式で自動的に表示されます。
- 「検出された問題」の一覧を確認し、行番号をもとに該当箇所を修正します。
※貼り付けた内容は自動で解析され、送信ボタンなどの操作は不要です。内容はブラウザ内のみで処理されます。
ご利用時の注意点
- 本ツールは見出しタグ(見出し記法)の階層構造のみを解析します。デザイン上の文字サイズや、実際にブラウザでどう見えるかまでは判定しません。
- HTMLモードは h1〜h6 タグを、Markdownモードは行頭の # 〜 ###### を対象に解析します。両方が混在するソースは想定していません。
- 見出し内にHTMLタグや装飾が含まれる場合、タグを除いたテキスト部分のみを抽出して表示します。
- 完全無料・安全:入力したHTML・Markdown原稿は外部に送信されない、通信が発生しないブラウザ完結型の設計です。
見出しレベル別の役割と使用目安
H1〜H6は数字が小さいほど上位の見出しを表します。それぞれの一般的な役割の目安は以下の通りです。
| 見出しレベル | 役割の目安 | 1ページあたりの目安個数 |
|---|---|---|
| H1 | ページ全体の主題(記事タイトルなど) | 1個 |
| H2 | ページ内の主要セクションの見出し | 複数可 |
| H3 | H2セクション内の詳細項目の見出し | 複数可 |
| H4 | H3のさらに詳細な補足見出し | 必要な場合のみ |
| H5・H6 | 非常に細かい階層区分(使用頻度は低い) | 必要な場合のみ |
※見出しは上位のレベルを飛ばさず、H1→H2→H3のように1段階ずつ下げていくことが、SEOとアクセシビリティの両面で推奨されています。
見出し構造がSEO・アクセシビリティに与える影響
見出し構造を整えることが、検索エンジンとユーザー双方にとってなぜ重要なのかを解説します。
結論:見出し構造は「文書のアウトライン」そのもの
H1〜H6の見出しタグは、単なる文字装飾ではなく文書の論理的な構造(アウトライン)を表すマークアップです。
検索エンジンのクローラーやスクリーンリーダーは、この階層構造を手がかりにページの主題や情報の重要度を把握するため、見た目ではなく構造として正しい見出しを設置することが、SEOとアクセシビリティの両方において基本になります。
H1の重複・見出しレベルの飛びが引き起こす問題
1ページに複数のH1が存在すると、ページの主題が何であるかが検索エンジンに伝わりにくくなります。
また、H2の次に突然H4が現れるといった見出しレベルの飛びは、スクリーンリーダー利用者が見出し一覧から文書構造を把握する際に、中間の階層が抜け落ちているように感じられ、情報の関係性が正しく伝わらない原因になります。
見た目のスタイル調整に見出しタグを使うことの弊害
「ここだけ少し文字を小さくしたい」という理由でH2の代わりにH4を使うなど、見た目の調整目的で見出しレベルを選ぶと、文書としての階層構造が崩れてしまいます。
文字サイズや太さの調整はCSSで行い、見出しタグの選択はあくまで文書構造上の重要度に基づいて行うことが推奨されます。
見出し構造を整えるための実務的なチェックポイント
公開前には、「H1は1つだけか」「見出しレベルが1段階ずつ下がっているか」「空の見出しがないか」の3点を最低限確認すると、多くの構造上の問題を防げます。
本ツールでこれらを自動チェックし、該当箇所を修正してから公開することで、検索エンジンにもユーザーにも伝わりやすいページ構造を維持できます。
よくある失敗と対策
デザインの都合でH1を複数設置してしまう
ページ内の目立たせたい箇所すべてにH1タグを使ってしまい、検索エンジンに対してページの主題があいまいに伝わってしまう失敗です。
💡 対策・解決策を見る▼
文字サイズ調整のためにH3やH4を本来の階層と関係なく使う
デザイン上「ここだけ少し目立たせたい」という理由で、本来H2であるべき見出しをH4にしてしまい、文書構造上の階層が崩れてしまう失敗です。
💡 対策・解決策を見る▼
見出しタグだけ設置して中身のテキストを入れ忘れる
テンプレートやCMSの都合で見出しタグの枠だけが残り、中にテキストが入っていない「空の見出し」がそのまま公開されてしまう失敗です。
💡 対策・解決策を見る▼
最初の見出しがH1ではなくH2やH3から始まっている
テンプレートの構成上、ページ内の最初の見出しがH2やH3から始まってしまい、ページ全体の主題を示すH1が存在しないまま公開されてしまう失敗です。
💡 対策・解決策を見る▼
よくある質問(FAQ)
Q.見出し構造(H1〜H6)はSEOにどのような影響がありますか
A. 検索エンジンは見出しタグ(H1〜H6)の階層構造をもとにページの主題や情報の重要度を把握します。H1が重複していたり、見出しレベルが不自然に飛んでいたりすると、ページの構成が正しく伝わらず、検索エンジンによる内容理解やクローラビリティに悪影響を与える可能性があります。
Q.H1見出しは1ページに1つだけにするべきですか
A. 一般的には、H1はそのページの主題を示す見出しとして1ページに1つだけ設置することが推奨されています。H1が複数存在すると、ページの主題があいまいになり、検索エンジンやスクリーンリーダーの利用者がページの構造を把握しにくくなります。
Q.見出しレベルが飛ぶ(H2の次にH4になる等)とどのような問題がありますか
A. 見出しレベルの飛びは、見た目の文字サイズを調整する目的でH3やH5が使われた場合によく発生します。文書構造上は「大見出しの下に中見出しがなく、いきなり小見出しがある」状態になり、スクリーンリーダー利用者が文書構造を音声で把握する際に混乱を招くほか、検索エンジンにも正しい階層が伝わりにくくなります。
Q.HTMLとMarkdownの両方をチェックできますか
A. はい、対応しています。「HTMLモード」ではh1〜h6タグを含むHTMLソースを、「Markdownモード」では # 〜 ###### で始まる見出し記法を、それぞれ解析してアウトライン表示と問題の検出を行います。
Q.入力したHTMLやMarkdownの内容が外部に送信されることはありませんか
A. ありません。本ツールはすべての解析処理をブラウザ内のJavaScriptだけで実行する完全ローカル処理型です。入力内容が外部サーバーへ送信されることは一切なく、ページを閉じれば内容は破棄されます。
Q.見出しに装飾目的で見出しタグを使っている場合も検出されますか
A. 本ツールは見出しタグ・見出し記法そのものの階層構造のみを解析します。文字サイズや太さといった見た目の装飾目的でH3やH4が本来の階層を無視して使われている場合、多くのケースでは「レベルの飛び」として検出されるため、装飾目的の誤用に気づくきっかけとしてもご活用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。