見出しタグ（Headings）
文書の論理構造を整理し、ユーザーと検索エンジンに内容を伝える重要な要素。
見出しタグ＝文書の「目次」を作る
見出しタグ（Heading tags）は、ページ全体の構造を示す「骨組み」です。`
` から `` まで6段階のレベルがあり、数字が小さいほど重要度が高くなります。
これらは単に「文字を大きく表示するため」のタグではありません。検索エンジン、スクリーンリーダー、ブラウザの拡張機能など、あらゆるツールがこの見出し構造を頼りに、ページの内容を理解します。
正しい階層構造の例
<h1>ページ全体のタイトル</h1>
<h2>第1章：導入</h2>
<h3>1.1 背景</h3>
<h3>1.2 目的</h3>
<h2>第2章：本論</h2>
<h3>2.1 方法</h3>
<h2>第1章：導入</h2>
<h3>1.1 背景</h3>
<h3>1.2 目的</h3>
<h2>第2章：本論</h2>
<h3>2.1 方法</h3>
SEOにおける決定的な重要性
Googleなどの検索エンジンは、見出しタグを「そのページが何について書かれているか」を判断する最重要シグナルの一つとして扱います。
- h1タグ: ページの主題を表す最も重要な見出し。ページ内に1つだけ配置するのが一般的です。
- h2〜h6タグ: セクションごとの小見出し。適切なキーワードを含めることで、検索順位の向上につながります。
また、検索結果ページに「ジャンプリンク」として見出しが表示されることもあり、クリック率（CTR）の向上にも寄与します。
✅ 見出しタグのベストプラクティス
- 階層を飛ばさない: h1 → h3 のように中間を飛ばすのは避けましょう。必ず順番に使います（h1 → h2 → h3）。
- h1は1ページに1つ: 複数のh1があっても技術的には問題ありませんが、SEO的には1つに絞るのが推奨されます。
- 意味のあるテキストを: 「詳細はこちら」ではなく、「料金プランの詳細」のように具体的に書きましょう。
- キーワードを自然に: 無理に詰め込むのではなく、読者にとって自然な文章の中にキーワードを含めます。
デザインと見出しの分離
「この文字を大きくしたいから h2 を使おう」という発想は、HTMLの本質を誤解しています。見た目の大きさはCSSで自由に変更できます。
例えば、h3タグをh1よりも大きく表示することも、CSSを使えば簡単です。重要なのは「文書構造としての正しさ」であり、デザインは後から調整すべきものです。
アクセシビリティへの貢献
視覚障害のある方が使うスクリーンリーダーには、「見出しだけを読み上げる」機能があります。これにより、ページ全体を聞かなくても、どこに何が書いてあるかを素早く把握できます。
正しい見出し構造は、すべての人にとって使いやすいWebサイトを作るための基礎です。
まとめ
見出しタグは「文字を装飾する道具」ではなく、「情報を整理する道具」です。正しい階層構造を意識することで、SEO、アクセシビリティ、保守性のすべてが向上します。