ホームページ制作やオウンドメディアの運用において、見出しタグ（h1〜h6）の適切な設定は、SEO評価・AI検索（AIO）への対応、そしてユーザーの離脱防止に直結する重要な基盤です。結論として、見出しタグは文字を大きく見せるための装飾タグではなく、「文書の論理的な階層構造（アウトライン）を検索エンジンや読者に正しく伝えるための構造化タグ」として正しく運用しなければなりません。
基本ルールは、ページ全体の主題を示すh1タグから始まり、大見出し（h2）、中見出し（h3）、小見出し（h4）と順番に階層を飛ばさずに整理することです。本記事では、見出しタグの役割、正しい階層構造の作り方、SEO効果を最大化するテキストの書き方、制作現場で頻発するNG例とその解決策まで、Web制作のプロの視点から体系的に解説します。
ホームページにおける見出しタグ（hタグ）の役割と重要性
見出しタグ（Headingタグ）は、HTMLにおいてWebページの骨組みを定義するための要素です。h1からh6までの6段階が用意されており、数字が小さくなるほど文書内での重要度が高くなります。まずは、見出しタグがWebサイトの成果においてなぜ重要なのか、その本質的な役割を整理します。
見出しタグ（Headingタグ）の定義とh1〜h6の基本概念
見出しタグとは、HTML文書内の各セクションがどのようなトピックを扱っているかを明示するためのマークアップタグです。書籍で例えるなら、以下のような関係性に該当します。
- h1タグ：本の「書籍タイトル」または「章の総題」（ページ全体の主題）
- h2タグ：各「章のタイトル」（主題を構成する大見出し）
- h3タグ：章の中の「節のタイトル」（大見出しを深掘りする中見出し）
- h4〜h6タグ：節の中の「項」や細分化された補足情報（小見出し）
Web制作において、見出しタグが適用されたテキストはブラウザの初期設定で太字かつ大きなサイズで表示されます。しかし、本来の目的は視覚的な強調ではなく、コンテンツの文脈と親子関係を構造化することにあります。
検索エンジン（クローラー・AI）が見出しタグを評価する仕組み
Googleをはじめとする検索エンジンのクローラーは、HTMLコードを解析して情報の要点を把握します。その際、本文テキスト（pタグなど）よりも、見出しタグ（特にh1やh2）で囲まれたテキストを「そのセクションの核となる主題」として優先的に解釈します。
近年普及している検索AI（AI Overviewsや対話型AIエンジン）においても、見出しタグによって明確に章立てされたコンテンツは論理展開が把握しやすく、検索クエリに対する直接的な回答として引用・抽出されやすい傾向があります。見出しタグを論理的に配置することは、自然検索のみならずAI検索最適化（AIO）においても不可欠なアプローチです。
ユーザーの可読性・離脱防止（スキミング）に対する効果
Webサイトを訪れるユーザーの大半は、ページ内の全文章を熟読するわけではありません。求めている情報がどこにあるかを素早く見つけるため、画面をスクロールしながら見出しを拾い読み（スキミング）します。
見出しタグがなく長文が続いていたり、見出しが抽象的で内容が推測できなかったりすると、ユーザーは瞬時に離脱してしまいます。わかりやすい見出しを適切な間隔で配置することは、ユーザーの閲覧負荷を下げ、回遊率やコンバージョン率（CVR）の向上に直結します。コンテンツ設計における文章の書き方については、ホームページの原稿作成（Webライティング）の手順と書き方｜CVRとSEOを高めるコンテンツ設計のプロのコツでも詳しく解説しています。
見出しタグ（h1〜h6）の正しい階層構造とHTML記述ルール
見出しタグを設置するにあたって最も重要なのが「階層構造（ツリー構造）」の整合性です。実務で遵守すべきマークアップのルールを解説します。
数字順に階層構造を維持する（飛ばし・逆転の禁止）
見出しタグを使用する最大の原則は、「階層（レベル）を飛ばさない」「数字を逆転させない」ことです。
- 正しい例：h1 ＞ h2 ＞ h3 ＞ h3 ＞ h2 ＞ h3 ＞ h4 ＞ h3
- 誤った例：h1 ＞ h3（h2をスキップしている）
- 誤った例：h2 ＞ h1（下位の見出しから上位の見出しへ戻っている）
- 誤った例：h2 ＞ h4（h3を飛ばしてh4を使っている）
デザインの都合で「文字サイズを小さくしたいからh2の中にいきなりh4を置く」といった運用を行うと、HTMLのアウトライン解析が乱れ、検索エンジンに対して不正確な構造情報を提供してしまいます。階層の親子関係は常に厳格に管理する必要があります。サイト全体の設計思想とも密接に関わるため、Webサイトのディレクトリ構造（階層構造）の作り方｜SEOとユーザー体験を両立する設計手順をプロが解説と合わせて構造化の考え方を統一することが推奨されます。
h1タグの役割とページ内での使用回数の考え方
h1タグは、ページ全体の最上位テーマを示す見出しです。HTML5の仕様上、ページ内に複数のh1タグを記述すること自体は文法違反ではありません。検索エンジン側も技術的には複数h1に対応可能です。
しかし、実務的なSEO設計およびアクセシビリティの観点からは、「1ページにつきh1は1回のみ使用する」というルールを原則とすることを強く推奨します。複数のh1が存在すると、「この記事は何について最も言及しているページなのか」というシグナルが分散しやすくなるためです。企業のホームページやブログ記事では、メインタイトルにh1を1度だけ割り当て、以降のコンテンツはh2から展開するのが最も安全で堅実な設計です。
h2〜h4の効果的な使い分けとセクション分割基準
本文の展開においては、h2、h3、h4の3段階をメインに設計します。h5やh6は、極めて複雑な階層を持つ巨大な技術文書などを除き、一般的な企業ホームページではほとんど使用しません。
| タグ | 役割・位置づけ | 使用目安・セクション設計 |
|---|---|---|
| h1 | ページのメインタイトル（最上位主題） | 1ページにつき原則1箇所 |
| h2 | 主要なトピックを分ける大見出し | 主題を分割するまとまり（3〜7個程度） |
| h3 | h2の内容をさらに掘り下げた中見出し | h2の中で複数の観点・具体例を述べる場合に使用 |
| h4 | h3の中でさらに分岐する詳細な小見出し | h3内の手順・比較項目などを細分化する場合に使用 |
| h5〜h6 | 極めて詳細な補足情報・細項目 | 一般サイトでは原則使わなくても問題ない |
見出しを設定する基準としては、「1つの見出しに対して本文テキストがおおむね300〜800文字程度にまとまっているか」を目安にセクションを分割すると、読者にとってもクローラーにとっても理解しやすい構成になります。
SEO・AIO評価を高める見出しタグの書き方とキーワード選定
見出しタグの階層が正しくても、そこに記載するテキストが不適切であればSEOやコンバージョンの成果には結びつきません。検索エンジンとユーザーの双方を惹きつける見出しテキストの作成手順を解説します。
ユーザーの検索意図に合致したキーワードを自然に含める
h1およびh2タグには、上位表示を狙うメインキーワードや、関連する複合キーワードを自然な形で配置します。クローラーは見出しに含まれる文字列からセクションの文脈を強く認識するためです。
ただし、文脈を無視して機械的にキーワードを並べたり、不自然な日本語になったりしては逆効果です。「読者がその見出しを見た瞬間に、自分の知りたかった情報がここに書いてあると直感できる自然な日本語」を第一に心掛けましょう。
見出し単体で内容が伝わる具体性を持たせる（要約の提示）
見出しのテキストは、可能な限り具体的であることが求められます。抽象的で短すぎる見出しは、読者の興味を惹けないだけでなく、AI検索の要約アルゴリズムからも無視されやすくなります。
- 曖昧な例：「ポイントについて」「注意点」「特徴」
- 具体的な例：「見出しタグを設計する際に押さえるべき3つの注意点」「階層構造を崩さないためのCSSスタイル分離」
このように、「何について」「どのような観点から」語られているのかが見出しだけで分かるように記述することが、スキミングする読者の離脱を防ぎ、検索意図を満たすためのポイントです。
箇条書きや結論を前置するAIO（AI検索）最適化の視点
AI検索（GoogleのAI Overviewsなど）は、見出しとその直後の本文をセットで解析し、「質問に対する明確な回答」を抽出します。そのため、見出しタグの直後には、遠回しな導入文を置くのではなく、「その見出しに対する直接の結論や定義」を最初の1〜2文で端的に記述する構成が非常に有効です。
また、見出し配下に要点をまとめた箇条書きや比較表（tableタグ）を配置しておくと、生成AIが情報をリストや表形式の構造化データとして認識しやすくなり、アンサー枠として引用される確率が高まります。Webページ全体の構造を機械可読にするアプローチとしては、ホームページの構造化データ（Schema.org）とは？SEO・AI検索効果と実装手順・注意点をプロが解説も参考にすると相乗効果を発揮します。
過度なキーワード詰め込み（キーワードスタッフィング）の回避
SEOを意識するあまり、すべてのh2やh3に同じキーワードを機械的に詰め込む行為は避けてください。例えば、「ホームページ制作 見出しタグ」「ホームページ制作 見出しタグ 階層」「ホームページ制作 見出しタグ ルール」のように、同じ語句が執拗に繰り返される構造は、Googleの品質ガイドラインにおける「キーワードの乱用」と判定され、評価低下のリスクを招きます。
見出しの表現は読者の読みやすさを最優先し、類語や言い換え表現、関連トピックの言葉を織り交ぜながらバリエーションを持たせるのがプロのライティング実務です。
見出しタグ設計でよくある間違いと注意点
ホームページ制作やリニューアルの現場、あるいは自社でブログ記事を内製する過程で見受けられる典型的なミスをまとめました。自社サイトの現状を確認してみましょう。
デザイン目的（文字装飾・フォントサイズ変更）でのhタグ乱用
最も多く見られる過ちが、「文字を大きく太く見せたいからh2を使う」「少し文字を強調したいからh4で囲む」といった、視覚的なデザイン調整を目的とした見出しタグの使用です。
HTMLは文書構造を定義する言語であり、文字の大きさ、太さ、色、余白などの見た目はすべてCSS（スタイルシート）で制御すべきものです。デザイン上の理由で見出しタグを乱用すると、検索エンジンは「なぜこの重要ではない一文が最高レベルの見出しとしてマークアップされているのか」を理解できず、サイト全体の構造的評価が損なわれてしまいます。強調したい箇所はstrongタグやspanタグを用い、CSSクラスでスタイルを当てるのが正しい実装です。
見出しタグ内に長文・画像をそのまま配置するリスク
見出しタグの中に、句読点がいくつも入るような数行にわたる長文をそのまま記述してしまうケースも見られます。見出しタグはあくまで「セクションのタイトル」であるため、端的なフレーズまたは簡潔な一文（長くても40文字程度まで）に抑えるのが基本です。
また、デザイン性を高めるために見出し全体を画像化し、テキストを埋め込まない実装も注意が必要です。画像で見出しを表現する場合は、imgタグのalt属性に正確な見出しテキストを記述するか、CSSの背景画像として処理した上でテキスト要素をHTML上に残す必要があります。可能な限りWebフォントとCSSを用いて、テキストとして見出しをコーディングすることが推奨されます。
グローバルナビやサイドバーに見出しタグを誤用するケース
Webサイトのテンプレート構造において、ヘッダーのグローバルナビゲーション、サイドバーのバナー、フッターの会社情報などに誤ってh2やh3タグが割り当てられている事例があります。
サイドバーにある「最新記事一覧」「カテゴリー一覧」「お問い合わせ」といったナビゲーション用のラベルにh2タグが設定されていると、メインコンテンツの文脈とは無関係な言葉が、記事の重要トピックと同列にクローラーへ送信されてしまいます。共通エリアの見出しにはdivやpタグにclass名を付与して対応し、h1〜h6タグは原則としてページのメインコンテンツエリア内でのみ構造化に使用するテンプレート設計を徹底してください。内部リンクを論理的に巡回させる設計については、ホームページの内部リンク設計とは？SEO評価と回遊率を高める構造・設置手順をプロが解説でも詳しく紹介しています。
見出しタグ設計の実践ステップと制作時のチェック項目
実際にホームページを制作・改修する際、どのような手順で見出し構造を策定し、品質を担保すべきか、実務の流れを整理します。
ワイヤーフレーム・構成案段階での見出し構造の整理
見出し設計は、デザインやコーディングを始める前段階である「ワイヤーフレーム（画面設計書）」や「コンテンツ構成案」の作成フェーズで確定させるのが最も効率的です。
- ページの目的とターゲットキーワードの決定：そのページが応えるべきユーザーの疑問・検索意図を明確にする。
- h1（ページタイトル）の策定：メインキーワードを含み、ページ全体の結論を予告するタイトルを作成する。
- 骨子（h2）の洗い出し：ユーザーが知るべきトピックを論理的な順番（結論 → 理由 → 手順 → 注意点など）で3〜6個程度並べる。
- 詳細（h3〜h4）の肉付け：各h2の中で具体例や比較が必要な部分を中見出しとして分割する。
この段階でテキストのアウトラインを完成させておくことで、デザイン着手後の構成変更やコーディング時の手戻りを最小限に抑えることができます。
デザイン・コーディング時のスタイル分離（CSSでの装飾）
デザインおよびコーディングの工程では、見出しのHTMLタグとCSSクラスを明確に切り分けます。例えば、「見た目は中見出しサイズ（font-size: 18px）にしたいが、文書構造としてはh2である」というケースはWeb制作の実務で頻繁に発生します。
このような場合は、HTMLの階層を曲げてh3やh4を使うのではなく、以下のように設計します。
- HTMLは構造的に正しい「h2」を記述する
- CSSで「class=”c-heading-m”」といった装飾用のクラスを付与し、フォントサイズやマージンを調整する
文書構造（HTML）と視覚表現（CSS）を完全に分離して管理することが、Web標準に準拠した高品質なホームページを構築するための必須条件です。
公開前のHTMLアウトライン検証・チェックリスト
ページを公開する前には、見出し構造が論理的に正しく組まれているかを必ず検証します。ブラウザの開発者ツールや、見出し構造を可視化するブラウザ拡張機能（HeadingsMapなど）を使用すると、アウトラインが正しく形成されているかを一覧で確認できます。
| 検証項目 | 確認ポイント | 判定 |
|---|---|---|
| h1タグの存在と数量 | ページ内に1つだけ存在し、主要キーワードを含んでいるか | 必須 |
| 階層の連続性 | h2の直後にh4が来るなど、数字のスキップが発生していないか | 必須 |
| デザイン目的のタグ使用 | 文字装飾やボタンの文字などに見出しタグが使われていないか | 禁止 |
| 共通エリアのタグ混入 | サイドバーやフッターに不要なh2〜h3タグが含まれていないか | 除外 |
| テキストの具体性 | 「詳細」「その他」など見出し単体で意味不明な表現になっていないか | 改善推奨 |
よくある質問
見出しタグ（h1）は1ページに複数回使ってもSEO上のペナルティになりませんか？
Googleの公式見解として、HTML5の仕様に基づき複数のh1タグが存在すること自体が直接的なペナルティの対象になることはありません。ただし、1ページ内に複数のh1が散在すると、検索エンジンにとって「そのページの最も中心的な主題が何であるか」の判別が難しくなるリスクがあります。SEOの評価効率と文書構造の明瞭さを保つためには、特別な設計理由がない限り、1ページにつきh1は1回のみ使用し、コンテンツの展開はh2以下で行うことを推奨します。
見出しタグに画像（ロゴやバナー）を設定しても問題ありませんか？
トップページのh1に企業ロゴ画像を設定するなど、見出しタグ内に画像（imgタグ）を配置すること自体は技術的に問題ありません。ただしその場合は、検索エンジンが画像の内容をテキスト情報として正しく認識できるように、imgタグのalt属性（代替テキスト）に企業名やサイトの主題を記述する必要があります。下層ページやブログ記事の見出しについては、画像埋め込みではなくテキストで直接マークアップする方がアクセシビリティの観点からも有利です。
h5やh6タグは企業サイトの制作でも必ず使う必要がありますか？
必ずしもh5やh6まで使用する必要はありません。一般的なコーポレートサイト、サービスページ、オウンドメディア記事においては、h1、h2、h3、そして必要に応じてh4までの設計で十分に論理的な構成を完結できます。無理にh5やh6まで細分化しようとすると、かえって文章の階層が深くなりすぎて読者が迷子になる原因となります。自然な文章のまとまりとしてh4までに収める設計が実用的です。
WordPressで記事を書く際、見出しタグはどのレベルから使うべきですか？
一般的なWordPressテーマでは、記事の投稿タイトル（入力画面の最上部にあるタイトル欄）が自動的にh1タグとしてHTML出力される仕様になっています。そのため、記事本文のエディター内で作成する最初の見出しは「見出し2（h2）」から始めるのが正しい運用手順です。本文内で誤って「見出し1」を選択してしまうと、ページ内に複数のh1が生成されたり、階層が崩れたりする原因となるため注意が必要です。
まとめ：見出しタグの正しい構造化がSEOとユーザー体験を最大化する
見出しタグ（h1〜h6）は、Webサイトの情報を検索エンジン、検索AI、そして人間の読者に対して正確かつスムーズに届けるための道標です。文字の装飾やデザインの手段として扱うのではなく、文書の論理的な骨組みを構築する構造化ツールとして正しく活用することが求められます。
- 見出しタグはh1から順番に階層を飛ばさずに使用する
- h1は1ページにつき原則1箇所とし、ページ全体の主題を明示する
- 見出しテキストには検索意図に応えるキーワードを自然に含め、単体で内容が伝わる具体性を持たせる
- デザインの都合（文字サイズや余白）で見出しタグを選ばず、CSSでスタイルを調整する
- 共通ヘッダー・フッター・サイドバーに見出しタグを誤用しないテンプレート設計を行う
見出し構造の整理は、一度ルールを策定してテンプレートに落とし込めば、中長期的にサイト全体のSEO評価とユーザーエンゲージメントを安定的に底上げできる施策です。自社ホームページの現状のマークアップを見直し、論理的で分かりやすいWeb構造を確立していきましょう。
CONTACT
Web制作・SEO・AIOについてお気軽にご相談ください
ホームページ制作・リニューアル、WordPress、SEO・AIO対策、 ECサイト、Web集客、保守・セキュリティなど、 Webに関するご相談を承っています。 「何から相談すればよいかわからない」という段階でもお気軽にお問い合わせください。