HTML
見出しタグ
見出しタグは、ページの構造を明確にし、SEO とアクセシビリティの向上において重要な役割を果たします。
適切な見出しの階層構造は、検索エンジンがコンテンツを理解しやすくし、スクリーンリーダーなどの支援技術を使用するユーザーにとってもナビゲーションが容易になります。
基本原則
階層構造の維持
- 見出しは階層構造を厳密に守る（h1 → h2 → h3 → h4 → h5 → h6）
- 階層の飛び越し（h2 → h4 など）は禁止
- 階層の逆転（h3 → h2 など）は禁止
- 論理的な文書構造を反映させる
セマンティックな使用
- 見出しタグはスタイリング目的ではなく、構造的な意味に基づいて使用する
- フォントサイズを変更したいだけの場合は CSS を使用する
- 見出しとして機能しない文字列には見出しタグを使用しない
h1 タグの使用ガイドライン
基本ルール
- 1 ページにつき 1 つの h1 タグを使用する
- h1 はページの主要なトピックを表す
- ページタイトルに相当する内容をマークアップする
トップページでの対応
コンテンツ内に適切な h1 が配置できない場合は、以下の方法を検討する：
- サイトの主要な目的やメッセージを h1 として配置
- やむを得ない場合は CSS で視覚的に非表示にする（ただし、できる限り避ける）
<!-- トップページの例 -->
<h1>革新的なWebソリューションを提供する○○株式会社</h1>
実装例
<!-- ✅ 良い例 -->
<h1>HTMLガイドライン - 見出しタグの使用方法</h1>
<!-- ❌ 悪い例 -->
<h1>会社名</h1>
<!-- ロゴ/サイト名での使用 -->
<h1>お知らせ</h1>
<h1>最新情報</h1>
<!-- 複数のh1 -->
h2〜h6 タグの使用ガイドライン
階層構造の例
<h1>メインタイトル</h1>
<h2>大カテゴリ</h2>
<h3>中カテゴリ</h3>
<h4>小カテゴリ</h4>
<h5>詳細項目</h5>
<h6>補足項目</h6>
実装例
<article>
<h1>Webアクセシビリティの基礎知識</h1>
<h2>アクセシビリティとは</h2>
<p>アクセシビリティの定義と重要性について説明します。</p>
<h2>WCAG 2.1ガイドライン</h2>
<h3>知覚可能（Perceivable）</h3>
<h4>テキストの代替</h4>
<p>画像には適切な代替テキストを提供する必要があります。</p>
<h4>時間ベースメディア</h4>
<p>動画や音声コンテンツの代替手段について解説します。</p>
<h3>操作可能（Operable）</h3>
<h4>キーボードアクセシブル</h4>
<p>すべての機能はキーボードで操作可能である必要があります。</p>
</article>
SEO 対策
SEO に効果的な見出しの書き方:
- h1 にはページの主要キーワードを含める
- h2〜h3 には関連キーワードや共起語を適切に配置
- 自然な文章として読めることを優先する
<!-- ✅ SEOに効果的な例 -->
<h1>東京でおすすめのレストラン15選【2024年最新版】</h1>
<h2>ジャンル別おすすめレストラン</h2>
<h3>和食レストラン</h3>
<h4>築地市場周辺の寿司店</h4>
<!-- ❌ SEO効果が低い例 -->
<h1>お店紹介</h1>
<h2>その他</h2>
<h3>詳細</h3>