見出しは文書の構造
H1・H2・H3は、ページに表示されるコンテンツを整理するHTMLの見出し要素です。H1は通常、ページのメインの主題を示します。H2は主要な問いを区切り、H3は、次の階層を設けることで意味が加わるときに、1つのH2を細分します。見出しがあると、読者はざっと読んだり、支援技術で移動したり、セクション同士の関係を理解したりできます。見出しは、数のノルマでも、フォントサイズの設定でも、検索順位の約束でもありません。
狙うクエリをそのまま繰り返さなくても、H1は十分に機能します。より確かなテストは、見出しがその下のコンテンツを正確に説明しているかどうかです。Googleは検索結果を作るときに、表示されている見出しを使うことがありますが、タイトルリンクとスニペットは複数のページのシグナルから生成されます。見出しのマークアップで、内容の曖昧なページや誤解を招くセクションを補うことはできません。
ページのアウトラインを決める
スタイルを付ける前に、コンテンツの並びを下書きします。用語集の項目なら、テンプレートが用意するH1で用語名を示し、H2で定義、仕組み、実装、誤りを扱い、H3で1つの仕組みの詳細を分けます。商品カテゴリなら、H1にカテゴリ名を置き、H2で選び方の基準、バリエーション、配送の情報を説明します。正しいアウトラインは、タスクに沿って決まるものであり、決まったSEOのレシピではありません。
| 見出しレベル | 使う場面 | 使ってはいけない場面 |
|---|---|---|
| H1 | ページの中心となる主題 | コンテンツと無関係な、飾りのスローガン |
| H2 | ページの主要な問い、または段階 | 段落に入れるべき1文 |
| H3 | H2のトピックの本当の細分 | 階層のない、見た目だけのインデント |
| スタイルを付けたテキスト | ラベルや軽い強調 | ラベルを新しい文書のセクションに見せかけること |
具体例です。サーバーサイドレンダリングのページなら、H2は「SSRが返すもの」「SSRで配信経路が変わる場合」「レスポンスのテスト方法」にできます。テストのH2の下には、H3で最初のHTML、HTTPステータス、ハイドレーションを区別して置けます。無関係なH2の下に「SSR」という別のH3を置くと、アウトラインが破綻します。
レンダリング後の階層を確認する
- ページをアウトラインの順に読み、各見出しが導入する問いを言葉にします。
- CMSの編集画面だけでなく、レンダリング後のDOMで、実際のh1・h2・h3要素を確認します。
- テンプレートのナビゲーション、カード、フッターのラベルが、誤解を招く見出しの並びを作っていないか確認します。
- アコーディオンや動的に挿入されるコンテンツを、クローラーとユーザーが受け取るレンダリング後の状態で確認します。
- スクリーンリーダーの見出し一覧やブラウザーのアクセシビリティツリーで、飛ばされたラベルや重複したラベルを見つけます。
測定できる基準は構造に関するものです。各見出しに関連するセクションがあり、階層が誤った親子関係を示しておらず、アウトラインとして読んでもメインコンテンツを理解できることです。H1が1つ、H2が複数で、H3が1つもないページでも、まったく問題ありません。
見出しのよくある誤り
よくある誤りは、見た目の大きさで見出しを選び、キーワードを狙ってすべてのH2に同じフレーズを使うことです。再利用できる別々のコンポーネントにH1を複数作り、組み上がったページを確認しないのも、よくある誤りです。コンテンツ監査では、空の見出し、重複した見出し、次のコンテンツとつながっていない見出し、無関係な本文を隠すために使われている見出しを検出結果として挙げます。