記事に目次があると、読者は自分が知りたい部分まで一気に飛べます。長い記事ほど効果が大きく、離脱を防ぐ効果もあります。
ただし、目次はどんな記事にも付ければよいというものではありません。見出しが2つしかない記事に目次を置くと、本文が始まるまでに余計なスクロールが増えるだけです。スマートフォンではとくに邪魔になります。
本記事では、目次を付けるべきかの判断から始めて、プラグインを使う方法と使わない方法の両方を解説します。自動で作るか手動で作るか、どの見出しまで含めるかといった設計の考え方まで扱います。
WordPressの目次設定でお困りのあなたは、最低金額8,000円〜・成果報酬制だから安心の「ワードプレスの119番」までお問い合わせください。
【ワードプレスの119番お問い合わせ窓口】
担当者直通電話番号:080-4323-3555
担当者直通メール:wordpress119@kamarudo.co.jp
そもそも、その記事に目次は必要か
先に判断基準をお伝えします。次の条件に当てはまるなら、目次を付ける価値があります。
| 条件 | 目次の要否 | 理由 |
|---|---|---|
| 見出し(h2)が4つ以上ある | 付ける | 全体像が見えないと、読者はどこまで読めばよいか分からない |
| 3,000文字を超える | 付ける | スクロール量が多く、戻るのが手間になる |
| 手順を順番に読ませたい記事 | どちらでも | 飛ばされたくない場合は、あえて付けないという判断もある |
| 見出しが2〜3個 | 付けない | 目次のほうが本文より目立ってしまう |
| ランディングページ | 付けない | 上から順に読ませる設計なので、飛ばす導線は不要 |
よく「目次を入れるとSEOに効く」と言われますが、目次そのものが検索順位を上げるわけではありません。効果があるとすれば、読者がすぐ目的の情報にたどり着けることで離脱が減り、結果として評価につながる、という間接的な形です。
検索結果に目次の項目が並んで表示されることがありますが、これはGoogleが記事の構造を読み取って自動で判断しているもので、目次プラグインを入れたから出るというものではありません。
目次を作る前に、見出しを正しく使う
どの方法を使うにしても、目次は見出しから自動的に組み立てられます。つまり見出しの使い方が間違っていると、目次も崩れます。
見出しは階層を飛ばさない
h2の次はh3、h3の次はh4という順番で使ってください。h2からいきなりh4に飛ぶと、目次の階層がずれて表示されます。
文字を大きくするために見出しを使わない
「ここを目立たせたいから見出しにする」という使い方をすると、目次に不要な項目が並びます。見た目を変えたいだけなら、太字や文字サイズの設定を使ってください。
見出しだけ読んで内容が分かるようにする
目次に並ぶのは見出しの文言そのものです。「ポイント①」「注意点」といった見出しでは、目次を見ても何が書いてあるか分かりません。目次は見出しの品質チェックにもなります。
目次を作る4つの方法
| 方法 | 手間 | 柔軟さ | 向いている人 |
|---|---|---|---|
| ① 目次プラグインを使う | 小 | 高い | ほとんどの方。記事数が多い場合は必須 |
| ② テーマの目次機能を使う | 最小 | 中 | 使っているテーマに機能がある場合 |
| ③ ブロックエディタの標準機能 | 小 | 低い | 一部の記事にだけ付けたい場合 |
| ④ 手動でリンクを書く | 大 | 最も高い | 特殊な並び順にしたい1記事だけ |
記事が何本もあるサイトでは①か②を選んでください。④は記事ごとに作り直しになるため、現実的ではありません。
方法①:目次プラグインを使う
最も一般的な方法です。プラグインを有効にすると、記事の見出しを自動で読み取って目次を組み立ててくれます。過去の記事にもさかのぼって反映されるのが大きな利点です。
Easy Table of Contents
設定画面が分かりやすく、日本語にも対応しているプラグインです。どの投稿タイプに表示するか、見出しがいくつ以上のときに出すか、どの階層まで含めるかを細かく指定できます。
とくに便利なのが「見出しが○個以上のときだけ表示する」という設定です。冒頭で書いたとおり、短い記事に目次は不要なので、ここを4程度にしておけば自動的に出し分けられます。
Table of Contents Plus
長く使われてきた定番のプラグインです。軽量で、設定項目も必要十分に揃っています。
日本のWordPressサイトで広く使われてきたため、設定方法を解説した情報が多いのも利点です。すでにこれを使っているサイトを引き継いだ場合は、無理に乗り換える必要はありません。
プラグインを選ぶときの注意点
- 2つ以上入れない:目次が二重に表示されたり、どちらの設定が効いているのか分からなくなります
- テーマの目次機能と重複させない:テーマ側に目次がある場合は、どちらかを無効にしてください
- 更新が続いているか確認する:配布ページの最終更新日を見て、1年以上止まっているものは避けます
目次が二重に出る、そもそも表示されないといった症状が出た場合はWordPressの目次が表示されない原因と対処法で切り分け方を解説しています。
方法②:テーマに付いている目次機能を使う
最近のテーマには、目次機能が最初から入っているものがあります。この場合、プラグインを追加する必要はありません。
テーマの設定画面で「目次」という項目を探してみてください。見つかれば、有効にするだけで全記事に反映されます。
テーマの機能を使う利点は、デザインがサイト全体と自然に揃うこと、そしてプラグインを1つ減らせることです。一方で、テーマを変更すると目次も消えるという弱点があります。将来テーマを入れ替える可能性があるなら、プラグインのほうが移行は楽です。
方法③:ブロックエディタの標準機能を使う
WordPressのブロックエディタには、目次を作るブロックが用意されています。記事の編集画面でブロックを追加し、「目次」で検索すると見つかります。
挿入すると、その記事の見出しが自動で読み込まれます。記事ごとに入れるかどうかを選べるので、「この記事だけ目次が欲しい」という場合に向いています。
ただし、記事ごとに手で挿入する必要があるため、数十本の記事すべてに入れるのは現実的ではありません。また、クラシックエディタを使っている場合はこの方法が使えません。
方法④:手動でリンクを書く
自動で作られる目次では順番や文言を変えられません。「目次の表記を本文の見出しと変えたい」「一部の見出しだけ載せたい」といった細かい要望がある場合は、手動で組み立てることになります。
仕組みは単純で、見出しにIDを振り、そこへのリンクを並べるだけです。
<!-- 見出し側にIDを付ける -->
<h2 id="section-1">最初の見出し</h2>
<!-- 目次側からそのIDへリンクする -->
<ul>
<li><a href="#section-1">最初の見出し</a></li>
</ul>
見出しを増やしたり文言を変えたりするたびに、目次も手で直す必要があります。直し忘れると、リンクをクリックしても飛ばない目次ができあがります。特別な理由がなければ、①か②を選んでください。
目次の設計で決めておくこと
どの階層まで含めるか
h2だけにするか、h3まで入れるかで見え方が大きく変わります。
- h2だけ:全体像がすぐ掴める。項目が5〜8個に収まる記事向き
- h3まで:目的の箇所に直接飛べる。項目が多い長文向き
- h4まで:ほとんどの場合、細かすぎて逆効果
迷ったらh3までにして、項目が20個を超えるようなら h2 だけに絞ってください。目次が画面1つ分を超えると、読む気をなくさせます。
最初から開いておくか、折りたたむか
折りたたんでおけば場所を取りませんが、ひと手間増えるぶん、実際に開かれる率は下がります。
項目が10個以内なら開いたまま、それ以上なら折りたたむ、という基準で判断してください。スマートフォンでは開いた状態の目次が画面を占領しやすいため、実機で一度確認することをおすすめします。
置く位置
一般的なのは、導入文のあと・最初の見出しの前です。読者が「この記事に求めているものがあるか」を判断するタイミングと一致します。
記事の冒頭にいきなり目次を置くと、何の記事なのかが分からないまま項目だけが並ぶことになります。導入文で記事の主旨を伝えてから、目次を見せてください。
よくある質問
目次を入れると表示速度は落ちますか?
目次プラグイン自体はごく軽いため、体感できるほどの影響はありません。ただしプラグインの数が増えること自体は負荷になります。テーマに機能があるならそちらを使うのが無駄がありません。表示速度全般についてはWordPressが重い・表示速度が遅い原因と改善策で解説しています。
目次のデザインを変えられますか?
多くのプラグインで、背景色や文字サイズ、枠線を設定画面から変更できます。それ以上に細かく変えたい場合はCSSでの調整になります。
特定の記事だけ目次を出したくありません。
主要なプラグインには、記事ごとに目次の表示・非表示を切り替える設定があります。編集画面の下のほうに目次関連の項目が追加されているので、そこで切り替えてください。
目次のリンクを押しても飛びません。
見出しに振られるIDが重複している可能性があります。同じ文言の見出しが記事内に複数あると起きやすい症状です。見出しの文言を変えるか、手動でIDを振り直してください。
目次に不要な項目が混ざります。
サイドバーやフッターの見出しまで拾っている場合があります。プラグインの設定で対象範囲を本文だけに限定できるか確認してください。また、装飾目的で見出しタグを使っている箇所があれば、そこを直すのが根本的な解決です。
まとめ
目次の作り方は4通りありますが、実際に選ぶのはほぼ①か②です。
- テーマに目次機能があるか確認する:あればそれを使う
- なければ目次プラグインを1つ入れる:Easy Table of Contentsなど
- 「見出し4つ以上で表示」に設定する:短い記事には出さない
- スマートフォンで実際に見て調整する:折りたたむかどうかはここで決める
目次を整えると、見出しの付け方そのものを見直すきっかけになります。目次に並べてみて意味が分からない見出しは、本文の構成にも問題があるサインです。
記事の構成やサイト全体の設計でお困りの場合は、株式会社カマルドにご相談ください。
WordPressの記事設計でお困りのあなたは、最低金額8,000円〜・成果報酬制だから安心の「ワードプレスの119番」までお問い合わせください。
【ワードプレスの119番お問い合わせ窓口】
担当者直通電話番号:080-4323-3555
担当者直通メール:wordpress119@kamarudo.co.jp