HTML見出しタグH1〜H6の使い方：SEO完全ガイド

HTMLの見出しは、<h1>から<h6>までの6段階です。SEOでH1が重要なことは多くの人が知っています。一方で、H2やH3以下の役割、検索エンジンのクローラーとの関係、階層が崩れるとSEOにもユーザーにも悪影響が出る理由は、あまり理解されていません。

Googleのクローラーにとって、見出しタグは文書の目次です。ロボットは見出しからページのテーマと下位テーマを読み取り、検索クエリに対する文書の関連性を判断します。階層の抜け、H1の重複、見た目だけのために使った見出しがあると、この地図が壊れます。

zoom_in

H1〜H6の見出しタグとは

H1〜H6は、見出しを6段階の重要度で示すHTMLの要素です。H1がページのメイン見出しで、H6が最も深い階層の小見出しです。各レベルは、クローラーに「このセクションの内容はこのテーマについてです」と伝えます。

見た目の装飾（<b>、<big>、CSSクラス）と違い、見出しタグは意味を持ちます。ブラウザーはH1をデフォルトで大きな太字にしますが、サイズは副次的な結果にすぎません。CSSでH6をH1より大きく見せることもできますが、意味は変わりません。検索エンジンやスクリーンリーダーにとって、主見出しはあくまでH1です。

階層：H1、H2、H3とそれ以下

正しい見出し階層は、本の目次と同じ構造です。書名がH1、章がH2、章の中の節がH3、その下の細かい項目がH4以降にあたります。この構造を崩すのは、本から章を破り取ってページをシャッフルするようなものです。

zoom_in

<!-- Correct hierarchy -->
<h1>Guide to Welders' Protective Clothing</h1>

  <h2>Types of protective clothing</h2>
    <h3>Fire-resistant suits</h3>
    <h3>Protective masks</h3>

  <h2>Regulatory standards</h2>
    <h3>EN ISO 11612</h3>
    <h3>ANSI/ISEA standards</h3>

  <h2>How to choose</h2>

<!-- Wrong hierarchy (skipped levels) -->
<h1>Guide to protective clothing</h1>
  <h3>Fire-resistant suits</h3>  <!-- H2 skipped! -->
    <h5>Standards</h5>           <!-- H4 skipped! -->

H4〜H6が必要になる場面

H4、H5、H6を使う場面は多くありません。4階層以上の入れ子が必要な大規模な技術文書に限られます。たとえば法律の契約書、APIドキュメント、医療プロトコルです。ブログ記事やランディングページなら、H1〜H3の3階層で足ります。

見出しがSEOに与える影響

見出しタグはどれも関連性のシグナルです。レベルが上がるほどシグナルは強く、H1はH2より、H2はH3より重みがあります。ただし、どの見出しも、文書が検索クエリにどれだけ合っているかの評価に関わります。

Googleは見出しを使って強調スニペットを作ります。ユーザーが質問すると、H2またはH3がクエリとよく一致し、直後のコンテンツブロックが直接の答えになっているページを探します。よく練ったH2見出しは、検索結果の「0位」を狙える無料の候補です。

見出しは内部リンクにも関わります。リンク先ページのH2に合わせたアンカーテキストは、関連性を強めます。サイトマップにも関わります。CMSによっては見出しにid属性を自動で付けるため、ページ内の深いセクションを指すアンカーURLができ、XMLサイトマップから直接参照できます。

アクセシビリティとスクリーンリーダー

スクリーンリーダーは視覚に障害のあるユーザー向けの支援ソフトで、ページ内の移動に見出しタグを主に使います。ユーザーはHキーで見出し間を移動し、ページの目次を耳で確認します。見出し階層が崩れていると、この移動が役に立たなくなります。

WCAG 2.1の達成基準1.3.1「情報及び関係性」では、見出しはスタイルではなく、意味を持つHTMLタグで実装することが求められます。font-size: 24px; font-weight: boldを指定したボタンは、スクリーンリーダーにとって見出しではありません。<h2>なら見出しです。この差は大きなものです。

見出しを使うときのルール

実務のほとんどの場面は、次の5つのルールでカバーできます。

見出し構造でよくある間違い

これらのエラーは、小さなブログから大規模なプラットフォームまで、ほとんどのサイトの監査で見つかります。

• ページにH1が複数ある。大きなブロックをすべてH1で囲むビジュアルビルダーが原因になりがちです。Screaming Frogの「H1」→「Multiple」で見つかります。修正は、H1を1つ残し、残りをH2またはスタイルを付けた<div>に置き換えます。
• 見出しを意味ではなく装飾に使っている。デザイナーが「ちょうどいいサイズに見える」という理由でH2とH3を飛ばしてH4を選んだ例です。クローラーにはH1→H4→H1→H4と見え、構造ではなく混乱が伝わります。
• H1がない。リニューアルやCMS移行のあと、テンプレートからH1が消えることがあります。H1のないページは、ページ内で最も重要な関連性のシグナルを失います。
• 全ページのH1がサイト名になっている。 CMSのテンプレートが会社名をH1に一括で出力しています。全ページが同じH1になり、サイト全体で重複し、関連性はゼロになります。
• 入れ子で階層を飛ばしている。 H1→H3（H2がない）、H2→H4（H3がない）などです。スクリーンリーダーはエラーを通知し、クローラーは下位セクションの文脈を見失います。
• 見出しタグの代わりに<p>や<div>を使っている。見た目は見出しでも、検索エンジンやスクリーンリーダーには見出しとして認識されません。古いテンプレートによくあります。
• 見出しが長すぎる。 3文あるH2は見出しではなく段落です。見出しは一目で読み切れる長さにします。目安は4〜12語です。

<!-- BAD: typical template with errors -->
<div class="title">Workwear catalogue</div>    <!-- not H1! -->
<h1>Acme Workwear Ltd</h1>                     <!-- H1 = company name -->
<h1>Winter workwear</h1>                       <!-- second H1 -->
<h3>Fire-resistant suits</h3>                  <!-- H2 skipped -->

<!-- GOOD: correct structure -->
<h1>Winter welders' workwear catalogue</h1>
  <h2>Fire-resistant suits</h2>
    <h3>Suits to EN ISO 11612</h3>
    <h3>Suits to ANSI Z49.1</h3>
  <h2>Protective masks and shields</h2>

見出し構造を監査するツール

// Quick heading hierarchy check in the browser console
const headings = $$('h1,h2,h3,h4,h5,h6');
const report = headings.map(h => ({
  tag: h.tagName,
  text: h.textContent.trim().slice(0, 60)
}));
console.table(report);

// How many H1s are on the page?
const h1Count = $$('h1').length;
console.log(`H1 count: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ERROR');

見出し構造のチェックリスト

H1

• サイトの全ページにH1がちょうど1つある
• H1にそのページのメインのターゲットクエリが含まれている
• H1がtitleタグと意味で一致している（表現は違ってよい）
• H1がテンプレートで重複せず、サイト全体で一意になっている
• H1が空ではなく、画像だけでもなく、CSSで非表示にもなっていない

H2

• H2がH1の次に、レベルを飛ばさず続いている
• H2がそれぞれ、ページの異なる主要セクションを表している
• H2に副次的なクエリとLSI用語が自然に（詰め込まずに）入っている
• H2の書き方が強調スニペットの足がかりになる
• 見た目のためだけのH2がなく、新しいテーマのセクションが始まる場所だけにある

H3〜H6

• H3がH2の中に、H4がH3の中に入っている（下方向にレベルを飛ばしていない）
• H4〜H6は、深い入れ子が本当に必要なときだけ使っている
• 見た目のサイズを理由に、H2の代わりにH3〜H6を使っていない
• 見出しだけをざっと読むと、論理的な目次として読める

アクセシビリティ

• HeadingsMapまたはWAVE拡張機能で見出しの順序を確認した
• すべての見出しが、スタイルを付けたdivではなく、意味を持つHTMLタグで実装されている
• 非表示の見出しがない（display: none、visibility: hidden）
• すべての見出しに意味のある内容があり、空の見出しやプレースホルダーがない

FAQ

監査やコンテンツチームのワークショップでよく出る、見出し構造についての質問をまとめました。