Webサイトやブログで長い記事を読むとき、「知りたい情報がどこにあるのか分からない」と感じることがあります。

そのようなときに役立つのが、記事の目次（Table of Contents）です。

目次は、記事内の見出しを一覧にし、読者がページ全体の構成を確認したり、必要な場所へ移動したりするためのナビゲーションです。

特に、見出しや情報量が多い長文記事では、適切な目次を設置することで内容を探しやすくなる場合があります。

一方で、次のように単純に考えるのは適切ではありません。

• 目次を設置すれば検索順位が上がる
• 目次があれば滞在時間が伸びる
• H2とH3をすべて目次に載せるべき
• すべての記事に目次が必要

目次で大切なのは、SEOのために項目を増やすことではなく、読者が記事の構造を理解し、必要な情報へ移動しやすくすることです。

この記事では、目次の基本的な役割、SEOとの関係、見出し構造の考え方、HTMLでの実装方法、スマートフォンやアクセシビリティへの配慮、目次が不要なケースまで初心者向けに解説します。

記事を読みやすく整理する基本は、 箇条書き・表・図の使い方 もあわせて参考になります。

記事の目次とは

記事の目次とは、ページ内にある主な見出しを一覧化し、それぞれのセクションへ移動できるようにしたナビゲーションです。

たとえば、この記事に次の見出しがあるとします。

• 記事の目次とは
• 目次を設置する目的
• 目次とSEOの関係
• HTMLでの作り方
• スマートフォンでの注意点
• まとめ

目次から「HTMLでの作り方」を選択すると、その見出しまでページ内を移動できるようにします。

長い記事を最初からすべて読まなくても、読者が自分に必要な情報へ進めることが目次の主な役割です。

目次を設置する主な目的

記事全体を把握しやすくする

長い記事では、本文を読み始める前に「何が書かれているのか」が分かりにくいことがあります。

目次があれば、見出しを一覧で確認できるため、記事全体の構成を把握しやすくなります。

たとえば、「SEO記事の書き方」という長い記事で、次の項目が目次に並んでいれば、どの範囲まで説明している記事なのかを確認できます。

• キーワード選定
• 検索意図
• 競合調査
• タイトル
• 見出し構成
• 本文作成
• 公開後の確認

必要な情報へ移動しやすくする

すべての読者が記事を最初から順番に読むとは限りません。

たとえば、すでにキーワード選定の方法を知っている人であれば、「タイトルの付け方」だけを確認したい場合があります。

そのようなとき、目次から目的の見出しへ移動できれば、必要な情報を探す負担を減らせます。

長い記事のナビゲーションとして使う

目次は、ページ内を移動するための案内としても利用できます。

情報量が多い記事では、現在どのような内容があり、どこへ移動できるのかを示すことが重要です。

ただし、短い記事では目次そのものが必要ない場合もあります。

記事の長さや見出し数だけで機械的に判断するのではなく、読者がページ内で迷う可能性があるかを基準に考えましょう。

目次とSEOの関係

目次について調べると、「SEOに効果がある」と説明されることがあります。

ただし、目次を設置すること自体を、直接的な順位向上施策として考えるのは適切ではありません。

目次を付ければ検索順位が上がるわけではない

目次の主な役割は、ユーザーがページ内を利用しやすくすることです。

目次を追加したからといって、それだけで検索順位が上がることを保証するものではありません。

SEOでは、次のような要素も含めてページ全体を考える必要があります。

• 検索意図に合った内容か
• 必要な情報を十分に説明しているか
• 内容が正確か
• オリジナルの情報や経験があるか
• 内部リンクが適切か
• スマートフォンでも利用しやすいか
• ページの表示や操作に問題がないか

目次は、こうしたページ全体の使いやすさを考える中の一要素として扱いましょう。

検索意図の基本は、 検索意図の読み取り方 も参考になります。

滞在時間や直帰率だけで判断しない

目次があることで、読者が目的の場所へ移動しやすくなる場合があります。

一方で、「目次を設置したから滞在時間が長くなった」「滞在時間が長くなったから検索順位が上がる」と単純に考えることはできません。

たとえば、ユーザーが目次から必要な場所へ移動し、短時間で疑問を解決してページを閉じた場合、滞在時間は短くてもページの役割を果たしている可能性があります。

GA4などの行動データはサイト改善の参考になりますが、一つの指標だけをSEO評価と直接結び付けないことが大切です。

検索結果にページ内リンクが表示される場合がある

Google検索では、検索結果にページ内の特定セクションへのリンクが表示される場合があります。

ただし、目次を設置すれば必ず表示されるものではありません。

検索結果でどのリンクを表示するかはGoogleが自動的に判断します。

そのため、検索結果にセクションリンクを表示させるために目次を作るのではなく、読者が記事内を移動しやすくするために、分かりやすい見出しとページ内リンクを用意するという順番で考えましょう。

目次を作る前に見出し構造を整理する

良い目次を作るには、先に本文の見出しを整理する必要があります。

目次だけを分かりやすくしても、本文の構成が分かりにくければ、読者は記事を理解しにくくなります。

H2は大きなテーマに使う

H2は、記事の中で大きな話題が切り替わる場所に使います。

たとえば、「目次の作り方」という記事なら、次のような内容がH2の候補になります。

• 目次とは
• 目次とSEO
• HTMLでの実装方法
• スマートフォンでの設計
• よくある失敗

H3はH2の内容を詳しく説明するときに使う

H3は、H2の中をさらに分ける必要がある場合に使用します。

たとえば「目次とSEOの関係」というH2の中に、次のようなH3を配置できます。

• 目次自体は直接的な順位向上施策ではない
• 滞在時間だけでSEOを判断しない
• 検索結果にページ内リンクが表示される場合がある

SEOのためだけに階層を作らない

「H2の次は必ずH3」「H3を使った方がSEOに強い」といった考え方で見出しを増やす必要はありません。

重要なのは、読者が記事の構造を理解しやすいことです。

また、見出しの論理的な構造は、スクリーンリーダーなどを利用する人にとってもページを理解する手がかりになります。

H2とH3を目次へどう載せるか

記事内にあるすべての見出しを、必ず目次へ表示する必要はありません。

特に長い記事では、H3まで全部掲載すると、目次自体が非常に長くなる場合があります。

H2だけを目次へ表示する

最もシンプルなのは、H2だけを表示する方法です。

たとえば、次のような形です。

• 目次とは
• 目次とSEO
• 目次の作り方
• 注意点
• まとめ

記事全体の大きな流れを把握する目的であれば、これだけでも十分な場合があります。

重要なH3だけ表示する

一部のH2に複数の重要な論点がある場合は、必要なH3だけ表示する方法もあります。

ただし、目次が複雑になりすぎないようにしましょう。

見出しと目次の文言を大きく変えない

目次のリンクテキストは、リンク先の見出しと同じ、または意味が明確に一致する表現にすると分かりやすくなります。

表現を短くする場合でも、意味が変わらないようにしましょう。

HTMLで目次リンクを作る方法

目次の基本は、ページ内リンクです。

リンク先の見出しへidを設定し、目次側のhrefからそのidを指定します。

基本的なHTML

<nav class="toc" aria-label="目次">
  <ul>
    <li><a href="#sec1">目次とは</a></li>
    <li><a href="#sec2">目次の作り方</a></li>
    <li><a href="#sec3">注意点</a></li>
  </ul>
</nav>

<h2 id="sec1">目次とは</h2>

<h2 id="sec2">目次の作り方</h2>

<h2 id="sec3">注意点</h2>

目次の<a href="#sec2">をクリックすると、id="sec2"が設定された見出しまでページ内を移動します。

hrefとidを対応させる

ページ内リンクでは、hrefの#以降と、移動先のidを一致させます。

たとえば、href="#seo"なら、リンク先はid="seo"にします。

文字が異なっていると正しく移動できません。

同じidを複数使わない

同一ページ内で、同じidを複数の要素へ設定することは避けます。

<h2 id="seo">SEOとは</h2>

<h2 id="seo">SEOのメリット</h2>

このように同じid="seo"を使うと、ページ内リンクの移動先が分かりにくくなります。

各見出しへ固有のidを設定しましょう。

navとaria-labelを使って目次の役割を伝える

目次は、ページ内を移動するナビゲーションとして扱えます。

HTMLでは、次のようにnav要素を使う方法があります。

<nav class="toc" aria-label="目次">
  ...
</nav>

aria-label="目次"を設定すると、このナビゲーションが何のためのものなのかを支援技術へ伝えやすくなります。

ページ内に、グローバルナビゲーション、パンくずリスト、記事目次、フッターナビゲーションなど複数のナビゲーションがある場合、それぞれの役割が分かるように設計するとよいでしょう。

見出しは内容が分かる表現にする

目次に表示される見出しは、記事全体の案内にもなります。

そのため、見出しだけを見ても「何について説明しているのか」が分かることが重要です。

分かりにくい例

• 重要なポイント
• 注意してください
• 詳しく解説
• まずはこちら
• 便利な方法

改善例

• 目次を設置する目的
• 目次とSEOの関係
• HTMLで目次リンクを作る方法
• スマートフォン表示の注意点
• 目次作成でよくある失敗

文字数を短くすることそのものが目的ではありません。

不必要な言葉を減らし、そのセクションで何を説明するのかが伝わる見出しにしましょう。

目次を置く位置

長文記事では、タイトルと導入文の後、本文へ入る前に目次を配置する方法がよく使われます。

たとえば、次のような順番です。

1. 記事タイトル
2. 導入文
3. 目次
4. 本文

この位置であれば、読者は本文を読み始める前に記事全体の構成を確認できます。

ただし、この順番がすべての記事で正解というわけではありません。

サイトのデザインや記事内容によっては、タイトル直後、要約の後、導入文の後、目次なしなどでも問題ありません。

SEO上の固定ルールとして考えるのではなく、読者が利用しやすい位置を選びましょう。

スマートフォンでの目次設計

PCでは問題なく見える目次でも、スマートフォンでは画面を大きく占有する場合があります。

特にH3まで多数掲載している記事では、本文に到達するまで長い目次をスクロールしなければならなくなることがあります。

目次を長くしすぎない

まずは、本当に目次へ載せる必要がある見出しかを確認しましょう。

• H2だけにする
• 一部のH3を除外する
• 見出し名を整理する

折りたたみ式も検討する

目次が長い場合は、「目次を開く」「目次を閉じる」といった折りたたみ式にすることもできます。

ただし、単にJavaScriptで表示・非表示にするだけでなく、操作性にも配慮しましょう。

開閉操作には、リンクではなくbutton要素を使う方法があります。

<button
  type="button"
  aria-expanded="false"
  aria-controls="toc-list">
  目次を開く
</button>

<nav id="toc-list" aria-label="目次">
  ...
</nav>

開閉状態に応じてaria-expandedを切り替えることで、支援技術にも状態を伝えやすくなります。

タップしやすさを確認する

スマートフォンでは、目次リンクの間隔が狭すぎると誤操作しやすくなります。

実機やブラウザのモバイル表示で、次の点を確認しましょう。

• リンク同士が近すぎないか
• 文字が小さすぎないか
• タップしやすいか
• 折り返しが不自然ではないか

目次を設置しなくてもよい記事

すべての記事へ目次を設置する必要はありません。

たとえば、次のような記事では、目次がなくても読みやすい場合があります。

• 本文が短い
• H2が1〜2個しかない
• FAQが数問だけ
• お知らせ記事
• 簡単な用語解説
• 1つの操作だけを説明する記事

短い記事へ目次を設置すると、タイトル、導入文、目次、H2、本文と似た内容が連続し、かえってページが煩雑になる場合があります。

「何文字以上なら目次を付ける」と固定せず、読者が必要な情報を探す際に目次が役立つかどうかで判断しましょう。

長い記事では「目次へ戻る」導線も検討する

情報量が非常に多い記事では、ページの途中から再び目次へ戻りたいことがあります。

そのような場合は、「目次へ戻る」「ページ上部へ戻る」といった補助リンクを設置する方法もあります。

ただし、すべての記事で必要な機能ではありません。

ブラウザや端末にはスクロール機能もあるため、実際のページ長や読者の利用状況を見ながら判断しましょう。

目次作成でよくある失敗

すべての見出しを目次へ入れる

H2やH3をすべて掲載すると、記事より目次の方が複雑になることがあります。

大きな構成を理解するために必要な見出しを優先しましょう。

目次のために見出しを増やす

目次を充実させるためだけに見出しを細かく分割すると、本文が読みにくくなる場合があります。

見出しは、内容が切り替わる場所に必要な分だけ設置します。

見出しと本文が一致していない

たとえば、「目次の作り方」という見出しなのに、本文では目次のメリットしか説明していない場合、読者の期待と内容が一致しません。

見出しは、そのセクションで実際に説明する内容を表すようにします。

目次のリンク先が間違っている

hrefとidの対応が間違っていると、目次から目的の場所へ移動できません。

公開前にすべての目次リンクを実際にクリックして確認しましょう。

スマートフォンで目次が長すぎる

PC画面だけで確認していると、スマートフォンで目次が画面を大きく占有していることに気付かない場合があります。

PCとスマートフォンの両方で確認しましょう。

SEO目的でキーワードを詰め込む

目次に表示される見出しだからといって、検索キーワードを何度も入れる必要はありません。

自然な文章で、そのセクションの内容を表しましょう。

タイトルや見出しでキーワードを扱う基本は、 SEO記事タイトルの付け方 も参考になります。

公開前の目次チェックリスト

見出し構造

• H2が記事の大きなテーマになっているか
• H3がH2の内容を補足しているか
• 見出しを細かく分けすぎていないか
• 見出しと本文の内容が一致しているか
• 見出しだけを見ても内容が分かるか

目次

• 本当に目次が必要な記事か
• 必要な見出しだけを表示しているか
• H3を載せすぎていないか
• 目次と見出しの意味が一致しているか
• 目次自体が長くなりすぎていないか

ページ内リンク

• hrefとidが一致しているか
• 同じidを複数使用していないか
• すべてのリンクが正しい位置へ移動するか
• ページ内リンク切れがないか

スマートフォン

• 目次が画面を圧迫していないか
• リンクをタップしやすいか
• 文字が小さすぎないか
• 折りたたみ機能が正しく動くか

アクセシビリティ

• 目次の役割が分かる構造になっているか
• 折りたたみ操作をキーボードでも行えるか
• 開閉状態を支援技術へ伝えられるか
• 見出し構造が論理的か

公開後に確認したいこと

目次は設置して終わりではありません。

実際のサイトで使いやすいかを確認します。

たとえば、次の点を確認できます。

• 目次リンクが正常に動くか
• スマートフォンでも利用しやすいか
• ページ上部を目次が占有しすぎていないか
• 記事追加・修正後にリンク切れがないか
• 見出し名と本文が一致しているか

GA4やヒートマップなどを導入している場合は、必要に応じてユーザー行動を確認することもできます。

ただし、「目次を付けたら滞在時間が増えたからSEOに成功した」と一つの数値だけで判断するのは避けましょう。

同じ時期に検索順位、流入キーワード、記事内容、季節性などが変化している可能性もあります。

目次については、まず読者がページ内を利用しやすくなっているかを基準に確認することが大切です。

Search Consoleの基本指標は、 GSCの用語と指標をやさしく理解 も参考になります。

まとめ

記事の目次は、検索順位を上げるために設置するものではありません。

主な目的は、長い記事の構成を分かりやすくし、読者が必要な情報へ移動しやすくすることです。

目次を作るときは、次の点を意識しましょう。

• 先に本文の見出し構造を整理する
• H2を中心に必要な項目だけを掲載する
• H3をすべて目次へ入れる必要はない
• 目次とリンク先の見出しを一致させる
• hrefとidを正しく対応させる
• スマートフォンでの表示を確認する
• 長い目次では折りたたみも検討する
• アクセシビリティにも配慮する
• 短い記事では無理に目次を設置しない

また、検索結果にページ内リンクが表示されたり、読者の行動が変化したりする場合はありますが、目次の設置だけでSEO効果を判断することはできません。

目次はあくまで、読者が記事を利用しやすくするためのナビゲーションとして設計することが基本です。

まずは既存の長い記事を1本確認し、「どのような内容があるか分かりにくくないか」「必要な情報へ移動しやすいか」という視点から、目次が必要かを確認してみましょう。