見出しタグ（h1/h2/h3）の正しい使い方

<!-- rewrite-v2 -->

見出しタグ（h1/h2/h3）の正しい使い方

この記事の結論: 見出しタグは「h1は1つだけ、階層を飛ばさない、キーワードを自然に含める」の3原則を守れば失敗しません。これだけでGoogleとAIの両方に正しく構造が伝わります。

最終更新日: 2026-05-05

はじめに

「h1って何回使っていいの？」「h3を飛ばしてh4を使ってもいい？」そんな初心者の疑問に答える記事です。Google検索セントラルとWeb標準（HTML Living Standard）に基づいて、SEOとアクセシビリティの両方に効く見出しの使い方を解説します。

見出しタグはテキスト装飾ではなく「文書のセマンティクス（意味構造）」を担う要素であり、検索エンジンのランキングシグナルとしてもアクセシビリティ対応としても二重の効果があります。本記事ではh1〜h6の使い分け、実装上のNGパターン、LLMO時代における AI への伝わり方、そして検証ツールでの確認手順までを通しで解説します。

見出しタグの役割

見出しタグ（h1〜h6）は、文書の構造を表すHTML要素です。W3CのHTML仕様では「セクションの主題を示すもの」と定義されており、検索エンジンとAI、そしてスクリーンリーダーが文書を理解するための「目次」として機能します。

→ 詳しくはSEOの基本完全ガイドも参照してください。

h1〜h6 の正しい使い分け詳細

h1：ページの主題（必ず1つ）

h1 はページの「タイトル」に相当する見出しで、そのページが何について書かれているかを一言で示します。原則として 1 ページに 1 つ、ページ最上部（OGP画像やパンくずの直後）に配置します。

h2：大セクション

h2 は記事を章立てする見出しです。「はじめに」「基本ルール」「事例」「FAQ」のように、ユーザーが見出しだけで全体像を把握できる粒度で切ります。後述するサーチインテントに応じた章構成を意識すると、上位表示しやすくなります。

h3：中セクション

h3 は h2 の中をさらに分解する見出しです。3 つ以上の論点が並ぶときは h3 を使って整理しましょう。h3 をうまく使うと、目次が「Q&A 集」のように機能し、AI 検索の引用率が上がります。

h4〜h6：詳細

h4 以下は、表組みの中、サンプルコードの解説、長大なチェックリストの分類など、本当に必要な場合だけ使います。h5/h6 はほぼ使う場面がなく、もし使いたくなったらそもそも構造設計を見直すサインです。

→ 詳しくはキーワード調査の基本で見出し設計の前段階を学べます。

3つの基本ルール

ルール1：h1は1ページに1つ

HTML5では複数のh1が技術的に許されますが、SEO的には1ページ1つが推奨です。h1はページの「主題」を示すため、複数あると主題が分散します。Google John Mueller 氏も公式に「複数 h1 でも検索順位に直接の悪影響はないが、1 つに絞る方が分かりやすい」と発言しています。

ルール2：階層を飛ばさない

h2の次はh3、h3の次はh4と順番に降りていきます。h2の直下にh4を置くのはNGです。これは見た目の問題ではなく、構造解析の問題で、スクリーンリーダーや AI クローラが正しく階層を組み立てられなくなります。

○ 正しい例
h1 > h2 > h3 > h2 > h3

× 悪い例
h1 > h3 > h2 > h4

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

h1には主要キーワード、h2には関連クエリを含めます。ただし詰め込みは逆効果。文章として自然なものを優先しましょう。

ポイント: 見出しは「ページ内目次」として機能します。見出しだけ読んで内容が把握できるかをチェックしましょう。

→ 詳しくはサーチインテントの種類と判別方法も合わせて読むと効果的です。

h1とタイトルタグの違い

混同されがちですが、別物です。

両者は同じか近い内容にするのが理想ですが、必ずしも同一である必要はありません。タイトルタグは SERP 上のクリック獲得を意識し、h1 は読者が「自分の探している記事だ」と確信できる文を心がけます。

→ 詳しくはタイトルタグとメタディスクリプションの書き方を参照してください。

見出しを設計するコツ

コツ1：先に見出しだけ書く

執筆前に見出しだけを箇条書きで作ると、論理構造が固まり、本文がブレません。Google ドキュメントのアウトライン機能や Notion のトグル見出しを使うと、構造を視覚的に確認しながら書き進められます。

コツ2：上位記事の見出しを参考にする

狙うキーワードで検索して、上位3〜5記事の見出し構成を分析します。共通項を抽出すれば、Googleが「このトピックに必要」と判断している要素が分かります。これはコンテンツギャップ分析の最初のステップでもあります。

コツ3：FAQ・関連記事は固定ブロック化

「よくある質問」「関連記事」「参考文献」などはh2で固定すると、テンプレ化できて効率的です。AI検索でも引用されやすくなります。

→ 詳しくはLLMが好む文章構造で具体的な構成例を確認できます。

見出し最適化の具体例（Before/After）

理屈だけだとイメージしづらいので、よくある「やりがちな見出し」を改善する例を示します。

例1：装飾目的の見出し

意味のない記号や煽りはAIにもユーザーにも伝わりません。「何の話か」を必ず本文で書きましょう。

例2：階層が崩れている

h2 → h4 → h2 → h4 の飛び階層は、構造解析時に「親セクションが推測できない」状態になります。h2 → h3 → h2 → h3 のように常に1段ずつ降りるのが正解です。

例3：キーワード詰め込み

無理にキーワードを詰めるとスパム判定されるリスクが上がります。1見出し1キーワードを目安に、自然な日本語を最優先します。

→ 詳しくは記事リライトガイドも参考になります。

やってはいけないNGパターン

• 見た目の調整目的でh2やh3を使う（CSSで調整すべき）
• 全ページ同じh1
• h1にキーワードを2つ以上詰め込む
• 見出しだけで本文がない（薄いコンテンツ）
• アイコンや画像のみでテキストがない
• ナビゲーションメニューを h2 でマークアップする（<nav> を使う）
• 引用ブロックを h3 にしてしまう（<blockquote> を使う）
• 同じ文言の見出しを繰り返す（h2「メリット」が3つ並ぶなど）

これらは検索エンジンだけでなく AI による要約でも誤った構造として解釈されます。

アクセシビリティへの配慮

見出しはスクリーンリーダー利用者にとって、ページ内ナビゲーションの重要な手段です。視覚的にだけでなく、構造として正しい見出しを使うことで、すべてのユーザーが恩恵を受けます。

WCAG 2.2では「見出しの階層を論理的に保つ」ことが推奨されており、特に成功基準 1.3.1（情報および関係性）で見出しを使った構造化が要求されています。これはSEOとも一致するため、アクセシビリティ対応＝SEO対応になる珍しい領域です。

スクリーンリーダー（NVDA、VoiceOverなど）の利用者は、見出しジャンプ機能（H キー）でページ内を移動することが多く、論理的な階層が崩れているとナビゲーション体験が著しく劣化します。健常者にとっても、見出しは「目次」「リーディングガイド」として機能するため、階層が乱れた記事は離脱率が上がる傾向があります。

スクリーンリーダーから見たh階層

実際にスクリーンリーダーで読み上げると、見出しは以下のように案内されます。

階層が飛ぶと「レベル4、見出し」のように予期しないジャンプが発生し、ユーザーは「どこかセクションを読み飛ばした？」と混乱します。これは検索エンジンも同じ感覚で受け取ります。

→ 詳しくはE-E-A-Tとはで品質シグナル全般も確認できます。

LLMOにおける見出しの重要性

ChatGPT、Perplexity、Google AI Overview などLLMO時代では、見出し構造がより重要になります。AIは見出しを手がかりに記事を要約・引用するため、構造が崩れていると引用率が下がります。

Princeton大学のGEO研究によると、引用元として選ばれる確率はコンテンツの構造的な可読性と相関があり、明確な見出し階層を持つページは生成AIの応答に最大40%多く引用される傾向が示されています。

特に次の点が効きます。

• 見出しに質問形（「〜とは？」「〜の方法」）を入れる
• FAQ形式のh3を「Q1. 〜？」のように統一する
• 見出し直後の冒頭1〜2文に結論を書く
• h2/h3 の文字数を 30 字以内に揃える（AI のサマリ生成精度が上がる）
• 見出し中にロングテールキーワードを含めるとAI Overviewに拾われやすい

→ 詳しくはLLMO完全ガイドで全体像を把握しておくと理解が深まります。

LLM が見出しから取り出す情報

LLM は見出しを「セクションの要約候補」として扱うため、見出しと冒頭1文がそのまま引用文になることが多くあります。たとえば「h2: 見出しタグの3つの基本ルール」 → 「冒頭: 見出しタグは①h1は1つ、②階層を飛ばさない、③キーワードを自然に含める、の3点が基本です。」のような形です。

この「見出し + 冒頭1文ペア」は、ChatGPT が引用ブロックとして表示する単位とほぼ一致します。意識して書くだけでブランドメンション獲得率が上がります。

→ 詳しくはブランドメンション獲得術を参照してください。

質問形式の見出しの効果

見出しを質問形にすると、ユーザーのサーチインテントとそのまま一致しやすく、AI 検索でも質問→回答の構造として理解されやすくなります。

質問形の見出しを使うときは、直後の段落で必ず簡潔な答え（30〜60字）を書いてから詳細に進むのが、AI 引用と人間の可読性を両立させるコツです。

→ 詳しくはChatGPTに引用されるコツが参考になります。

構造化データとの連携

見出しタグは HTML のセマンティクスを担いますが、それを補強するのが構造化データ（JSON-LD）です。Article、FAQPage、HowTo などのスキーマを併用すると、Google や AI クローラに「この見出しはFAQの質問」「この見出しは手順のステップ」と明示的に伝えられます。

構造化データと見出しの内容が食い違うと、Google 検索コンソールの「リッチリザルト」レポートで警告が出ることがあるので、両者は必ず一致させましょう。

→ 詳しくは構造化データ（JSON-LD）の書き方で実装方法を解説しています。

業界別の見出し設計例

業界によって読者の検索行動が違うため、見出しの最適パターンも変わります。代表的な業界別テンプレを示します。

BtoB SaaS

• h1: [製品名] とは｜機能・料金・導入事例
• h2: [製品名] の主な機能
• h2: [製品名] の料金プラン
• h2: 導入事例
• h2: 競合比較
• h2: よくある質問

機能・料金・事例・比較・FAQ の5点セットが基本。検討フェーズの読者が知りたい情報を漏れなく揃えます。

EC・物販

• h1: [商品カテゴリ] のおすすめ10選｜2026年最新
• h2: 選び方のポイント
• h2: おすすめ商品ランキング
• h3: 1位：[商品名]
• h2: 価格帯別の比較
• h2: 購入時の注意点

ランキング型の記事では h3 を商品ごとに切り、構造化データの ItemList と連動させると CTR が上がります。

メディア・ニュース

• h1: [トピック] 最新情報｜[日付]
• h2: 何が起きたのか
• h2: 背景と経緯
• h2: 専門家の見解
• h2: 今後の見通し

タイムリー性が重要なため、h1 にも日付や「最新」を入れて鮮度シグナルを強めます。

コーポレート

• h1: [サービス名]
• h2: サービスの特徴
• h2: 導入の流れ
• h2: お客様の声
• h2: お問い合わせ

CV（コンバージョン）に向けて段階的に情報を提示する構成が定番です。

→ 詳しくはピラー＆クラスターモデルも参考になります。

失敗事例

実際の現場でよく見る「これはやっちゃダメ」事例を共有します。

事例1：h1が複数

WordPress テーマによっては、サイト名と記事タイトルが両方 h1 になっていることがあります。テーマの header.php を確認し、サイト名側を span または div に変更するのが定番の対応です。

事例2：階層スキップ

LP（ランディングページ）でデザイン優先で見出しを組むと、h1 → h3 → h5 のような飛び階層になりがちです。CSS でフォントサイズを調整するという選択肢を必ず先に検討してください。

事例3：見出しと内容が一致しない

「h2: 料金プラン」の直下に料金の話がなく、機能比較が始まる、というケースです。読者の期待を裏切るため離脱が増え、AI も誤った要約を生成します。

事例4：すべての見出しが同じ文言

「h2: メリット」「h2: メリット」「h2: メリット」のように同じ文言を繰り返すのは厳禁です。「h2: コスト面のメリット」「h2: 運用面のメリット」のように差別化しましょう。

事例5：装飾用の空 h2

CSS で「セクション区切り線」として空の h2 を使うのも NG。区切りは <hr> や <section> を使うのが正解です。

→ 詳しくはE-E-A-T と LLMO の関係で品質シグナル全般を理解しておきましょう。

ツールでの見出し検証方法

書いた見出しが正しく実装されているか、公開前後で必ず確認します。代表的なツールをまとめました。

特に Screaming Frog は「サイト内のすべての h1 一覧」「h1 が複数あるページ一覧」「h1 が空のページ一覧」を一括抽出できるため、リライト前のサイト監査で重宝します。

→ 詳しくはSearch Consoleの基本で計測まで通しで学べます。

実装時のチェックリスト

書いた見出し構造を公開前に確認するチェックリストです。

Chrome DevTools のアクセシビリティパネルでは、ページの見出し構造を「Accessibility Tree」として可視化できるため、論理階層がそのまま検索エンジンとスクリーンリーダーに伝わるかを目視確認できます。

内部リンクとアンカーテキスト

見出しテキストはそのままページ内アンカー（#section-id）にもなり、他記事から内部リンクを張るときのアンカーテキスト候補になります。短すぎず長すぎず、独立して読んで意味が通る見出し名を心がけると、内部リンクのクリック率も上がります。

たとえば「h2: コツ」よりも「h2: 見出し設計の3つのコツ」の方が、別記事からアンカー付きリンクで参照したときにユーザーが内容を予測しやすくなります。これは GSC で計測したときの CTR にも明確に効きます。

→ 詳しくは内部リンク・外部リンクの設計を参照してください。

計測：見出し変更の効果をどう確かめるか

見出しを改善した後は、必ず効果を計測します。指標と取得方法をまとめました。

理想は「見出し変更前後 4〜8 週」の比較です。Google のインデックス更新には数日〜数週間かかるため、変更直後の順位下降に一喜一憂しないことが重要です。

→ 詳しくはKPI 設計と計測を参考にしてください。

多言語サイトの見出し設計

英語圏向けと日本語圏向けでは、見出しの最適文字数や語感が異なります。多言語展開する場合の注意点を整理します。

hreflang を併用しつつ、各言語ネイティブの感覚で見出しを書き分けるのがベストです。機械翻訳のままでは AI 検索でも品質が低いと判定されやすいので、必ず人手レビューを入れます。

→ 詳しくはGEO・AEO の解説も参考になります。

モバイルでの見出し表示

スマートフォンでは画面幅が狭く、長い見出しは折り返されて読みづらくなります。h1 で 30 字、h2 で 25 字以内に収めると、ファーストビューで全文が見える可能性が高まります。

また、モバイル UI ではアコーディオン UI で h2 を折りたたむことが多いですが、初期表示で折りたたんでいる場合も中身は SSR で出力しておきましょう。Google は「ユーザーがクリックして開く要素」を評価対象に含めますが、AI クローラの挙動はまちまちです。

→ 詳しくはCore Web Vitals 入門で UX シグナル全般を確認してください。

CMS 別の見出し実装の落とし穴

主要な CMS / 静的サイトジェネレータごとに、見出し周りの「ハマりどころ」をまとめました。

WordPress

• テーマによって、サイト名（ロゴ部分）が h1 で実装されているケースが多い
• 投稿タイトルとサイト名の両方が h1 になり、h1 が2つ以上あるページが量産される
• Gutenberg ブロックエディタの「見出し」ブロックは、デフォルトで h2 から始まる仕様になっており、誤って h1 を追加してしまうとさらに増える
• 対策：テーマの header.php を編集してサイト名を span または div に変更し、is_singular() の場合だけ投稿タイトルを h1 として出力する

Next.js / React 系

• ページコンポーネント側で h1 を出すか、レイアウトコンポーネント側で出すかが曖昧になりがち
• App Router を使う場合は layout.tsx と page.tsx の責務を明確にし、原則として page.tsx 側で h1 を1つ出す設計にする
• クライアントコンポーネントの中で h1 を動的に生成すると、SSR / SSG の HTML に h1 が含まれず SEO 的に致命傷になる

Hugo / Jekyll などの静的サイトジェネレータ

• マークダウン記法の # 見出し がそのまま h1 になる
• フロントマター側の title と本文先頭の h1 が二重になりやすいので、テンプレート側でどちらか一方だけ出力するようにする

→ 詳しくはサイトマップと robots.txtでクローラ周りの基礎も確認してください。

見出し設計の運用ルール化

チームで複数人がコンテンツを更新する場合、見出しのルールはドキュメント化して共有すべきです。最低限以下のルールをスタイルガイドに含めましょう。

これをテンプレート化して新人ライターのオンボーディング資料に含めておくと、品質のばらつきを抑えられます。

よくある質問

Q1. h1を画像にしてもいいですか？

A. テキスト併用が推奨です。画像のみだとテキスト情報が伝わりません。alt属性で代替テキストを必ず入れましょう。やむを得ず画像だけにする場合も <h1><img alt="…"></h1> のように h1 でラップして、構造としては必ず h1 として認識されるようにします。

Q2. h2を10個以上使ってもいいですか？

A. 数の制限はありませんが、多すぎると論点が散ります。1記事3〜8個が読みやすい目安です。10 個を超える場合は、h2 を整理して h3 に降ろすか、ピラーページとクラスター記事に分割することを検討してください。

Q3. 見出しに装飾（ボールド、色）を入れていいですか？

A. CSSで装飾するのは問題ありません。HTML側で<strong>等を入れる必要はありません。むしろ h2 内に強調タグを入れると構造が複雑になり、AI が見出しテキストを抽出しにくくなる場合があります。

Q4. h1 と title タグは完全に同じでいいですか？

A. 完全一致でも問題ありませんが、title は SERP での CTR を狙う、h1 は読者の安心感を狙う、と書き分けるとパフォーマンスが上がるケースが多いです。たとえば title「見出しタグの使い方｜SEO初心者向け完全ガイド2026」、h1「見出しタグ（h1/h2/h3）の正しい使い方」のような関係です。

Q5. h1 がない（h2 から始まる）ページは問題ですか？

A. 検索エンジンは h2 を実質的な h1 として扱う場合もありますが、明示的に h1 を1つ置く方が安全です。WordPress や Next.js のテンプレートで h1 が抜けるケースが多いので、必ず実装を確認してください。

Q6. 動的に追加されるh要素（モーダルやアコーディオン）はSEOに効きますか？

A. JavaScript で初期描画後に追加される要素は、Google のレンダリング次第で評価が分かれます。重要な見出しはサーバーサイドレンダリング（SSR）または初期 HTML に含めるのが鉄則です。

Q7. AI Overview に引用されやすい見出しの書き方は？

A. ①質問形にする、②直後の1文で結論を述べる、③数値や固有名詞を入れる、④30字以内に収める、の4点が効きます。詳しくはGoogle AI Overview対策も参照してください。

関連用語

• 見出しタグ
• タイトルタグ
• 構造化データ
• SEO
• LLMO
• サーチインテント
• アンカーテキスト
• 内部リンク

関連記事

• タイトルタグとメタディスクリプションの書き方｜CTRを上げる型
• 構造化データ（JSON-LD）の書き方
• LLMが好む文章構造｜結論先出し・FAQ・箇条書きの効果
• 記事リライト完全ガイド
• SEOの基本完全ガイド
• LLMO完全ガイド
• 内部リンク・外部リンクの設計
• サーチインテントの種類と判別方法
• 記事リライトガイド

参考文献・出典

• HTML Living Standard - Sections — WHATWG 公式仕様、見出しのセマンティクスを規定
• Google Search Central — タイトルリンク — h1 とタイトルタグの関係
• WCAG 2.2 — 見出しと構造 — アクセシビリティ標準
• MDN — Heading elements — Mozilla 公式リファレンス
• WebAIM — Semantic Structure — アクセシビリティ視点での見出し設計
• GEO 論文 (Aggarwal et al., 2023) — 生成AI引用最適化の学術研究