SEOブログの記事を開くと、冒頭に見出しの一覧である「目次」が表示されているのを見たことがあるはずです。この目次はTOC(Table of Contents)とも呼ばれています。
目次があることで、読者は自分が知りたい部分にすぐ移動でき、長い記事でも最後まで読んでもらいやすくなります。
この記事では、目次の役割と、Cocoonテーマでの基本的な設定・活用のコツを、設定手順とあわせて解説します。当サイトの104記事の目次を、実際に集計した結果も紹介します。
- 目次(TOC)は、記事内の見出しをリスト化し、クリックでその場所へ移動できるようにする機能。
- Cocoonテーマには標準で目次を自動生成する機能が備わっている。
- 見出し自体を分かりやすく書くことが、使われやすい目次を作る一番の近道。
- 当サイトの104記事すべてに、Cocoonの自動の目次が表示されている。項目の数は、平均19.1個だった(2026年10月8日)。
目次(TOC)とは何か
- 見出しへジャンプできるリンク一覧
- 離脱を防ぎ、読了率を高める
見出しへジャンプできるリンク一覧
目次は、記事内のh2やh3といった見出しを自動的に拾い上げ、クリックするとその見出しの位置までページ内を移動できるリンクの一覧です。
検索エンジンから記事の一部分だけを目的に訪れた読者にとって、目次があることで欲しい情報にすぐたどり着けるようになります。
また、検索結果に、記事内の見出しへ直接移動できるリンクが表示されることもあります。目次を整えておくことは、こうした表示の手がかりにもなります。
離脱を防ぎ、読了率を高める
長い記事ほど、冒頭で「自分が知りたい情報が載っているか」を判断してもらいやすくすることが大切です。目次はその判断材料になります。
全体の構成が一目で分かることで、読者が安心して読み進められるようになる効果も期待できます。
スマートフォンで読む読者にとっては、画面をたくさんスクロールしなくても目的の場所へ移動できる点が、特に便利です。
Cocoonテーマでの表示設定
- 標準機能で自動生成される
- 記事ごとに表示・非表示を切り替えられる
標準機能で自動生成される
Cocoonテーマには、記事内の見出しから目次を自動生成する機能が標準で搭載されており、特別なプラグインを追加しなくても利用できます。
Cocoon設定の「目次」タブから、表示するかどうかや、表示する見出しの階層(h2のみ、h2とh3など)を調整できます。
目次は、見出しを追加したり、順番を変えたりすると、自動的に更新されます。手作業で目次を作り直す必要がないため、記事を更新するときも手間がかかりません。
記事ごとに表示・非表示を切り替えられる
サイト全体の初期設定に加えて、記事の編集画面からも、その記事だけ目次を表示・非表示にする設定が可能です。
見出しの少ない短い記事では、あえて目次を非表示にするという判断も選択肢の一つです。
| 設定場所 | できること |
|---|---|
| Cocoon設定 > 目次 | サイト全体の表示ルールを設定 |
| 記事編集画面 | その記事だけの表示・非表示を切り替え |
使われやすい目次にするコツ
- 見出しに具体的な言葉を入れる
- 見出しの数を詰め込みすぎない
見出しに具体的な言葉を入れる
「ポイント1」「ポイント2」のような抽象的な見出しでは、目次を見ても内容が想像できず、読者に選んでもらいにくくなります。
見出しには、その章で何が分かるのかが伝わる具体的な言葉を入れることを心がけましょう。
見出しの付け方のコツは、記事タイトル・見出しの付け方で詳しく解説しています。
見出しの数を詰め込みすぎない
見出しを細かく分けすぎると、目次自体が長くなり、かえって全体像を把握しにくくなってしまいます。
内容のまとまりを意識して、適切な粒度で見出しを設定することが、見やすい目次につながります。
H2の数は、4〜7個程度を目安にすると、目次がすっきり見えます。階層の使い方は、hタグ(見出しタグ)の正しい使い方も参考にしてください。
目次があると、知りたい所にすぐ行けて助かるよね。
うん、しかも見出し自体がちゃんと内容を表してないと、目次を見ても中身が想像できないんだよね。だから見出しの書き方も大事なんだ。
Cocoonで目次を設定する手順
Cocoonでの目次の設定は、次の流れで進められます。画面の名称は、Cocoonのバージョンによって異なる場合があります。
- WordPress管理画面の「Cocoon設定」を開く
- 「目次」のタブを選ぶ
- 目次を表示するかどうか、表示する見出しの階層を選ぶ
- 設定を保存し、実際の記事ページで表示を確認する
記事によって表示を変えたい場合は、その記事の編集画面にある目次の設定から、個別に切り替えます。
当サイトの目次を集計した結果(実例)
- 集計の結果
- 当サイトの目次の特徴
- 調べ方
ここでは、当サイト(伸びるSEO入門)の、公開済み104記事の目次を、実際に集計した結果を紹介します(2026年10月8日)。公開中の記事のHTMLを読み取って、数えました。
集計の結果
| 項目 | 集計の結果 |
|---|---|
| 目次が表示されている記事 | 104本すべて(Cocoonテーマの自動生成の目次) |
| 目次の項目の数(H2とH3の合計) | 平均19.1個・中央値15個・最少13個 |
| 表示のスタイル | 番号つき・中央寄せ・枠線あり(104本とも同じ) |
| 開閉の状態 | 最初から開いていて、タイトルをクリックして閉じられる |
| 見出しのH1 | 104本すべて、1ページに1つだけで、記事のタイトルと一致 |
当サイトの目次の特徴
当サイトの記事は、冒頭の目次に加えて、H2ごとに、白抜きの枠で、小さな目次(H3の一覧)を置いています。長い記事でも、今どの部分を読んでいるかが分かりやすくなるようにしたためです。
目次の表示そのものが、全記事で、同じスタイルにそろっているため、読者は、どの記事でも、同じ使い方で、読みたい場所へ移動できます。
調べ方
- 確認したい記事を開き、目次の項目の数を数える
- ページのソースを表示して、「id=”toc”」を探し、目次が出力されているかを見る
- H1が、1つだけかを、同じソースの中で確認する
目次でよくある質問
目次について、初心者の方が疑問に思いやすい点をまとめました。
すべての記事に、目次は必要ですか?
見出しが多い、長めの記事では、目次があると便利です。逆に、見出しが少ない短い記事では、なくても読みやすい場合があります。記事の長さに合わせて判断しましょう。
目次が表示されません
見出しの数が少ない場合や、その記事で目次が非表示に設定されている場合は、表示されないことがあります。Cocoon設定の目次のタブと、記事の編集画面の設定を確認してみましょう。
当サイトの記事の目次は、何項目くらいありますか?
104記事の平均は19.1項目で、中央値は15項目です。いちばん少ない記事でも13項目あります(H2とH3の合計)。
目次を、自分で作る必要はありますか?
Cocoonのように、自動で目次を作るテーマなら、見出しを正しく付けるだけで、目次ができます。当サイトも、目次は自動生成で、手作業で作ってはいません。
WordPressで、目次を作る方法には、何がありますか?
大きく分けて、テーマの機能を使う方法と、プラグインを使う方法があります。当サイトは、テーマ(Cocoon)の標準機能で、見出しから目次を自動で作っています。プラグインは追加していません。
目次を、HTMLで手作業で作ることもできますか?
できます。見出しにid(目印)を付け、目次のリンクを、そのidに向ける方法です。ただし、見出しを増やしたり、順番を変えたりするたびに、手直しが必要になります。記事が多いときは、自動で作る方法のほうが、手間がかかりません。
目次でよくある失敗例は?
よくある失敗は、次の3つです。
- 見出しが抽象的で、目次を見ても内容が分からない
- H2を飛ばしてH3を使うなど、見出しの階層が崩れている
- 見出しを細かく分けすぎて、目次が長くなりすぎている
目次を整えるコツは、その土台になる見出しを整えることです。
まとめ:目次は、読者への案内板として育てていく
- 目次は、記事内の見出しへジャンプできるリンク一覧。
- Cocoonテーマの標準機能で、特別なプラグインなしに自動生成できる。
- 当サイトは、104記事すべてに自動の目次が出ている。見出しを正しく付ければ、目次は自動で整う。
目次は、読者が記事内を迷わず移動するための案内板です。
見出しの書き方とあわせて意識することで、より使いやすい目次に育てていきましょう。
記事を公開する前に、次の点を確認してみてください。
- 目次が、記事ページに正しく表示されているか
- 目次を見るだけで、記事の内容が想像できるか
- 見出しの階層と数が、適切か
SEOを基礎から順番に学びたい方は、SEO入門の進め方(はじめに)と学習ステップもあわせてご覧ください。
コメント