見出し構造チェッカー
見出し構造チェッカー：HTMLからH1〜H6のアウトラインを表示 | We.Inc
HTMLを貼り付けると、H1からH6までのアウトラインがツリーで表示され、レベルの飛び、H1の欠落や重複、空の見出しが指摘されます。ブラウザー内で動作し、何もアップロードされません。
見出し構造チェッカー
ページのHTMLを貼り付けると、このチェッカーがh1からh6まで、role="heading"を持つ要素も含めて、見出しのアウトラインをインデント付きのツリーで描きます。h2の次にh4が来るようなレベルの飛び、h1の欠落や重複、空の見出しを指摘します。解析はブラウザー内で行われるため、コードがあなたの端末の外に出ることはありません。
チェッカーが指摘する項目
- レベルの飛び
- h2の直後にh4
- スクリーンリーダーの利用者が現在地を見失う
- h1がない
- ページがh2から始まる
- ページに主見出しがない
- h1が複数ある
- ロゴとタイトルの両方がh1
- ページの名前を示すh1は1つにすべき
- 空の見出し
- <h3></h3>、またはアイコンだけ
- 読み上げられても中身がない
- 最初の見出しがh1ではない
- h1より前にh3
- アウトラインが途中から始まる
見出しは、スクリーンリーダーを使う人がページをざっと読むための手段であり、検索エンジンにコンテンツの構造を伝えるものでもあります。ページやコンポーネントのHTMLを、ソース表示やエディターから下に貼り付けると、アウトラインが表示され、問題がある行にそれぞれ印が付きます。
- ソース表示などでページのHTMLをコピーし、ボックスに貼り付けます。サンプルを読み込んでチェックの様子を見ることもできます。
- チェッカーは、h1からh6までのすべての要素と、role="heading"を持つすべての要素を文書の順に読み取ります。
- ツリーを読みます。インデントはレベルに従い、警告は原因となった見出しの横に表示されます。
- マークアップを修正してもう一度貼り付け、必要ならきれいになったアウトラインをプレーンテキストとしてコピーし、資料に使えます。
- 見出しのレベルは構造のために、サイズはCSSで決めましょう。カード内でh2が大きすぎるなら、h4に替えるのではなくスタイルを変えます。
- 複数レベルを一気に上に戻るのは問題ありません。新しいセクションが始まるときは、h4の次にh2が来てもかまいません。
- ロゴがh1としてふさわしいことはまずありません。h1は、そのページの名前を示すタイトルに使いましょう。
- シングルページアプリでは、ソース表示だと空の骨組みしか見えないことがあるので、ブラウザーの要素インスペクターからコピーしたレンダリング後のHTMLを貼り付けましょう。
- チェッカーはマークアップを読むだけでスタイルシートを適用しないため、CSSで隠したテキストもここではカウントされます。
よくある質問
見出しのレベルを飛ばすのは間違いですか？
W3Cの見出しチュートリアルでは、例えばh2の直後にh4を置くような階層の飛ばしは混乱を招くので、できるだけ避けるべきだとしています。セクションを閉じてh4からh2へ戻るような上方向の移動は普通のことです。
1つのページにh1を複数置けますか？
HTMLでは許されていますが、MDNはページの内容を表すh1を1つにすることを推奨しています。各セクションをh1から始め直せるという古い考え方は、ブラウザーが使っていない文書アウトラインのアルゴリズムに依存していたため、このツールは2つ目のh1に警告を出します。
なぜURLを入力するだけではダメなのですか？
これはブラウザー内で動く静的なページで、ブラウザーはあるサイトが別のサイトのHTMLを読み取ることをブロックします。コードを貼り付ける方式なら、ツールは正確かつプライベートに動作し、何もどこにも送信されません。
role="heading"にも対応していますか？
はい。role="heading"を持つ要素は、そのaria-levelのレベルとして読み取ります。aria-levelがない場合、ブラウザーはレベル2として扱うため、チェッカーはh2として扱い、属性の欠落を指摘します。
見出しはSEOに影響しますか？
見出しは、検索エンジンを含むすべての読み手にコンテンツの構造を伝えます。順位について約束はしませんが、わかりやすいアウトラインは何よりもまず人にとって価値があります。
アウトラインの読み方
- 各行が1つの見出しで、レベルに応じてインデントされています。健全なアウトラインは目次のように読めます。タイトルが1つ、h2のセクションがいくつか、必要に応じてその下にh3のサブセクションがあります。
- 警告は、その前の見出しではなく、飛びが起きた見出しを指しています。上から順に直しましょう。最初のほうでレベルを1つ間違えると、その下のすべてがおかしく見えることがあるからです。
よくある原因
- レベルの飛びのほとんどは、デフォルトのサイズで見出しを選んだことが原因です。テンプレートやページビルダーは、フッターやカードでよくこれをやってしまいます。構造の異なるページで再利用されたコンポーネントが原因のこともあり、だからこそコンポーネントの見出しレベルは設定で変えられるようにしておく価値があります。
- 空の見出しは、たいていaltテキストのないアイコンや画像を囲んでいます。画像にaltテキストを付けるか、目に見えるテキストを追加するか、見出しを使うのをやめましょう。
見出しレベルの早見表
Webページでの6つのレベルの一般的な使い方
崩れたアウトラインを直す
修正前：サイズでレベルを選んでいる
h4がちょうどよいサイズに見えたため、カードのタイトルがh2からh4に飛んでいます。
修正後：正しいレベルを使い、CSSでスタイルを変更
カードには1つ下のレベルであるh3を使い、クラスで小さく表示しています。
見出しをチェックする
下にHTMLを貼り付けてください。ブラウザー内で読み取られ、アップロードされることはありません。
チェックするHTML
サンプルを読み込む
クリア
アウトライン
見出し{n}件、警告{w}件
見出しが見つかりません。ページのHTMLを貼り付けるとアウトラインが表示されます。
問題は見つかりませんでした。
（空）
role=heading
アウトラインをコピー
h{from}からh{to}に飛んでいます
ページに別のh1があります
空の見出しです
最初の見出しがh1ではありません
ページにh1がありません
aria-levelのないrole=heading（レベル2として読み取り）
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る