見出し構造（h1〜h6）は適切か｜自分でできるSEOチェック

Webコンサルタントの松崎です。

 

これまで「自分でできる！SEOセルフチェック」シリーズでは、常時SSL対応やページ表示速度、スマートフォン対応、ページタイトルの設定、画像のalt属性などについてお伝えしてきました。

今回は、Webサイトの骨組みとなる「見出し構造（h1〜h6）」について詳しく解説します。

見出し構造（h1〜h6）とは？

 

見出し構造とは、HTMLで使われる「h1」から「h6」までの見出しタグのことです。これらのタグは、Webページの内容を階層的に整理するために使用されます。

  • h1：最も重要な大見出し（通常、ページのメインタイトル）
  • h2：セクションの見出し
  • h3：h2の下位にある小見出し
  • h4：h3の下位にある小見出し
  • h5：h4の下位にある小見出し
  • h6：最も小さい見出し

一般的に、ページのタイトルをh1とし、主要なセクションをh2、そのサブセクションをh3というように、階層的に使用します。これは本の「タイトル → 章 → 節 → 項」のような構造を、Webページでも表現するためのものです。

 

HTMLでは以下のように記述されます。

 

<h1>Webサイトの作り方ガイド</h1>

  <h2>1. 基本設計</h2>

    <h3>1-1. ターゲットユーザーの設定</h3>

    <h3>1-2. 目的の明確化</h3>

  <h2>2. デザイン</h2>

    <h3>2-1. カラースキームの選定</h3>

      <h4>2-1-1. 主要色の決定</h4>

      <h4>2-1-2. アクセントカラーの使い方</h4>

 

Webページを見ていると、これらの見出しは通常、文字サイズが大きかったり太字だったりと、見た目で区別できるようにスタイルが設定されています。しかし、SEOで重要なのは見た目のスタイルではなく、HTMLの構造としてきちんとh1〜h6タグが構造的に正しく使われているかどうかです。

なぜ見出し構造がSEOに重要なのか？

見出し構造がSEOにおいて重要である理由をいくつか見ていきましょう。

1. 検索エンジンがページの構造を理解しやすくなる

Googleなどの検索エンジンは、Webページの内容を理解するために、見出しタグを重要な手掛かりとして使用します。適切な見出し構造によって、ページのトピックやサブトピック、それらの関係性を検索エンジンに明確に伝えることができます。

 

例えば、「犬のしつけ方」というh1タグの下に、「子犬の場合」「成犬の場合」というh2タグがあり、さらにその下に「基本的な命令」「問題行動の修正」などのh3タグがあれば、検索エンジンはそのページが犬のしつけに関する体系的な情報を提供していることを理解できます。

 

これにより、「子犬 基本的なしつけ」「成犬 問題行動」などの具体的な検索クエリにも対応しやすくなります。見出し構造が適切なページは、様々な関連検索キーワードでの表示機会が増える傾向があります。

2. ユーザーエクスペリエンスの向上

見出し構造は検索エンジンだけでなく、ユーザーにとっても重要です。読者は長い文章を読む前に、見出しを一読してページの概要を把握することが多いです。

 

明確な見出し構造があれば、ユーザーは必要な情報をすぐに見つけることができ、読みやすさが向上します。これにより、滞在時間の増加や直帰率の低下などの指標も改善し、間接的にSEOにも良い影響を与えます。

 

GoogleはユーザーエクスペリエンスをSEOの重要な要素として位置づけているため、閲覧しやすく構造化されたコンテンツを高く評価する傾向があります。

3. アクセシビリティの向上

適切な見出し構造は、視覚障害のあるユーザーにとって特に重要です。スクリーンリーダー（画面読み上げソフト）を使用しているユーザーは、見出しタグを利用してページ内をナビゲートすることが多いです。

 

h1〜h6タグが適切に使われていれば、スクリーンリーダーユーザーは見出しを順番に読み上げてもらい、必要な情報がどこにあるかを把握できます。また、見出しジャンプという機能を使って、特定のセクションに直接移動することも可能です。

 

Googleはアクセシビリティを重視する方針を示しており、すべてのユーザーにとって使いやすいサイトを評価する傾向があります。

4. 特定キーワードの重要性を強調する

見出しタグ内のテキストは、ページ内の通常のテキストよりも重要度が高いと検索エンジンに認識されます。特にh1、h2タグ内のキーワードは、そのページの主要なトピックとして強く認識されます。

 

ターゲットキーワードを見出しに効果的に配置することで、そのキーワードに関する検索での順位向上が期待できます。ただし、不自然に詰め込むのではなく、コンテンツの構造に合わせて自然に配置することが重要です。

 

例えば、「東京 中古マンション 購入 注意点」というキーワードでの上位表示を目指す場合、以下のような見出し構造が効果的です。

 

<h1>東京で中古マンションを購入する際の注意点</h1>

  <h2>物件選びで確認すべきポイント</h2>

  <h2>中古マンションの適正価格の調べ方</h2>

  <h2>購入前に必ず確認すべき書類</h2>

効果的な見出し構造の作り方

SEOに効果的な見出し構造を作るためのポイントを見ていきましょう。

1. 階層構造を守る

見出しタグは階層順に使用するのが基本です。

h1から始まり、次にh2、その下にh3というように順序を守りましょう。

階層をスキップする（例えばh2の後にいきなりh4を使う）のは避けるべきです。

 

【正しい例】

<h1>メインタイトル</h1>

  <h2>大きなセクション</h2>

    <h3>小さなセクション</h3>

    <h3>別の小さなセクション</h3>

  <h2>別の大きなセクション</h2>

 

【避けるべき例】

<h1>メインタイトル</h1>

  <h3>セクション</h3>  <!-- h2をスキップしている -->

  <h4>サブセクション</h4>  <!-- h3をスキップしている -->

 

階層構造が適切でないと、ページの論理的な構造が崩れ、検索エンジンとユーザーの両方が内容を理解しづらくなります。見た目だけにこだわっている制作会社やただテンプレートに流し込んで作るだけの会社、正しいHTMLの知識がない会社ではこういった構造は全く無視されて作られていますので、ご注意ください。大手だからとか、有名だからとか、制作数が多いからといった点で判断すると危険です。

2. h1タグは1ページに1つだけ

h1タグはページの主要なトピックを表すものなので、基本的に1ページに1つだけ使用するのが良いです。複数のh1タグを使用すると、ページの主題が不明確になり、検索エンジンが混乱する可能性があります。

 

例外として、HTML5の「セクショニング要素」（article, section, nav, asideなど）を使用している場合は、各セクションにh1を使うこともできますが、一般的なWebサイトでは1ページ1つのh1が良いでしょう。

 

WordPressなどのCMSを使用している場合、通常は投稿タイトルや固定ページタイトルが自動的にh1タグになるように設定されています。テーマによっては、サイト名もh1になっているケースがあるので、その場合は修正が必要かもしれません。この場合も有名なテーマを購入したからといって妄信していると危険です。

3. キーワードを自然に含める

各見出しには、そのセクションの内容を適切に表す言葉を使用しましょう。特にSEO対策上で重要と位置付けているキーワードは、自然な形で見出しに含めると効果的です。

 

ただし、キーワードの詰め込みすぎ（キーワードスタッフィング）は逆効果です。ユーザーにとって読みやすく、内容を適切に表現する見出しを心がけましょう。

 

良い例「東京の中古マンション選びで重視すべき5つのポイント」

悪い例「中古マンション 東京 選び方 ポイント おすすめ 相場」

 

見出しはユーザーが最初に目を通す部分でもあるため、魅力的で内容を適切に表現するものであることが重要です。

4. 見出しの長さと内容

見出しは短すぎると情報が不足し、長すぎると読みにくくなります。一般的には、10〜20文字程度が適切とされています。

 

また、見出しはそれに続くコンテンツの内容や文脈を正確に反映したものであるべきです。例えば「犬のしつけ方」という見出しの下に猫の話題が書かれていると、ユーザーも検索エンジンも混乱します。

 

見出しとコンテンツの整合性を保つことで、ユーザーはページを読み進めやすくなり、検索エンジンも内容を正確に理解できるようになります。

5. 全ての見出しタグを使う必要はない

h1からh6まで全ての見出しタグを使用する必要はありません。多くのWebサイトでは、h1〜h3程度で十分な場合が多いです。コンテンツの複雑さや階層の深さに応じて、必要なレベルまで使用しましょう。

 

例えば、シンプルなブログ記事であれば、次のような構造で十分かもしれません。

 

<h1>記事タイトル</h1>

  <h2>最初のトピック</h2>

  <h2>次のトピック</h2>

    <h3>サブトピック1</h3>

    <h3>サブトピック2</h3>

  <h2>まとめ</h2>

 

複雑な技術文書や学術論文のような場合は、h4やh5も活用して、より詳細な階層構造を表現することもあります。

見出し構造のセルフチェック方法

自分のサイトの見出し構造が適切かどうかを確認する方法をいくつか紹介します。

1. ブラウザの開発者ツールを使う方法

最も基本的な方法は、ブラウザの開発者ツールを使って見出しタグを確認することです。

  1. Webサイトを開く
  2. キーボードでF12キーを押す（MacはOption + Command + I）
  3. 「Elements」または「要素」タブを選択
  4. HTMLコード内で「h1」「h2」などを検索

これにより、ページ内のすべての見出しタグを確認できます。階層構造が適切か、h1は1つだけか、などをチェックしましょう。

2. HeadingsMap拡張機能を使う方法

Chrome拡張機能の「HeadingsMap」を使うと、ページの見出し構造を視覚的に確認できます。

  1. Chrome ウェブストアから「HeadingsMap」をインストール
  2. Webサイトを開く
  3. HeadingsMapアイコンをクリック

これにより、ページの見出し構造がツリー形式で表示され、階層レベルや順序の問題を素早く特定できます。h1タグが複数あるなどの問題がある場合は、警告も表示されます。

3. HTMLバリデーターを使う方法

W3Cの「Markup Validation Service」などのHTMLバリデーターを使うと、HTMLの構文エラーだけでなく、見出し構造に関する警告も表示されることがあります。

  1. W3C Markup Validation Service（https://validator.w3.org/）にアクセス
  2. チェックしたいページのURLを入力または HTMLコードを貼り付け
  3. 「Check」ボタンをクリック

バリデーターは見出し構造の問題を直接指摘するわけではありませんが、HTML5の文書構造に関する問題を発見するのに役立ちます。

よくある問題とその改善方法

見出し構造に関する一般的な問題とその改善方法を見ていきましょう。

1. 複数のh1タグが使われている

古いテンプレートやWordPressテーマでは、サイトのロゴやサイト名もh1タグになっていることがあります。その結果、1ページに複数のh1タグが存在する状態になってしまいます。

 

【改善方法】

  • テンプレートやテーマを修正して、ページの主要内容（記事タイトルなど）のみをh1タグにする
  • サイトロゴやサイト名はdivタグやspanタグなどに変更する
  • HTML5のセマンティック要素（header, navなど）を適切に使用する

2. 階層が適切に使われていない

h1の後にいきなりh3が来る、h2の後にh4が来るなど、階層をスキップしているケースがよくあります。

 

【改善方法】

  • 見出しの階層関係を見直し、h1 → h2 → h3という順序を守る
  • デザイン的な理由で見出しの大きさを変えたい場合は、CSSで調整する（HTMLの階層は正しく保ちながら）
  • コンテンツ全体の構造を論理的に整理する

3. 見出しがデザイン目的だけで使われている

見た目の調整のためだけに見出しタグを使うと、内容と構造の不一致が生じます。例えば、「お問い合わせはこちら」というリンクテキストをh2にするなどです。

 

【改善方法】

  • 見出しタグは内容の構造を示すために使い、デザイン調整はCSSで行う
  • リンクやボタンテキストなど、見出しでないテキストには見出しタグを使わない
  • 装飾的な要素は、適切なHTMLタグ（strong, em, spanなど）とCSSを組み合わせて実現する

4. キーワードの詰め込みすぎ

SEOを意識するあまり、不自然なキーワードの詰め込みが見られることがあります。

 

【改善方法】

  • 見出しは読者にとって意味のある、自然な文になるようにする
  • キーワードを含めつつも、文脈に合った自然な表現を心がける
  • 読者第一で考え、検索エンジンのためだけの最適化は避ける

5. コンテンツに見合わない見出し構造

短い文章に対して複雑な見出し構造（h1〜h5まで使うなど）や、逆に長大なコンテンツなのに見出しがほとんど使われていないケースもあります。

 

【改善方法】

  • コンテンツの量と複雑さに見合った見出し構造を使用する
  • 長いコンテンツは適切に分割し、読みやすくする
  • 見出しの数が多すぎる場合は、本当に必要な区分かどうかを再検討する

見出し構造最適化のまとめ

見出しタグ（h1〜h6）は、Webページの骨組みとなる重要な要素です。適切な見出し構造は、SEOだけでなく、ユーザビリティやアクセシビリティにも大きく貢献します。

見出し構造化の重要ポイント

  • h1タグは1ページに1つだけ使用し、ページの主要内容を表す
  • 見出しタグは階層順に使用し、レベルをスキップしない
  • 各見出しはそれに続くコンテンツの内容を適切に表現する
  • キーワードは自然な形で見出しに含める
  • デザイン目的だけで見出しタグを使わない

見出し構造の最適化は、HTMLの修正が必要なケースもありますが、WordPressなどのCMSを使っている場合は、テーマの修正やプラグインで対応できることも多いです。専門的な知識がない場合は、Webデザイナーや開発者に相談するのも一つの方法です。

 

SEOの効果をすぐに期待するのは難しいかもしれませんが、適切な見出し構造はサイトの基盤となる部分です。長期的な視点で取り組むことで、検索エンジンからの評価向上とユーザー体験の改善につながるでしょう。

 

より詳しいWebサイトの診断方法については、「Webサイトが集客できない理由 - 10の自己診断法」をご覧ください。また、見出し構造を含めたSEO対策の専門的なサポートが必要な場合は、当社の「Webコンサルティングサービス」もぜひご検討ください。

 

見た目だけじゃなく誰もが向いやすい最適化を行いたい、正しくSEOに取り組みたい方は、まず課題やお悩みをお聞かせください。

 

初回相談は無料です。

いつでもお気軽にお問い合わせください。