見出しタグ(h1〜h6)は、ページの中身を構造化して、検索エンジンや読み上げソフト、そして利用者に伝えるためのものです。SEO設計で意識すべきポイントは3つ。h1はページの主題を表し、h2以降は内容のグループを示し、装飾目的では使わない。階層を飛ばさず、一段ずつ下りていく構造にする。見出しのテキストは、そのセクションの中身が具体的に分かる言葉にする。この3つを守ると、ページの構造が機械にも人にも正しく伝わります。
h1はページの主題を表す。h2以降は内容のグループを示す(装飾目的では使わない)
見出しタグには、それぞれ役割があります。h1はページ全体を代表する見出しで、1ページに1つが原則。そのページが何のページかを端的に表すテキストを置きます。
h2はページの中の大セクション、h3はh2の中の小セクション、h4はh3のさらに中——というように、内容のグループを示すために使います。階層は、内容の構造そのもの、つまり「親(大)→子(中)→孫(小)」の関係を反映したものになります。
ここで気をつけるのは、「文字を大きく目立たせたい」「強調したい」という装飾目的で見出しタグを使わないこと。h2は内容のセクション区切りであって、目立たせるためのフォントサイズ調整ではありません。装飾目的で見出しを使うと、検索エンジンが読み取る構造がねじれて、読み上げソフトを使う人もページの全体像をつかめなくなります。強調や大きな表示は、見出しタグではなくCSSのスタイル指定で行います。
実務上は、各見出しを置くときに「これはこのセクションの内容を代表するテキストか、それともただ目立たせたいだけか」を一度確認します。後者なら、見出しタグではなくCSSで表現します。
見出しの階層は飛ばさない(h1→h2→h3の順で組む)
見出しは、レベルを飛ばさないようにします。h1の直後にh3、h2の直後にh4——というスキップは避けて、一段ずつ下りていく構造にします。
なぜ階層を飛ばすと良くないかというと、見出しが内容の構造を表すものだからです。h1→h3にスキップすると、「h2のセクションは存在しないのに、その下の階層がある」という、論理的に成り立たない構造になります。検索エンジンはこの構造からページの内容の関係を読み取ろうとしているので、構造が壊れると正しく伝わりません。読み上げソフトを使う人にとっても、見出しの階層はページ内を移動するための手がかりで、階層が乱れていると目的の場所にたどり着けません。
実務上は、ページ全体の見出しだけを上から並べて見て、レベルを飛ばしている箇所がないかを確認します。飛び越しがあれば、見出しレベルを直すか、間の階層を補います。
見出しのテキストは、そのセクションの中身が分かる言葉にする
見出しに使うテキストは、そのセクションに何が書いてあるかが、見出しだけで具体的に分かる言葉にします。
「ポイント」「ご紹介」「特徴」「サービス内容」のような抽象的な見出しは、それだけ読んでもセクションの中身が見えません。例えば「ポイント」よりも「料金が変動する3つの要因」、「ご紹介」よりも「サービスの流れ:相談から納品まで」のように、具体的に書きます。
理想は、ページ全体の見出しを順に並べたとき、それがページの目次として読めることです。見出しを上から並べただけで「このページには何が書いてあって、どう展開していくか」が見える状態は、検索エンジンにとっても利用者にとっても、ページの構造が伝わる状態です。
実務上は、書いた見出しを上から並べて読み、「これだけで、このページが何のページで、どう構成されているかが伝わるか」を確認します。伝わらなければ、各見出しのテキストを具体的に書き直します。
まとめ
見出しタグ(h1〜h6)は、ページの中身を構造化して伝えるためのもの。SEO設計で意識すべきポイントは3つです。
- h1はページの主題を表す。h2以降は内容のグループを示す(装飾目的では使わない)
- 見出しの階層は飛ばさない(h1→h2→h3の順で組む)
- 見出しのテキストは、そのセクションの中身が分かる言葉にする
見出しは、装飾ではなく構造です。3つの原則を守ると、検索エンジンにも、読み上げソフトを使う人にも、ページを読みに来た人にも、ページの中身が正しく伝わります。