HTML見出しタグの階層構造とSEO・アクセシビリティにおける最適解
Webサイトの構造を設計する際、最も基本的でありながら、最も誤解されやすい要素の一つが「見出しタグ（h1〜h6）」です。単に文字を大きくしたり太くしたりするための装飾ツールとして捉えているエンジニアは少なくありませんが、これは大きな間違いです。見出しタグは、文書の「骨格」を定義し、検索エンジン（SEO）と支援技術（アクセシビリティ）に対して、ページの内容を正しく伝えるためのセマンティック（意味論的）な道標です。本稿では、プロフェッショナルな視点から、見出しタグの正しい使い分けと設計哲学について深く掘り下げます。
見出しタグの役割とセマンティクスの重要性
HTMLの見出しタグ（h1、h2、h3、h4、h5、h6）は、Webページ内のコンテンツの階層を示すために使用されます。ブラウザはこれらのタグを読み取ることで、ページがどのような構成になっているかを理解します。
検索エンジン（Googleなど）のクローラーは、ページをインデックスする際、見出しタグを重要なキーワードの抽出元として利用します。また、スクリーンリーダーを使用する視覚障害のあるユーザーにとって、見出しは「ページの内容を素早く把握し、目的のセクションへジャンプするための目次」として機能します。
つまり、見出しタグを正しく使用することは、SEO対策の基本であると同時に、Webアクセシビリティ向上の必須条件なのです。見出しの順序を無視して、視覚的なフォントサイズだけでタグを選定すると、文書構造が崩壊し、検索エンジンからの評価低下や、ユーザー体験の著しい悪化を招きます。
h1からh6までの使い分けのルール
見出しタグには「論理的な階層」が存在します。この階層を維持することが最も重要です。
1. h1タグ：そのページの「メインテーマ」を示します。原則として1ページにつき1回のみ使用することが推奨されます（HTML5以降、複数使用も仕様上は可能ですが、SEOと管理の観点から1つに絞るのが定石です）。
2. h2タグ：h1で示したメインテーマを構成する「主要な大見出し」です。ページの構成案（アウトライン）を考える際の、第1階層の目次項目に相当します。
3. h3タグ：h2のセクション内をさらに細分化した「中見出し」です。
4. h4〜h6タグ：h3以下の階層で、さらに詳細な説明が必要な場合に使用します。実務においてh4以降を使用することは稀ですが、書籍のような複雑なドキュメントや大規模な技術記事では使用されます。
重要な点は「階層を飛ばさないこと」です。h2の直後に突然h4が現れるような構造は、論理的な欠落とみなされます。目次のインデントと同じように、順序立てて配置することが求められます。
実務における実装パターンと注意点
実際のプロジェクトでは、デザインカンプ（FigmaやAdobe XD）の視覚的なサイズと、HTMLの論理構造が一致しないことが多々あります。例えば、「デザイン上は小さく表示したいが、文書構造上はh2であるべき」というケースです。
このような場合、CSSを使用して見た目を制御し、HTML構造は論理的に保つのがプロの作法です。
/* CSSによるデザインの制御例 */
.h2-style-small {
font-size: 16px;
font-weight: bold;
/* 必要に応じてスタイルを調整 */
}
/* HTML構造 */
Webサイト制作の極意
プロジェクトの計画
要件定義の重要性
スケジュール管理
デザインの原則
アクセシビリティの確保
このように、見た目の装飾と構造の定義を完全に分離させることで、SEOへの悪影響を避けつつ、デザインの要件を満たすことが可能です。
誤った見出しタグの使用例と改善策
現場でよく見かけるアンチパターンをいくつか挙げます。
1. 装飾目的での使用：単に文字を太くしたいからといって、無意味にhタグを使うケース。これは「pタグ」＋「CSSのfont-weight」で行うべきです。
2. 階層の逆転：h1の次にh3を配置するケース。アウトラインが崩れ、クローラーが正しく情報を解釈できなくなります。
3. リンクやボタンへの使用：ナビゲーションやボタンのラベルに見出しタグを使うケース。見出しはあくまで「コンテンツのタイトル」であるべきです。
4. キーワードの詰め込み：SEOのためにhタグの中にキーワードを過剰に詰め込む行為。これはスパム判定のリスクがあり、現在のGoogleアルゴリズムではマイナスに働く可能性が高いです。
アクセシビリティ向上のためのベストプラクティス
スクリーンリーダーのユーザーは、見出しタグを抽出して移動する機能を使います。したがって、見出しの文言だけで「そのセクションに何が書かれているか」が分からなければなりません。「詳細はこちら」「重要」といった抽象的な見出しではなく、具体的かつ簡潔な記述を心がけてください。
また、WAI-ARIA（Accessible Rich Internet Applications）の役割を併用することで、さらに構造を明確にすることも可能です。例えば、`main`タグや`section`タグと見出しタグを組み合わせることで、文書のコンテキストがより強固になります。
まとめ：見出しタグはWebの「背骨」である
見出しタグの使い方は、単なるコーディングの作法を超え、Webサイトの「論理的整合性」を問う非常に重要な要素です。
1. h1はページに1つ、メインテーマを簡潔に表現する。
2. h2〜h6は論理的な階層構造を守り、階層を飛ばさない。
3. デザイン（CSS）と構造（HTML）を混同せず、見た目はCSSで制御する。
4. スクリーンリーダー利用者を意識し、見出しだけで内容が伝わるテキストにする。
これらの原則を遵守することは、SEOにおいてGoogleから正当な評価を受けるための最短距離であり、同時にあらゆるユーザーにとって使いやすいWebサイトを作るための誠実なアプローチです。フロントエンドエンジニアとして、常に「この見出しは論理的に正しいか？」と自問自答しながらマークアップを行うことが、品質の高いWebサイトを構築する鍵となります。技術の進化とともにHTMLの仕様は変化しますが、文書構造を論理的に記述するという本質は、今後も変わることはありません。この基本を徹底することが、シニアエンジニアとしての第一歩と言えるでしょう。