見出し階層H1-H3の最適化｜AIの要約精度と強調スニペット採用率を高める構造化

第2章で扱った"三枚舌"問題は主題の矛盾でしたが、主題が一致していても引用されないケースがあります。 原因は、H1配下の見出し階層そのものが壊れていること。 LLMはH2・H3・H4の入れ子構造から「情報の包含関係」を抽出しており、階層が壊れていると文脈の継承に失敗します。 結果、要約・強調表示・タイトル理解の安定性が下がる可能性があります。 本章ではそのメカニズムと、リライトによる回復手順を示します。

1. LLMはなぜ見出し階層を"構文解析"するのか

人間が記事を読む時、見出しは「視覚的な区切り」です。しかしLLM（および検索エンジンのページ理解モジュール）にとって、 見出しは木構造（tree）として読み解く対象です。H1がルート、H2が第1階層、H3が第2階層—— この入れ子が情報の包含関係を表現します。

H1: 顧問税理士の選び方
├── H2: 選定前に整理すべき3条件
│   ├── H3: 事業規模と業種
│   ├── H3: 記帳代行の要否
│   └── H3: 連絡頻度の希望
├── H2: 料金相場（2026年版）
│   ├── H3: 月額顧問料
│   └── H3: 決算申告料
└── H2: 契約前の確認事項
    ├── H3: 専門分野の適合性
    └── H3: 担当者の変更ルール

→ LLMはこの木構造から、
  「事業規模と業種」は「選定前の条件」の一部、
  「月額顧問料」は「料金相場」の一部、と理解する。

2. 階層破綻の典型4パターン

実務で頻出する見出し階層の破綻を、4つのパターンに整理します。 いずれもブラウザ上では見た目が整っているため、視覚確認だけでは発見できないのが特徴です。

パターン① 階層スキップ（H1 → H3）

H2を飛ばしてH1の直下にH3が登場するケース。最も頻発する破綻パターンです。 デザイナーが「H2は目立ちすぎる」として、見出しサイズを落とすためにH3タグを選んだ結果、 LLMは「H2という中間カテゴリが存在しない」と解釈し、トピック構造が1段浅くなります。

<h1>顧問税理士の選び方</h1>
<h3>事業規模で選ぶ</h3>     <!-- H2 が欠落 -->
<p>…</p>
<h3>業種で選ぶ</h3>
<p>…</p>
<h3>料金相場</h3>          <!-- 別トピックなのにH3 -->
<p>…</p>

<h1>顧問税理士の選び方</h1>
<h2>選定前に整理すべき3条件</h2>
  <h3>事業規模で選ぶ</h3>
  <h3>業種で選ぶ</h3>
<h2>料金相場（2026年版）</h2>
  <h3>月額顧問料</h3>
  <h3>決算申告料</h3>

💡 見た目の大きさはCSSで調整する
H2タグを使うとデザイン上「目立ちすぎる」場合は、CSSでフォントサイズを落とすのが正解です。 H1/H2/H3のタグは意味（包含関係）を表現し、見た目はスタイル側で調整する—— これがセマンティックHTMLの基本原則です。

パターン② 複数H1問題（同階層の乱立）

1ページ内にH1が複数存在するケース。HTML上は複数H1が許容される場面もありますが、実務上は1ページ1 H1のほうが主題を明確に伝えやすいと考えるのが安全です。 Google も title link 生成で main visual title や heading を参照するため、同格の大見出しが複数あると主題の中心が曖昧になりえます。

パターン③ 意味のないH3連打

H2配下で本来1段落で済む内容を、短いH3を装飾目的で連打するパターン。 「読みやすさ」のために見出しを追加しているが、機械側から見ると「H2のトピックがH3という細かい粒度でさらに分割されている」ように見え、 木構造を不必要に深くしてしまいます。これはセクション要約や段落抽出を混乱させることがあります。

<h2>料金相場</h2>
<h3>まず結論</h3>
<p>月3万円〜が相場です。</p>
<h3>理由</h3>
<p>業務範囲と業種による変動があるためです。</p>
<h3>具体例</h3>
<p>法人決算込みの場合は月5万円前後…</p>

<h2>料金相場</h2>
<p><strong>結論：月3万円〜が相場</strong>。業務範囲と業種による変動があります。
具体的には、法人決算込みの場合は月5万円前後、個人事業主の記帳代行のみなら月1.5万円前後が目安です。</p>

パターン④ 見出しと本文のトピックずれ

H2に「料金相場」と書いてあるのに、直下の本文が「税理士選びの心構え」から始まる—— 見出しと本文のトピックが一致しないケース。見出しは「そのセクションのラベル」として読まれやすいため、 ラベルと中身がずれると、段落の意味づけが不安定になります。

3. AIOGeoScan診断レポートで階層破綻を特定する

AIOGeoScanの「見出し & コンテンツ」カテゴリは、ページ内の見出しを階層ツリーとして可視化します。 以下の3つのサインが出ていたら、本章のパターン①〜④に該当する可能性が高いと考えられます。

4. 階層を回復する"3ステップ・リライト"

破綻が特定できたら、以下の3ステップで回復します。本文に手を入れる前に構造だけを先に直すのがコツです。

5. Next.js / MDX での実装パターン

ブログやナレッジ記事をMDXで書くプロジェクトでは、見出しスキップを型レベルで防ぐことができます。 以下は、mdxComponentsで見出し階層を監視するパターンです。

// mdx-components.tsx
import type { MDXComponents } from 'mdx/types';

let lastLevel = 0;

function warnIfSkip(level: number) {
  if (process.env.NODE_ENV === 'development'
      && lastLevel > 0
      && level > lastLevel + 1) {
    console.warn(
      `[heading-hierarchy] skipped: H${lastLevel} → H${level}`
    );
  }
  lastLevel = level;
}

export function useMDXComponents(
  components: MDXComponents
): MDXComponents {
  return {
    h1: (p) => { warnIfSkip(1); return <h1 {...p} />; },
    h2: (p) => { warnIfSkip(2); return <h2 {...p} />; },
    h3: (p) => { warnIfSkip(3); return <h3 {...p} />; },
    h4: (p) => { warnIfSkip(4); return <h4 {...p} />; },
    ...components
  };
}

⚠️ Server Components での注意
上記パターンはモジュールレベルの変数 lastLevel を使っているため、 Next.js App Routerでページ境界を越えた状態共有が起きないよう、 ビルド時のlintに組み込むか、ページ単位でのASTチェックに移す設計が本番向きです。

6. リライト効果の測定：3つの観測指標

階層を直したあとは、効果を測定します。検索表示やAI由来トラフィックの変化は即座には動かないことが多いため、2〜6週間の観測期間を前提に 以下3つの指標を追跡します。

7. 階層とh3内容の"二重整合"が最終到達点

完成形は、「見出しツリーの構造」と「各見出し配下の本文内容」の両方が一致している状態です。 構造だけ整えても、本文がそのラベリングに応答していなければAIは混乱します。 逆に本文が充実していても、階層が壊れていれば木構造として読めません。この両者を揃えるのが、本章のゴールです。

8. 次章：運用で整合性を"落とさない"仕組み

本章と第2章で扱った修正は、いずれも1回の手術です。 しかし運用を続ければ、記事リライト・CMS変更・デザインリニューアルのたびに整合性は再び崩れます。 次の 第4章「運用編」では、 3層の同期を継続的に維持するためのチェックリスト・レビュー観点・CI組み込みパターンを体系化します。