結論から言えば、複数のH1があるだけで直ちにHTMLの誤りになるとは限りません。しかし、一般的な記事やサービスページでは、ページの主題を表すH1を1つにし、その下をH2、H3の順に組み立てる方法が最も管理しやすく、読者にも構造が伝わりやすい設計です。
大切なのは「H1は何個までか」だけを気にすることではありません。各見出しが内容の階層を正しく表し、見出しだけを拾い読みしてもページの流れが分かる状態を目指します。
H1タグとは何か
H1は、HTMLの見出し要素であるH1〜H6のうち、最上位の見出しです。通常は記事名、商品名、サービス名など、そのページ全体の主題を表します。H2は主題を分ける大きな節、H3はH2の内容をさらに分ける小さな節として使います。
見出しタグは文字を大きくするための装飾ではありません。文章の構造を機械が判別できる形で示すための要素です。見た目の大きさだけを変えたい場合は、見出しレベルを変えるのではなくCSSで調整します。
仕様上の可否と実務上の推奨を分けて考える
| 確認したいこと | 考え方 |
|---|---|
| 複数のH1はHTML違反か | 複数あることだけを理由に、すべて誤りとは言えません。現行のHTML Standardには、複数のトップレベル見出しを持つ文書例もあります。 |
| 一般的なページではどうするか | ページ全体を代表するH1を1つ置き、H2以下で内容を分ける構造が分かりやすく、実装や運用でも扱いやすい方法です。 |
| H1を1つにすれば順位が上がるか | 見出しの個数だけで検索順位の向上を保証することはできません。主題が伝わる文言と、内容に沿った論理的な階層を優先します。 |
| 最も重要な確認点は何か | 見出しが内容の構造を表していること、レベルを不自然に飛ばしていないこと、見出し文だけでも各節の目的が分かることです。 |
現行のHTML StandardはH1をトップレベルの見出し、H2をその下位の見出しとして扱う考え方を示しています。一方、MDNの見出し要素の解説は、一般的なベストプラクティスとして1ページに1つのH1を使い、見出しレベルを順序立てる方法を案内しています。
したがって、「仕様で絶対に1つと決められている」ではなく、「多くのページでは1つにするのが明快で安全」と理解するのが適切です。
なぜ複数のH1をめぐって説明が変わったのか
以前のHTML5では、<section>や<article>などのセクショニング要素ごとにH1を置き、階層を文書のアウトラインとして解釈する考え方が広く紹介されました。この経緯から、「各セクションをH1で始めてもよい」という説明が残っていることがあります。
現在の実務では、セクショニング要素に任せて見出しの深さを暗黙に決めるより、H1、H2、H3の番号で階層を明示する方が意図を共有しやすくなります。制作担当者が変わっても構造を追いやすく、テーマやテンプレートの改修時にも見出しレベルを確認しやすいためです。
H1からH6までの使い分け
| 要素 | 主な役割 | 使用例 |
|---|---|---|
| H1 | ページ全体の主題 | 記事タイトル、商品名、サービス名 |
| H2 | 主題を構成する主要な節 | 特徴、使い方、料金、よくある質問 |
| H3 | H2の節をさらに分ける項目 | 手順ごとの説明、機能別の詳細 |
| H4〜H6 | より深い下位項目 | 長い仕様書や複雑なマニュアルの小区分 |
見出しレベルは、文字サイズではなく内容の親子関係で決めます。H2の節の中に小見出しが必要ならH3を使い、次の主要な節に移るときはH2に戻ります。H2の直下を、見た目の都合だけでH4にするような飛ばし方は避けます。
分かりやすい見出し構造の例
基本形
<h1>初心者向けコーヒー豆の選び方</h1>
<h2>豆を選ぶ3つの基準</h2>
<h3>焙煎度で選ぶ</h3>
<h3>産地で選ぶ</h3>
<h2>保存方法</h2>
<h3>開封前の保存</h3>
<h3>開封後の保存</h3>この例では、H1がページ全体の主題を示し、H2が主要な話題、H3が各話題の内訳を示しています。見出しだけを順に読んでも、何をどの順番で説明するページなのか把握できます。
避けたい形
<h1>コーヒー豆</h1>
<h4>選び方</h4>
<h2>詳しくはこちら</h2>この例には、H1からH4へレベルが飛んでいることと、「詳しくはこちら」だけでは節の内容が分からないことという2つの問題があります。見出しを「豆を選ぶ基準」「保存方法」のように具体化し、内容の親子関係に合うレベルへ直します。
アクセシビリティで重要なのは階層と見出し文
スクリーンリーダーなどの支援技術には、ページ内の見出しを一覧表示したり、次の見出しへ移動したりする機能があります。そのため、見出しが論理的な順序で並び、各見出しが節の内容を説明していると、画面全体を目で確認しにくい利用者も目的の情報へ移動しやすくなります。
W3CのWeb Accessibility Initiativeによる見出しの解説でも、見出しがページ構造を伝えることと、可能な限り見出しレベルを飛ばさないことが案内されています。
ただし、「スクリーンリーダーは必ずH1を最初に読み上げる」とは限りません。利用者はページの先頭から読むほか、ランドマークやリンク、見出し一覧など複数の方法で移動できます。H1の個数だけでなく、ページ全体の構造と見出し文の明確さを確認することが重要です。確認方法をさらに知りたい場合は、サイト内の見出し構造の作り方と確認方法も参考になります。
SEOでは個数より内容との一致を優先する
H1はページの主題を示す手がかりの一つです。ただし、H1を1つに変更しただけで検索順位が上がる、離脱率が下がる、滞在時間が延びるといった結果までは断定できません。
SEOの観点では、次の点を優先します。
- ページの内容を具体的に要約するH1にする
- 読者が検索した目的と、ページで答える内容を一致させる
- キーワードを不自然に繰り返さない
- H2とH3で内容を論理的に分ける
- 見出しの直後に、その見出しへの答えや説明を置く
H1は検索エンジンだけに向けて作るものではありません。ページを開いた読者が「ここに知りたい情報がある」と判断できる、簡潔で具体的な表現にします。
WordPressでよくある注意点
- 本文にH1を重ねない：多くのWordPressテーマは投稿タイトルをH1として出力します。記事本文はH2から始めるのが基本です。
- ロゴやサイト名を確認する：テーマによっては、サイト名と投稿タイトルの両方がH1になる場合があります。編集画面だけでなく、公開ページのHTMLも確認します。
- 見た目だけで判断しない：エディター上で大きく見える文字が、必ずしもH1とは限りません。ブラウザーの開発者ツールや見出し確認機能で要素を確認します。
- 部品を含めて確認する：ヘッダー、サイドバー、関連記事、フッターなど、本文外の見出しもページ全体の階層に含まれます。
公開前の確認手順
- 公開ページでH1の数と文言を確認する
- H1がページ全体の主題を具体的に表しているか確認する
- H2、H3の順序が内容の親子関係と一致しているか確認する
- 節が続いている途中で見出しレベルを飛ばしていないか確認する
- 見出しだけを一覧にしても、記事の流れが理解できるか確認する
- 文字を大きくする目的だけで見出しタグを使っていないか確認する
H1タグに関するよくある質問
複数のH1があるページは、すぐ修正すべきですか
まず、それぞれのH1が何を表しているかを確認します。一般的な記事や固定ページで同じ階層のH1が重複しているなら、ページの主題を表すものを1つ残し、残りをH2以下へ整理すると構造が明確になります。複数の記事を一覧表示する特殊なテンプレートなどでは、ページ全体の設計を確認して判断します。
H1とtitle要素は同じものですか
役割は異なります。H1はページ本文に表示される最上位の見出しです。<title>はブラウザーのタブや検索結果のタイトル候補などに使われる、文書のメタデータです。内容の主題はそろえつつ、それぞれの表示場所に合う文言にします。
sectionやarticleの中はH1で始めますか
自動的にH1で始める必要はありません。ページ全体のH1の下にある主要な節ならH2、その中の小節ならH3というように、実際の階層に合う見出しレベルを明示します。
まとめ
複数のH1は、それだけで一律にHTML違反とは言えません。一方、一般的な記事やサービスページでは、主題を表すH1を1つにし、H2、H3へ順序立てる構造が、読者、支援技術、制作担当者のいずれにとっても理解しやすい方法です。
個数だけを機械的に直すのではなく、見出しが内容の親子関係を表しているか、見出し文だけで節の目的が分かるか、公開ページ全体で階層が崩れていないかを確認してください。