目次は、ユーザーの利便性を高め、SEO対策にも効果的だ。
しかし、目次作りになんとなく手間を感じている読者も多いだろう。
あまり目次を重要視していないのならば、非常に勿体無い。
本記事では、実際に目次の作成手順からクリック率を高める施策まで、余すことなく紹介していく。
これでもう、目次作りに迷うことはない。
目次
WordPressに目次を入れるべき4つの理由
1.実際に目次がクリックされている
論より証拠。
こちらの画像(ヒートマップ)を見てほしい。
これは、Webサイト内でユーザーがどのような動きをしたかを表している。
色が赤いほど、ユーザーにクリックされている数が多い。
ご覧の通り、目次は多くのユーザーにクリックされていることがわかる。
目次がクリックされているということは、ユーザーに記事の詳細を見てもらえているという証拠だ。
ユーザーに記事を読んでもらえているということは、記事の評価が高まる。
ユーザーは疑問や悩みを抱えていて記事にたどり着きます。
「そもそもこの記事に答えがあるのかを探している」という段階であり、記事を全部読もうとしているわけではありません。
ユーザーは、毎回記事を全部読む時間はないし、読もうともしていない。
「この記事の中に答えがあるのか」を知りたくて目次にたどり着く。
そして答えがありそうだと思った時に、目次をクリックして内容を確認している。
つまり目次がクリックされているということは、ユーザーに必要な情報を迷いなく届けられ、疑問や悩み解決の役に立てているという証拠だ。
2.記事の全体像をすぐに把握できる
次に、目次はただの見出しではなく、記事の要約という機能があることを知ってもらいたい。
要約のある記事と、要約のない記事。
どちらの方が内容理解が進むか、容易に想像できるだろう。
書籍でも「目次から読む」という人は多い。
目次で全体像を把握しておくことで、ユーザーの迷いを減らすことが出来る。
記事も同じで、目次がないとユーザーを迷子にさせてしまいます。迷ってしまうと、そもそも記事を読んでもらえないことが多いです。
また、WordPressの目次は、該当箇所にすぐに遷移できるようになっている。
つまり、目次をクリックしたら、迷うことなく該当箇所の記事が読める。
しかし目次がない場合、該当箇所を一から探さないといけない。
特に長文の記事だと、目的の箇所を探していたが、見つからずに離脱してしまうといったケースが考えられる。
これは非常にもったいない。
ユーザーの悩みを解決する文章を書いていても、探しきれずに読まれなければ意味がない
3.検索順位の向上に繋がる（SEO対策）
ここまでは、ユーザー側のメリットを述べたが、もちろんWebサイト運営側にも大きなメリットがある。
それは、目次の作成がそのままSEO対策にも繋がることだ。
SEO対策を説明する上で、覚えて欲しいのが、Googleが提唱しているこの一文。
検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
参照元：Google「ウェブマスター向けガイドライン(品質に関するガイドライン)
Googleは徹底的にユーザーファーストを貫いている。
ユーザーファーストを貫くGoogleに評価されるには、利便性を最優先させなければならない。
目次が検索順位の向上に繋がる過程は、以下の4段階で表される。
- 記事の利便性が高まる
- ユーザーの良質な行動データが溜まる
- 記事がより高く評価される
- 検索順位が向上する
つまり、結果的に目次作りはSEO対策に直結している。
4.検索結果に表示される可能性もある
目次が、Googleの検索画面に表示されることがある。
上記は、『検索順位 クリック率』で検索した際に、表示される検索結果だ。
上記の赤枠で示している箇所が、目次の一部だ。
クリックするとすぐにその記事の目次部分に遷移するようになっている。
このように検索画面に目次が表示されると、以下のようなメリットがある。
- 青字で目を引きやすい
- 検索画面での露出範囲が増える
- 結果的にwebサイトへの流入が増える
以上のことから、ユーザーにとっても、運営者にとっても目次は必要不可欠な要素になっている。
忘れてはならないのが、ユーザーは記事を読みたくて記事にアクセスするわけではない。
ユーザーは知りたい情報があるから記事にたどり着いている。
ユーザーがいかに手間を省いて、適切な情報にスムーズにアクセスできるかを考えてあげれば、目次の作成は必要です。
WordPressに目次を入れる3つの手段
WordPressに目次を入れるべき理由について、理解していただけただろうか。
では、実際にどうやって目次を入れたらいいのか。
ここでは、主要な3つの手段を紹介しよう。
1.プラグインを導入する
まずはじめに、WordPressのプラグインを使用して目次を入れる方法がある。
結論、この方法が一番オススメだ。
今回ご紹介するプラグインは「Table of Contents Plus」。
- 自動で目次を作成してくれる
- 見出しを使いながら記事を書くだけで完成
- 記事内の見出し(h2〜h6)を自動で認識し階層分けしてくれる
最初にプラグインの設定だけ済めばあとはとても簡単。
プラグインの設定方法は「WordPressプラグインで目次を作る手順」で詳しく解説していく。
2.箇条書きで自作する
こちらが、自作した目次の一例である。
目次の各リンクを押すと、
自作の方法は2パターン。HTML・CSSの知識が少し必要になります。
WordPress初心者の方は、プラグインの導入の方が簡単で早く、クオリティ高いものができます。
では、自作の方法を1つずつ解説していこう。
1.テキストエディタを使用する場合
WordPressの投稿画面で「テキスト」を選択する。
テキストエディタ(左)でコードを記述すると、画像右のように表示される。
これで簡単な目次が、作成可能だ。
| コード | 表示 |
 |
 |
細かく解説していこう。
前述した通り、目次は一般的にクリックすると該当箇所に飛ぶようになっている。
つまり文章だけでなく、リンクの設定をしなければならない。
この時、同一記事内でリンクを設定するには「id」というのを使用する。
下のコードを見て欲しい。
- 見出しの前の<h2>タグに<id=”id名”>を記載する。
※「アンカー」という - 目次の<li>タグの後の<a href=”#id名”>を記載すると、同様のidリンクが記載されている箇所がリンク先となる。
これでテキストエディタでの目次作成は完了だ。
2.ビジュアルエディタで作成する場合
テキストエディタと同様、完成形はこちらだ。
早速解説していく。
WordPressの投稿画面で「ビジュアル」を選択。
まずは、見出し部分から作成しよう。
- 左上のタブで見出しを選択(今回は見出し2)。
- 見出しの文章を直接入力する
次に目次部分を作成していく。
- 番号付きリストを選択
- 各見出しを順に記載
表面上はこれで目次が完成だ。
以下の手順でリンクの設定方法を、一つずつ解説していく。
- プラグイン「Advanced Editor Tools」をダウンロード
- 見出しにアンカーを挿入
- 目次にアンカーを使用したURLを挿入
WordPressのビジュアルエディタで目次のリンク設定(アンカー)を使用する場合、新たにプラグインのダウンロードが必要だ。
「Advanced Editor Tools」をインストールし、有効化しよう。
「Advanced Editor Tools」を有効化すると、エディタの上部に「挿入」タブが表示される。
該当箇所を選択し、挿入タブ内の「アンカー」を選択しよう。
これで、見出し1の部分に「アンカー：first」が挿入された。
次に、実際の目次にリンクを設定していく。
- 目次部分を選択（画像では見出し1）
- 右上のクリップマークを選択
- 選択した目次の下に表示される窓にURLを入力
例）#first
これを一つ一つの見出しで設定すれば、目次が自作ができます。
3.WordPressテーマに備わっている機能を使う
WordPressのテーマによっては、すでに目次の機能が標準で備わっているものも少なくない。
これなら、新たにプラグインを入れる必要もなく、また自作することもなく簡単に設定が可能である。
ここでは、例として、WordPressのテーマ「SWELL」を使用している時の画面を使い、目次の設定方法を紹介していく。
STEP1.外観→カスタマイズを選択
はじめに、WordPressのダッシュボードから、「外観→カスタマイズ」を選択。
STEP2.投稿・固定ページを選択
STEP1を行うと、下の画像のような「カスタマイザー」と呼ばれるページが開く。
「投稿・固定ページ」という項目を選択しよう。
STEP3.目次を選択
すると、下位項目に「目次」が出てくるので選択。
下記のような画面が表示される。
ここで、以下のような内容を設定すれば、目次が簡単に完成する。
- 目次のタイトル
- 目次のリストタグ(ol：数字/ul：箇条書き)
- 階層表示
- 見出しが何個以上あれば表示するか
WordPressプラグインで目次を作る手順
ここからは、実際に「Table of Contents Plus」のプラグインを使用した目次の作成方法を画像を用いて解説していく。
WordPressのテーマ、「STORK19」を使用したサイトを例に挙げています。
1.『Table of Contents Plus』を新規追加する
STEP1.プラグイン「Table of Contents Plus」の追加
まずは、プラグインを追加しよう。
画像の通り「プラグイン」→「新規追加」を選択。
STEP2.Table of Contents Plusのインストール
右上のキーワード検索で「Table of Contents Plus」と検索。
「今すぐインストール」をクリック。
STEP3.Table of Contents Plusの有効化
インストールが完了すると、「今すぐインストール」のボタンが「有効化」に変わる。
有効化を押さないと、プラグインを利用することができないので注意が必要だ。
これで、正式に「Table of Contents Plus」のプラグインのインストールが完了した。
WordPressのプラグインは基本的にどれもインストール方法は一緒である。
2.『Table of Contents Plus』の基本設定を行う
STEP1.設定画面を開く
プラグインを有効化したら、「設定」から、「TOC＋」というものを選択しよう。
ここで、「Table of Contents Plus」のさまざまな設定ができる。
STEP2.目次位置の設定
基本設定ではまず、目次の位置を設定する。
特に強いこだわりがなければ、デフォルト「最初の見出し(h2)の前」がオススメだ。
当メディアも同様の設定になっている。
上は「記事の一番上」、下は「記事の一番下」を指している。
STEP3.目次の表示条件と該当コンテンツを選択
次に、目次の表示条件（いくつ以上の見出しがある時に目次を設定するか）と、どこのページで表示させるかを設定する。
この設定の場合、見出しが3つであれば、目次が表示されないようになっている。
また、コンテンツタイプというのは以下の通りである。
- post：固定ページ
- page：投稿ページ
どちらで記事を執筆しているかによって設定を変更しておく必要がある。
STEP4.目次上のタイトル設定
目次上に表示させるタイトルを設定しよう。
「目次の上にタイトルを表示」では、今回「目次」と設定したが、英語表記がよければ「コンテンツ」や「Contents」などに変更しても良い。
また、「ユーザーによる目次の表示・非表示切り替えを許可」では、下の画像の通り、ユーザーに選んでもらうことができる。
STEP5.階層表示の設定
次に階層表示の設定について説明していこう。
設定は簡単で、チェックをするかしないかだけだ。
下の画像の通り、目次の表示方法が変わってくる。
▼階層表示あり(左)、階層表示なし(右)
好みもあるが、h2、h3見出しを目次に表示させるのであれば、階層表示のほうが見やすいことがわかる。
STEP6.番号振りの設定
番号振りは、言葉の通り、目次表示に番号を振るかどうかを設定することが可能だ。
▼番号振りあり(左)、番号振りなし(右)
STEP7.目次の外観を設定する
基本設定の最後は、目次全体の外観を決めていこう。
横幅や文字サイズ、デザインまで自由に選択が可能である。
当メディアはデフォルトのままだが、すでに綺麗なデザインになっているのがわかるだろう。
今回の説明のように、WordPressのテーマを使用した場合、プラグインのデザインが最初から組み込まれていることがある。
解説画像は全てWordPressテーマ「STORK19」を使用しているので、このような綺麗なデザインで表示がされる。
3.『Table of Contents Plus』の上級者向け設定を行う
では、最後の設定に入る。
上級者向けの設定と書いてあるが、一点だけ設定し直しておくことをオススメする。
見出しレベルの設定で、どのレベルまで、目次に含めるかを設定できる。
その他の項目は、特に変更しなくてよいだろう。
最後に、「STORK19」とデフォルトでの目次設定を比較してこのプラグインの紹介を終わりにする。
▼STORK19(左)、デフォルトテーマ(右)
明らかにデザイン性が異なる。
左は当メディアのように、綺麗なデザインになっているのがわかるだろう。
どちらを使用した方が、ユーザーの利便性が高まるかは一目瞭然だ。
WordPressで目次のクリック率を高める4つの施策
ここまでで、WordPressで目次を作成することができただろう。
最初に提示した通り、目次はユーザーにクリックされやすいことがわかっている。
しかし、さらに目次のクリック率を高める施策があるので紹介していこう。
構成や見出しの文章量を見直す
目次は記事内の見出し(h2〜h6)を抜粋して作られる。
そして先述の通り、目次には要約の機能がある。
そのため文章構成が複雑であったり、見出しの文章量が多い状態だとせっかくの目次も見にくいもののとなってしまう。
実例を挙げてどのように見直すかを解説していきます。
例1.見出しの表示を見直す
例えば、見出しの全て(h2〜h6)が表示されていると、このように煩雑化してしまう。
そこでオススメは、h2のみを目次に表示させる方法だ。
本記事含め、シンクノの記事は全てh2のみが目次表示されるように設定されている。
場合によってはh3までの表示も効果的だが、h4以降も入れてしまうと、見にくい印象を持たれてしまうことが多いので注意しよう。
例2.伝わりやすい見出しにする
たとえば、「WordPressに目次を入れた方がいい理由の解説」よりも「WordPressに目次を入れるべき4つの理由」の方が伝わりやすいはずだ。
見出しに「3選」「5つ」など具体的な数字を入れることに加え、なるべく端的に記載したほうがユーザーに伝わりやすくなります。
例3.見出しの文字数を見直す
見出しの文字数が多く、長い見出しになってしまうと伝わりにくい。
あくまで見出し、目次は要約の機能である。
- 形容詞：美しい、高い、難しい など
- 副詞：とても、すごく、非常に、かなり など
- 意味が重複する言葉
目次を開いた状態にする
目次は常に開いておこう。
「Table of Contents Plus」の設定→「見出しテキスト」から設定が可能だ。
「最初は目次を非表示」にチェックが付いていないか確認しよう。
チェックがついていて、画像のように目次の項目が閉じてしまうと、せっかくの目次の機能が活かされない。
目次のデザインを変更する
新しいWordPressテーマを利用することで、Webサイト全体のデザインに合わせた目次が自動で作成される。
特にWordPressには無料だけでも数千点のテーマが用意されているので、デザインも豊富。
一例として、下の画像は有料テーマである「SWELL」を使用して作成した目次である。
当メディア「STORK19」のデザインは下記の通りであり、デザインが異なることがわかるだろう。
目次の表示位置や表示範囲を変更する
最後に、目次の長さ（つまり見出しの長さ）も重要なポイントだ。
ショートコードを利用すれば、記事毎に目次の表示を細かく変更することができる。
▼目次の表示・非表示
| 項目 | ショートコード[括弧で囲う] | 補足 |
| 目次の表示(位置指定) | toc |
プラグインで目次表示設定をしていればこのショートコードは改めて記載する必要はない |
| 目次の非表示 | no_toc |
|
| 目次に含める見出しの制限 | toc heading_lavels="2,3" |
h2とh3の見出しを目次に含める記載方法 |
また、目次のタイトルを特定の記事のみデフォルトから変更することもできる。
▼目次のタイトルを変更する
| 項目 | ショートコード[括弧で囲う] | 補足 |
| 目次のタイトルを表示 | toc label="目次のタイトル" |
デフォルトとは違うタイトルをつける場合に使用 |
| 目次のタイトルを非表示 | toc no_laebl=true |
ショートコードの利用方法は、簡単。
記事の任意の場所に記載する、ただそれだけだ。
例えば、まとめの下に目次を設置するショートコードtocを記載すると、下記画像の位置に目次が設置される。
| 設置方法 | 表示 |
 |
 |
しかしそれでも抵抗がある方も安心してほしい。
ここで紹介したショートコードは全て、「Table of Contents Plus」のプラグイン設定をすれば事足りる内容だ。
まとめ
本記事では、WordPressの目次を作りたい方、目次のクリック率を高めていきたい方に向けて執筆した。
目次の作成は、ユーザーの利便性を向上させるという意味で必要不可欠なものだ。
最後まで読んでくれたあなたの参考になったのならば、嬉しい。
実例を交えながら、目次を入れるべき理由を解説していきます。