SEO 見出しのベストプラクティス

見出しが重要な理由

見出し（H1、H2、H3など）は、ページ構造をユーザー、支援技術、クローラーに伝えるセマンティックなHTML要素です。単一の魔法のランキングシグナルとして機能するわけではなく、代わりに検索エンジンとAIモデルがトピックの階層を理解するのを助け、それが間接的に関連性やスニペット、検索結果のAI Overviews生成に影響することがあります。

見出しを評価する際は、クロール、インデックス化、ランキングという3つの概念を区別してください。見出しはインデックス化時のコンテンツ解釈やページのユーザーに対する有用性に影響しますが、クロール頻度を直接制御したり検索順位の上昇を保証したりするわけではありません。

H1 のベストプラクティス

H1はページの明確な人間向けタイトルやトピック表現として使ってください。H1はユーザーと機械の両方にページの主要な主題を要約するべきです。例：<h1>How to choose a summer jacket</h1> — これはユーザーの意図に合った簡潔で説明的なH1です。

技術的な注意点：

• HTML5ではセクションや ARIA ランドマークが適切なら複数のH1を許容しますが、多くのCMSやアクセシビリティガイドラインは明確さのためにページごとに1つの目立つH1を推奨します。

• H1はレンダリングされたDOMで表示されるようにしてください（ユーザーやクローラーが見えないスクリプト生成マークアップに唯一のH1を置かない）。サーバー生成のHTMLやプログレッシブエンハンスメントを使い、view-sourceや初回レンダリングにH1が含まれるようにしましょう。

構造化とスキャンのためのH2・H3の使い方

H2とH3はコンテンツの章や節の目印と考えてください。これにより読者はスキャンしやすくなり、検索エンジンが小セクションを検索クエリやフィーチャードスニペット候補と関連付けるのに役立ちます。良いセクション見出し：

• 短く説明的である;

• 直後の内容を反映している;

• キーワード詰め込みの語句ではなく自然な言葉を使う。

見出しと AI Overviews

Search Generative Experience と AI Overviews が検索結果で一般的になっているため、明確で構造化された見出しは小セクションが回答スニペットとして使われる可能性を高めます。AIは見出しに「How to X」や「Benefits of Y」のような短いQ&A形式を好みます。ユーザーのクエリに対応しやすいためです。

読者と検索に役立つ見出しの書き方

見出しの実用的なライティングのヒント：

• トピックを先に置く。見出しは最も重要な語を先頭にし、ユーザーと機械が主題をすぐに把握できるようにする。

• 見出しはスキャンしやすく保つ。長文より短いフレーズを目指す。文が必要な場合でも明確な目印として機能するようにする。

• 内容を反映する。見出しは節の内容を正確に表すべきで、誤解を招く見出しはユーザー満足度を下げ、離脱シグナルを増やす。

キーワードと見出し

意図に合う場所では見出しに主要な語を自然に含めるが、詰め込みは避ける。見出しにキーワードがあるとインデックス時のトピック関連性を示すのに役立つ一方、過剰最適化は可読性とユーザー信頼を損なう。

実装チェックリストと検証

公開前に、HTMLとレンダリング結果の両方を確認する簡単なチェックリストを実行してください。

チェックリスト：

• view-source：初期のHTMLレスポンスにH1が存在し、クライアント側でのみ注入されていないことを確認するJavaScript。

• Rendered DOM：Chrome DevTools → Elements を開いて、見出しがアクセシブルなDOMに表示され、CSS（display:none）で隠されていないか、スクリプトで削除されていないかを確認する。

• モバイルレンダリング：Googleがモバイル版を主要な基準として使用するためクロールとインデックス化かつ Googlebot Smartphone がデフォルトでクロールするため（since July 2024）、モバイルのビューポートで見出しを確認してください。

• HTTPチェック：curlを使ってヘッダーと取得したHTMLを検査する。特定のユーザーエージェントとして完全なHTMLを取得するには curl -A "Googlebot Smartphone" を使うhttps://example.com/page; ヘッダーのみを確認する場合は curl -I https://example.com/page。

• URLレベルのデバッグ：自分が所有するページについては、Google Search Consoleの URL Inspection を使って、Googleがページをどのように取得したか、コンテンツがインデックス化されているかを確認する。自分で所有していないサードパーティのページについては、site: 演算子などの公開シグナルやブラウザでのレンダリング確認を利用する。

よくあるミスと対処法

問題：タブの背後に隠れた見出しや、サーバー側のフォールバックがない重いクライアントサイドレンダリングで見出しが見えないこと。

修正：重要な見出しをサーバーのレスポンスに含めるか、プログレッシブエンハンスメントを使ってユーザーとクローラーの両方に表示されるようにする。

問題：キーワードを詰め込んだ見出しの繰り返し。

修正：明確さと文脈を優先するよう見出しを書き直す。バリエーションは無理に見出しに詰め込まず、本文で補う。

問題：見出し階層が不整合（H1の直後にH2/H3を挟まず複数のH4が続くなど）。

修正：論理的なアウトラインを維持する。見た目のバリエーションが必要なら、意味的マークアップでレベルを飛ばすのではなくCSSクラスでスタイルを調整する。

アクセシビリティとUXの配慮

見出しはスクリーンリーダーユーザーや迅速なスキャンに不可欠です。適切な見出しは認知負荷を軽減し、支援技術でのナビゲーションを容易にします。ランドマーク（main、nav、aside）と明確な見出し階層を組み合わせて文書のナビゲーションを改善してください。

見出しを視覚効果だけのために使用するのは避けてください。構造を伝えない視覚的見出しが必要な場合は role="presentation" やスタイル済みの <div> を使い、アクセシビリティとインデックスのために意味的な見出しはDOMに残す。

関連記事とリソース

実装パターンやトラブルシューティングツールについては、Chrome DevTools、構造化コンテンツの相互作用に対する Rich Results Test、所有ページ向けの Google Search Console といった開発者ツールを参照してください。より広い技術的リファレンスが必要な場合は次のガイドを検討してください：テクニカルSEOガイドを読む。

FAQ

ページごとにH1は1つだけ必要？

単一の明確なH1はほとんどのページで実用的なデフォルトです。ユーザーや支援技術に明確なトピック信号を提供するためです。HTML5はセクショニング要素内で複数のH1を許容しますが、複雑な文書構造でない限り明瞭さのために1つにしておきましょう。

見出しは順位を変えますか？

見出し自体が順位を保証するブースターではありません。構造や使いやすさを改善し、セクションがスニペットやAI Overviewsに使われる可能性を高めます。これらのユーザー中心の利点が、関連性やエンゲージメントといったランキングシグナルに間接的に影響することがあります。

見出しの変更はどうテストすべき？

自分が所有するページでは、見出しのバリエーションをA/Bテストし、Google Search Consoleやアナリティクスでエンゲージメントとパフォーマンスを監視してください。view-sourceやDevToolsでHTMLとレンダリングされたDOMを確認し、モバイルレンダリングを検証してください。Googleがmobile-first indexingを採用しており、デフォルトで Googlebot Smartphone によるクロールが行われます。

見出しの構造に影響を与えずに見た目だけスタイル変更できますか？

はい。構造には意味的な見出しを使い、見た目はCSSクラスで調整してください。文書構造を伝えない視覚的見出しが必要な場合は、意味的見出しとは別にスタイルされた要素を実装しつつ、アクセシビリティとインデックスのために意味的見出しはDOMに残してください。