ブログの目次は以下のように表示されて、それぞれの項目をクリックすると、その項目へジャンプしたり、スクロールしたりします。

ブログをやっている人の中には「目次なんていらない、邪魔!」と思っている人がいるかもしれませんが、実に勿体ない話です。

この記事では、目次の作り方とともに下記3点を重点的に解説します。

トピック

●なぜ目次がそれほど重要なのか?
●目次を作らないとどんなデメリットがあるのか?
●目次を作るときに意識したいこと

目次を作らないと大きく損をすることになります。特にSEOで検索エンジンからの集客を考えている人は、ぜひ最後まで読んでください。

ブログ目次の作り方

まずはブログの目次を実際に作る方法を、ワードプレスの場合とHTMLで作る場合に分けて解説します。

ワードプレスでの目次の作り方

ワードプレスでブログを運営している場合は、次のどちらかのプラグインを使えば、簡単に目次を設置することができます。

●Table of Contents Plus

●Easy Table of Contents

2020年9月時点での両プラグインを比較すると以下のようになります。

●Table of Contents Plus
有効インストール数30万以上・最終更新7か月前

●Easy Table of Contents
有効インストール数20万以上・最終更新4か月前

Table of Contents Plus(TOC)のほうが若干人気があるようです。

操作性はどちらもほぼ同じなので、好きな方を使えばよいと思います。

ちなみに、私は「Easy Table of Contents」のほうが気に入っています。

理由は後で説明します。

では、それぞれの使い方をみていきましょう。

Table of Contents Plusの使い方

ワードプレスの管理画面からプラグインをクリックします。

プラグインの管理画面が表示されたら、新規追加をクリックします。

画面右上の「キーワード」の右横に「Table of Contents Plus」と入力します。

すると、該当のプラグインが表示されます。

この場合は、お目当ての「Table of Contents Plus」とともに、「Easy Table of Contents」も検索されました。

「今すぐインストール」をクリックします。

「有効化」をクリックします。

「有効化」をクリックしたら、ワードプレス管理画面の左にあるメニューから「設定」→「TOC+」をクリックします。

設定をしていきます。

下記の画像は変更の一例です。私が変更した部分を赤枠で囲いました。

設定ができたら、画面下の「設定を更新」をクリックします。

すると、以下のように目次が表示されます。

※設定画面の「プレゼンテーション」の部分で「カスタム」を選択すると、背景色、文字色など好きな色に設定できます。

背景色を「#65ace4」、ボーダー色を「#0074bf」、タイトルとリンク色を「#ffffff」に設定すると以下のようになります。

色を選ぶときおすすめなのがこちら

Easy Table of Contents

次にもうひとつのプラグイン「Easy Table of Contents」の使い方を解説します。

先ほどと同じように、「プラグイン」→「新規追加」をクリックして、右上に「Easy Table of Contents」を入力します。

※このとき「新規追加」をクリックせずに、検索すると次のよう「プラグインは見つかりませんでした」となるので、「新規追加」のクリックを忘れないようにしましょう。

「インストール」して「有効化」したら、設定をしていきます。

ワードプレス管理画面の「設定」→「目次」をクリックします。

先ほどの「TOC+」と設定内容はほぼ同じです。

設定変更した部分を赤枠で囲みました。変更の一例です。

設定ができたら、最後に「変更を保存」をクリックします。

以下のような目次が表示されます。

背景色などをカスタム設定してみます。

やはり、目次はその項目へのリンクですから、文字色は青色が良いのではないかと思っています。

最近はテキストリンクの色もさまざまですが、多くの人は「青文字=リンク」というイメージがあるのではないかと思います。

どちらのプラグインを使う?

さて、ワードプレスで目次を作る場合は、いずれかのプラグインを使えば簡単に作ることができます。

どちらを使うかは、デザインの好みでいいでしょう。

私は「Easy Table of Contents」のほうが好きなのですが、その理由は目次の縦幅にあります。

「TOC+」は行間が広く縦に長くなるので、目次が多くなると、スマホでスクロールしなくてはならなくなります。

両プラグインを使ったときの、スマホでの表示状態を比較すると次のようになります。

「TOC+」の場合
「Easy Table of Contents」の場合

上記のように、目次が長くなると、「TOC+」の場合は見にくいなという印象です。

なので、私は「Easy Table of Contents」のほうをおすすめします。

HTMLでページ内リンクを作り目次にする方法

では、次にHTMLで目次を作る方法です。

ワードプレスなら先ほど紹介したプラグインを使えばいいのですが、プラグインをつかいたくないという場合や、見出し作成機能のないCMS、無料ブログなどで目次を作りたい場合は、HTMLを編集して目次を作成することができます。

以下のような感じです。

HTMLソースをコピペ

以下のソースをコピペすれば目次&見出しを作成できます。

※見出しの部分が青い枠で囲まれていますが、CSSで調整しているためです。HTMLだけでは見出し部分は装飾されません。

上記のHTMLソースを簡単に解説すると以下のようになります。

ID名に特に決まりはありませんので任意のID名を付けて下さい。ただし英数字しか使えません。

あと、目次側と飛び先の「名前」が一致していないと作動しないので注意が必要です。数字が半角か全角の違いだけでも作動しません。

HTMLで目次を作る場合については以上です。

ブログの目次がいらない場合

この記事ではブログに目次を作ることは必須だと説明していますが、実は目次が必要ない場合もあります。

それは次の4つのパターンのブログです。

①日記的ブログ
②SEOを考えないブログ
③短い文章のブログ
④めっちゃ文章力の高いブログ

①日記的ブログ

朝起きてご飯食べて、TVは何を見て、○○を買った、というような日記ブログには目次は必要ないですね。

そもそも日記ブログでアクセスを集められるのは一部の芸能人か超有名なインフルエンサーくらいですが。

②SEOを考えないブログ

SEOで集客を考えないのであれば、目次は必要ありません。ブログの目次の目的も本の目次と目的は同じです。

読者に何が書いてあるかのナビゲーションをするとともに、「へぇ、この記事読んでみようかな」という感情を喚起させることが目的です。

ブログであれば、目次を作ることによって滞在時間を伸ばせる可能性があります。

滞在時間の長いブログ=読者が満足しているブログ、ということになりますので検索順位の上昇が見込めます。

③短い文章のブログ

例えば、映画のあらすじを300文字以内にまとめるブログとか、文章を短くすることに価値を見出すタイプのブログには目次は必要ありません。すぐに読めてしまいますからね。

④めっちゃ文章力の高いブログ

1文目から引き込まれて、どんどん次の文章を読まずにはいられない、という読み手をグイグイ引き込むことのできる文章力があるなら、目次は必要ないかもしれません。

以上、上記4パターンが私が考える目次の必要ないブログです。

ブログ目次にSEO効果がある?

先ほども少し書きましたが、ブログに目次を設置する目的は、読者へのナビゲーションと記事を読む気を喚起することです。

そして滞在時間を伸ばすことにより、SEO評価を高め、検索上位獲得を狙うものであります。

では、本当に滞在時間が伸びるのか?

ここが問題になりますね。

ということで、実験してみました。

これは私が趣味でやっている別のブログのデータです。

「プラトン アリストテレス 違い」というキーワードで2020年9月現在3位にいます。

この記事で7月は目次をつけず、8月は目次を表示しました。

その結果は次のようになりました。

8月のほうがPVは増えているのに滞在時間も1.5倍になっています。

記事のリライトはもちろん、見出し(目次)を変更したわけでもありません。

しかもこんなしょぼい見出しです。(趣味ブログなので)

月間PVで400ほどですから、ちょっとしたことで大きく変化したのでしょう。

これが月間1万PV以上の記事であれば、ここまでの差にはならないと思われます。

しかし、この記事に関しては、目次以外に何も変更していないので、目次以外の要因が考えられないのです。

目次のSEO効果については、他の記事でも紹介されているように、実際にあるだろうと思っています。

逆にいうと、ブログに目次を作らない場合、離脱されやすくなります。

何が書いてあるのかわかりにくいブログ記事を読もうとは思えないからです。

時間が無駄になるというリスクがありますから。

つまりブログに目次を作らないと、滞在時間減少により、Googleから「この記事は読者満足度が低い」と判断されてしまいます。

ブログに目次を作らないとSEO上の大きなデメリットがあると考えられます。

ただ、次の「目次を意識するポイント」のところで解説しますが、「目次を作ること」自体にSEO効果があるわけではありません。

ブログの目次はHタグを使った「見出し」がまとめて表示されたものです。

この「見出し」の重要性を理解して、はじめて効果的な目次を作ることができるようになります。

目次を作るときに意識するポイント

では、次に効果的な目次を作るために意識したいことを6個説明します。

目次=見出しの集合

先ほども書いたように、ブログの目次は、Hタグを使った見出しの集合です。

ここで重要になるのが、Hタグの使い方です。

Hタグ(見出し)の正しい使い方については、下記の記事で解説しました。

ワードプレスでプラグインを使って目次を作るときは、Hタグが見出しに設定されます。

目次は読者に記事の内容をわかりやすくするためのナビゲーションであると同時に、Hタグはグーグルに「この記事の中で重要なこと」を伝える役割があります。

Hタグの正しい使い方はぜひ確認しておいてください。

目次に設定するのはH2とH3

ワードプレスの目次作成プラグインのところで説明しましたが、目次に表示する見出しレベルはH3までにすることをおすすめします。

もちろんH4以下も目次に設定してもSEO上は何ら問題はありませんが、あまりに細かい部分まで目次に表示するのは避けたほうが良いのではないかと思っています。

目次の役割はパッと見て、その記事に何が書かれているかを読者に示すことです。

目次は読んでもらうものではなく、見てもらうものだと思います。

したがって、目次にあまりにも細かい内容を詰め込みすぎると、離脱の要因になってしまいます。

目次に表示するのは、H2、H3まででいいでしょう。

ターゲットキーワードを含める

ブログの目次(=Hタグ)には、その記事で狙うターゲットキーワードを含めます。

この記事のターゲットキーワードは「ブログ 目次」です。

このターゲットキーワードで上位表示を狙うために、目次(Hタグ)で強化します。

具体的にはHタグに以下の複合キーワードを含め、「ブログ 目次」というターゲットキーワードを補強しています。

「ブログ 目次 作り方」
「ブログ 目次 SEO 効果」

もう少し正確に言うと、目次(Hタグ)には、ターゲットキーワードを含んだ複合キーワードを使うということです。

「ブログ 目次」と検索する人が知りたいこと(検索意図)として、「目次の作り方を知りたい」「目次にSEO効果があるのかどうか知りたい」が考えられます。

H2タグに検索意図である複合キーワードを含めて、その検索意図に応える記事を書くということが重要です。

具体的にどのように見出しを設定していくかは、下記の記事で解説しています。

目次はデフォルトで表示する

目次は以下のように、初期設定で「表示」「非表示」を選択できます。

「非表示」にした場合は、ユーザーが目次を開くことで目次が表示されます。

非表示にすると、以下のようになります。

目次を開くのにも、ひと手間かかります。

「え?その程度のことが手間?」と思う方もいらっしゃるでしょうが、ワンクリックの手間さえ、離脱の原因になるかもしれません。

マイナス要素は極力排除するようにしたほうがいいでしょう。

文字数の目安はスマホで2行以内

見出し(目次)がやたら長いと、それだけで読むためのメンタルブロックになる可能性があります。

多くのWEBサイトはスマホで閲覧されることが多いのが現状ですから、スマホで見たときに2行以内に収まる文字数にしておくのが無難です。

例えば、以下のような見出しだとパッと見て、本能的に「読みたくないな」と思ってしまいませんか?

目次で記事を読む気にさせるには?

記事の目次部分は記事の中でも最もよく見られる部分です。

なぜかというと、目次を見て、自分が知りたい情報があるかどうかを判断するからです。

本屋でビジネス書を買うかどうか考えるとき、最初に見るのは目次という人は多いのではないでしょうか。

ブログ記事も同じです。

目次でその記事を読むかどうかを判断する人は多いです。

私は何か知りたいことがあって検索して記事を見るときは、導入文は無視して目次をまず見にいきます。

目次を見たあとは、スクロールしながら全体の長さとか、目次に表示されていないHタグ部分をザっと見て、自分が必要とする記事かどうかを数十秒で判断します。

目次を見たときに、「あ、違う」と思ったら、即離脱して検索画面に戻り、他の記事を見に行きます。

このような検索行動をする人は多いのではないでしょうか。

誰が書いたかもわからないブログ記事をいきなり最初から最後まで熟読する人はいないでしょう。

逆にいうと、目次で目を留めてもらうことができれば、その後の記事を読み進めてもらう可能性が高まるということです。

では、どうすれば、目次で目を留めてもらうことができるか?

刺激的な言葉や、キャッチーな言葉は必要ありません。

SEO記事の目次に最も必要な要素は、ユーザーの検索意図を満たす言葉を使うということです。

SEO記事というのは、検索ユーザーの知りたいこと(検索意図)に応える記事ですから、目次を見て、「この記事には自分の知りたいことが書いてありそうだ」と思ってもらわなければなりません。

では、「この記事には自分の知りたいことが書いてありそうだ」と思ってもらうために必要なことは何か?

それは、ユーザーの検索意図を把握することです。

「ブログ 目次」と検索する人の検索意図が「ワードプレスでブログを作っているんだけど、目次を作る方法を知りたい」だったとします。

このような検索意図に対して、目次が次のようなものであれば、このユーザーは離脱すると思いませんか?

「ブログ 目次」というキーワードは検索意図を絞り込むにはあいまいなキーワードです。

「ブログ 目次 作り方」となれば、検索意図を絞りこめますが、「ブログ 目次」だけでは、検索意図を特定するのは難しいでしょう。

では、どうするか?

考えらえる検索意図を網羅することです。

「ブログ 目次」の検索意図を網羅するには、サジェストキーワード・関連キーワードなどを調査する必要があります。

サジェストキーワード・関連キーワードの調査のやり方、使い方については、下記の記事をご覧ください。

特に関連キーワードの使い方によって、記事の質は大きく変わります。

目次で記事を読む気にさせるには、ユーザーの検索意図に応える記事であることを示すことです。

そのために、目次にはサジェストキーワード・関連キーワードを含めることが必須になります。

以上、ブログ目次の作り方と、目次を作らない場合のデメリットでした。