TOP

ブログ記事に「目次」をつける意味や効果を徹底解説!

ブログ記事に「目次」をつける意味や効果を徹底解説!
九段さん
検索上位にあるブログ記事を見ると、高確率で「目次」が付いていますよね?
やっぱり「目次」って重要なんですか?

no-img2
記事Pro
スタッフ
ブログ記事での「目次」の役割は、本で考えるとわかりやすいですよ。
例えば、本屋さんで本を手にする時に、まずは気になるタイトルの本を見ますよね?
そのあと、何を見ますか?

九段さん
タイトルの次に「目次」をチェックしますね・・・

no-img2
記事Pro
スタッフ
ですよね?ブログ記事でも同じ役割です。
ブログ記事に書かれている概要が把握でき、読みたいところをクリックすると、そこから読めるのは便利ですよね?

ということで、この記事ではブログ記事での「目次」の作り方や設定の仕方などを具体的に解説していきます。

1.ブログ記事の目次とは

no-img2
記事Pro
スタッフ
まず、そもそも目次がどういうものなのかということを解説していきますね。

九段さん
目次、といわれれば大体どのようなものかは想像がつくかと思うのですが……。

no-img2
記事Pro
スタッフ
そうですね。
ただ、これから解説する目次の効果や、それを引き出すテクニックを正しく理解するには、目次そのものの意味も抑えておく必要がありますので、目次の意味から説明していきますね。

1-1.見出しをリスト化しリンクを付けたもの

no-img2
記事Pro
スタッフ
目次を簡単に説明しますと『見出しをリスト化し、それぞれのリンクを付けたもの』です。
公開している記事上では、以下の画像のような表示を指します。

目次例
引用:【コスパ最強】ブログ記事代行の費用相場やおすすめ業者を紹介!

九段さん
検索上位にあるブログを見ると、同じようなものがよくありますね。
改めて考えてみると、どうしてブログ記事に目次がよく入っているんでしょう。

no-img2
記事Pro
スタッフ
それは、ブログ記事に目次を入れることで、2つのメリットが得られるからなんです。

2.ブログ記事に目次をつける2つのメリット

2.ブログ記事に目次をつける2つのメリット

九段さん
ブログ記事に目次を入れると得られる2つのメリットとは、どんなメリットですか?

no-img2
記事Pro
スタッフ
1つは読者の利便性や満足感を高める効果です。
この効果は、2つ目のメリットであるSEO効果にも影響していきます。
それぞれの効果について、解説していきますね。

2-1.読者の利便性や満足感を高める

no-img2
記事Pro
スタッフ
先程の目次の画像を見てください。
画像は目次のみですが、これを読むとどんな内容の記事なのかが分かるかと思います。

記事pro記事の目次例
引用:【コスパ最強】ブログ記事代行の費用相場やおすすめ業者を紹介!

九段さん
そうですね。
目次を読めば、何を書いているブログか、どんな情報があるかが一目でわかります。

no-img2
記事Pro
スタッフ
そうなんです。
これに加えて、ブログ記事の見出しリンクがあるので、読みたい記事へすぐに移動できます。
目次があるブログは、読者が記事の内容を判断し、すぐに読みたい内容を確認できるのです。
結果、読者の利便性や満足度につながります。

九段さん
利便性や満足度が高いブログ記事は、多くの人にアクセスしてもらえますね。
これが次のメリットにつながるんですね。

no-img2
記事Pro
スタッフ
はい。実際、目次は多くの読者にクリックされています。
目次から必要な情報にジャンプされると、そこだけを読まれておしまいになるんじゃないかと思う方もいますが、実際はジャンプした内容やその前後の記事も読まれていることが多いので、結果的に読者の滞在時間を延ばす効果があるんですよ。

九段さん
ということは、目次にはSEO効果が期待できるということですね?
これがもう1つのメリットですか?

no-img2
記事Pro
スタッフ
この滞在時間を延ばす効果は、目次が持つSEO効果の1つです。
このほかにもSEO上役立つ効果があります。
解説していきますね。

2-2.SEO効果がある

no-img2
記事Pro
スタッフ
目次には読者の利便性や満足度を向上させる効果があります。
この効果は、単純に読者に選ばれやすいブログになるというだけでなく、Googleの評価をあげることにもつながります。
また、目次の持つ効果はそれだけではありません。

九段さん
このほかに、どんな効果があるんですか?

no-img2
記事Pro
スタッフ
こちらの画像をご覧ください。

画像 目次の作り方
参考:目次の作成と更新-Word入門

Googleなどの検索結果の中に、こちらの画像のような表示になる記事がいくつかあります。
これは、ブログ記事内の見出しをリンクし、htmlのid属性でマークアップした記事です。

マークアップすることで検索画面に記事の情報を露出でき、クリック数増加につなげられます。

九段さん
読者が欲しい情報に直接アクセスできるようにすることで、SEO効果を高めているという訳ですね。

no-img2
記事Pro
スタッフ
そうです。
このように、目次には読者の利便性や満足度を高め、SEO効果を向上させる効果があります。
ブログの記事は基本的に、目次を付けるようにしてください。

3.目次が必要ないブログ記事のパターン2例紹介

no-img2
記事Pro
スタッフ
とはいえ、例外はあります。

九段さん
例外ということは、目次を付けない方がいいブログ記事もあるということですか?

no-img2
記事Pro
スタッフ
はい。もし、ブログの種類や記事の内容が以下の例外に当てはまるのであれば、目次は付けない方がいいでしょう。理由も併せて解説していきます。

3-1.文字数が少ない記事

no-img2
記事Pro
スタッフ
まず1つ目が、文字数が極端に少ない記事です。

九段さん
目次を付けなくても内容が分かる記事に、わざわざ目次を付けても邪魔になるだけ、ということですね。

no-img2
記事Pro
スタッフ
そうです。
それに加え、後述しますが、短い内容の記事に目次を付けると、目次機能が上手く反映しない場合があるのです。
記事の不具合を避けるためにも、少ない文字数で構成されている記事には、目次は付けないようにしましょう。

3-2.上から順に読むタイプの記事

no-img2
記事Pro
スタッフ
もう1つは、上から順に読むタイプの記事です。
具体的には、日記やエッセイがこれに当てはまります。

九段さん
どうして日記やエッセイには目次がいらないんですか?

no-img2
記事Pro
スタッフ
こちらの目次を見て頂ければ、どうしてか分かりますよ。

Webエッセイの目次例
参照:約束したことエッセイ集

no-img2
記事Pro
スタッフ
こちらの画像はよくあるブログの目次ですが、内容を読むと何があるのか、お話のあらすじが大体分かると思います。
知識やテクニックの紹介なら、必要な情報がどこに乗っているか分かるのは便利ですが、これがお話の目次だったら、どう思いますか?

九段さん
あっ!
内容のネタバレになっちゃいますね……。

no-img2
記事Pro
スタッフ
そうなんです。日記やエッセイなどの物語を楽しむように読むタイプの記事では、あらすじが分かる目次があると、ネタバレになってしまい面白さが半減してしまうんです。

情報をまとめたものであれば、目次から必要な内容にジャンプしても読んでもらえるのですが、物語を楽しむ場合だとそうはいきません。

どんなにSEO対策をしても、肝心の内容が読者にとってつまらないものでは、意味がありませんよね。

九段さん
目次は記事の内容に合わせて、付けるかどうかを判断する必要があるということですね。

4.ブログ記事に興味を持ってもらう目次作りの3つのテクニック

no-img2
記事Pro
スタッフ
例外はありますが、目次は基本的に付けておいた方がよい要素です。
しかし、ただ付ければいい、というものでもないのです。

九段さん
目次にもつけ方のテクニックがあるということですね?

no-img2
記事Pro
スタッフ
そうです。
ブログの目次を付けるときに、意識してほしい3つのテクニックをご紹介しますね。

4-1.ブログ記事の内容が分かる目次を付ける

no-img2
記事Pro
スタッフ
まず大切なのが、ブログ記事の内容が分かる目次を付けるということです。
これがしっかりできていないと、目次が持つメリットを活かせません。

九段さん
具体的には、どんなふうに目次を付けるのですか?

no-img2
記事Pro
スタッフ
目次を見ただけで記事のあらすじがある程度分かるような内容になるように付けます。
話の順序が論理的になるよう、内容だけでなく順番にも注意してください。
実際にこのポイントを意識して作った目次が、以下の画像です。

目次例
参照:こはる日和.

九段さん
なるほど。
確かにこの方法で書かれた目次なら、記事の内容が一目で分かりますね。

no-img2
記事Pro
スタッフ
最初で解説した通り、目次とは記事の内容をリスト化し、分かりやすくまとめたものです。
これを意識しておかないと、分かりやすい目次はできませんから、注意してくださいね。

4-2.目次の量にも注意

九段さん
ほかに気を付けるべき点は何でしょうか?

no-img2
記事Pro
スタッフ
次に気を付けるべき内容が、目次の量です。
先程、短すぎる内容の記事には目次を付けなくていいとお話ししましたが、目次は少なすぎても、多すぎてもいけません。

九段さん
短すぎる目次は読者の邪魔になったり、ブログの表示に支障をきたす可能性があったりするためですよね。
長すぎるのはどうしてだめなんですか?

no-img2
記事Pro
スタッフ
実際に目次を見てみればわかると思いますよ。

たくさん目次がある例
参照:【自宅で筋トレ】下半身の効果的な鍛え方。足腰を鍛えるトレーニング特集

九段さん
たくさんの情報をまとめてくれている、というのは分かるんですけど……。
読むのが大変そうですね。

no-img2
記事Pro
スタッフ
そうですね。
読者によっては、目次を見た時点で読むのをあきらめてしまうかもしれません。
目次の本来の役割は、読者を記事に引き留めることですから、読者を離れさせる原因になっては、本末転倒です。
目次の量は、短すぎても長すぎてもだめなんです。

九段さん
どれ位の量が適切なんでしょうか。

no-img2
記事Pro
スタッフ
記事の内容にもよりますけど、目安としては3~9項目の間が適切な量です。
どうしても長くなる場合は、以下の方法で記事の内容をコンパクトにするといいですよ。

記事を簡潔にまとめるテクニック
  • 表や図を使うなど、文字以外の表現を組み込む
  • 記事の内容に省略できる部分や不必要な内容が無いか確認・調節する
  • 1つの記事の内容を複数に分割した記事で作り直し、それぞれをサイト内のリンクでつなげる
no-img2
記事Pro
スタッフ
目次の量が多くなる時は、見出しが細分化されすぎているか、記事内の情報が膨大になっているケースが多いです。
目次の量をどうしてもまとめきれない場合は、思い切って新しい記事を作り、前後編などでまとめるといいですよ。

4-3.読者を惹きつける内容を意識する

九段さん
最後に気を付けるべき内容は、どんなものですか?

no-img2
記事Pro
スタッフ
目次は読者を惹きつける内容を意識するということです。
目次は読者が記事を閲覧したときに、初めて見る内容です。
ここが魅力的でなければ、読者は離脱してしまいます。
分かりやすく、注意をひく内容を意識してください。

九段さん
具体的には、どんな風に書けばいいですか?

no-img2
記事Pro
スタッフ
読者を惹きつけるテクニックとしては、以下のような方法がよく使われます。
これはブログ記事のタイトルや見出しを考えるときにも共通して使われているテクニックですから、覚えておくと便利ですよ。

読者を惹きつけるタイトル付けのテクニック
  • 数字(○選、○つ)などを入れる
  • 内容をシンプルに、1行以内で収まるようにする
  • 記事のキーワードを盛り込む
九段さん
目次を付けるときは、こうした内容を意識して付けるといいんですね。
実際の記事に目次を設定するときは、どうすればいいんですか?

5.ブログ記事に目次を設定する方法

no-img2
記事Pro
スタッフ
では、次からは実際にブログ記事に目次を設定する方法を解説しますね。
ブログには様々な媒体がありますが、ここではどの媒体でも共通して使えるhtmlを使った方法と、ブログ記事によく使われているWordPressでの設定方法を解説していきます。

5-1.htmlを編集する

no-img2
記事Pro
スタッフ
まず初めに、全てのブログ媒体で使えるのが、htmlを使った設定方法です。

九段さん
どうやって設定するんですか?

no-img2
記事Pro
スタッフ
目次の設定には、以下2つの部分でhtmlによる設定が必要です。

目次設定に必要な箇所
  • 各見出し部分
  • 目次部分

実際にhtmlを使った画面を見ていきましょう。
まずは見出し部分の設定方法からです。

タグの例

こちらの画像の様に、各見出しタグを設定します。
次は、目次の設定です。

タグの例

次に、この画像の様に各見出しへのページ内リンクを設定します。
これが目次になります。
全ての見出しと目次を設定したら、目次の設定は終了です。

5-1-1.ポイントはマークアップ

九段さん
目次と見出しにあるのは、どんなタグですか?

no-img2
記事Pro
スタッフ
これはマークアップといって、Googleなどの検索結果にページ内リンクを表示させる効果があります。
最初に目次のメリットとして『検索結果に目次の記事が露出される』と解説しましたが、この内容の露出をするのが、マークアップです。
これを付けないと、目次を付けることで得られるメリットが半減してしまいますから、忘れずにつけましょう。

5-2.WordPressの記事に目次を付ける場合

no-img2
記事Pro
スタッフ
次に、WordPressの記事に目次を付ける方法を解説しますね。

九段さん
WordPressでは、htmlのタグ付けは使わないんですか?

no-img2
記事Pro
スタッフ
htmlによる目次設定は、WordPressでも使えます。
しかし、WordPressの場合、プラグインを活用して目次を設定するのが一般的なんです。
いちいちタグ付けを使うよりも簡単にできますから、WordPressの場合はプラグインを導入してやるやり方をおすすめします。

九段さん
なるほど。
目次設定に使えるプラグインには、どんなものがありますか?

no-img2
記事Pro
スタッフ
目次設定に使えるプラグインでよく使われているのが、以下2つのプラグインです。

WordPressの目次設定でよく使われているプラグイン
  • Table of contents plus
  • Gutenberg
no-img2
記事Pro
スタッフ
それぞれの導入と設定方法を解説しますね。
まずは「Table of contents plus」からです。

5-2-1.「Table of contents plus」の導入と設定

no-img2
記事Pro
スタッフ
「Table of contents plus」を使うには、WordPressに導入する必要があります。
導入方法は以下の通りです。

Table of contents plusの導入方法
  1. WordPressにログイン後、左側メニューの「プラグイン」を選択する
  2. 次に、「新規追加」をクリックする
  3. 「Table of contents plus」を検索し、プラグインを見つけたら「今すぐインストール」をクリックし、その後「プラグインを有効化」をクリックして終了
九段さん
導入自体はとても簡単なんですね。

no-img2
記事Pro
スタッフ
そうですね。
目次の設定も簡単にできますよ。
設定方法は以下の方法で行います。

Table of contents plusの設定方法
  1. 左側メニューの「プラグイン」から「Table of contents plus」の設定を選択する
  2. 基本設定(目次を表示する場所、表示条件、プレゼンテーションなど)を好みで調節する
  3. 目次を表示させたい場所に専用のショートコードをマークアップする

これで設定は完了です。

九段さん
とても簡単にできるんですね。

no-img2
記事Pro
スタッフ
そうなんです。
WordPressの場合、htmlタグを利用するよりも、プラグインを活用した方が簡単にできるんですよ。

5-2-2.「Gutenberg」の導入と設定

no-img2
記事Pro
スタッフ
次に、もう一つのプラグインである「Gutenberg」について解説しますね。
「Gutenberg」はWordPress5.0に搭載されたテキストエディタで、目次の作成だけでなく、画像や動画を含んだ内容を簡単に作れるプラグインです。

九段さん
WordPressをより簡単に、便利に活用できるようになるプラグインなんですね。

no-img2
記事Pro
スタッフ
そうですね。
もし、WordPress5.0をお持ちなら、こちらのプラグインの活用をおすすめします。
「Gutenberg」の導入方法ですが、「Table of contents plus」と全く同じです。
検索する部分を「Gutenberg」に変えるだけなので、省略しますね。
「Gutenberg」の目次設定方法から紹介します。

Gutenbergの目次設定方法
  1. 「投稿」画面から「新規追加」を選択し、投稿編集画面を表示させる
  2. 「ブロックの追加」、「一般ブロック」、「リスト」の順にクリックし、リストブロック(目次にあたる部分)を追加する
  3. 次にアンカーリンクを設定するために、ジャンプ先の見出しブロックにカーソルを合わせ、その状態のまま右側に表示されるブロックパネル内にある「高度な設定」をクリックする
  4. ジャンプ先の見出しにhtmlアンカーを設定し、アンカーリンクを付けたい目次項目をドラッグ、ツールバー内にある「リンク」をクリックする
  5. クリックすると下にブロックが表示されるので、先程設定したhtmlアンカーの先頭に「#」を付けて入力する
九段さん
「Table of contents plus」よりも少々複雑な手順で設定するんですね。

no-img2
記事Pro
スタッフ
最初は大変ですが、慣れてしまえば簡単ですよ。
「Gutenberg」は目次以外にもできることがたくさんありますから、ぜひ活用してみてください。

6.WordPressの目次設定でよくある疑問

6.WordPressの目次設定でよくある疑問

九段さん
そういえば、WordPressを使っているとき、目次設定がおかしくなるって聞いたことがあるんですけど、何が原因なんでしょうか。

no-img2
記事Pro
スタッフ
WordPressは設定によって表示が変わりますから、それによって不都合が起きているのかもしれません。
WordPressの目次設定でよく聞かれる疑問と、解決のヒントを紹介しますね。

6-1.既存の目次を追加したい

no-img2
記事Pro
スタッフ
WordPressの目次設定でよくあるのが、既存の記事に目次を設定したいというものです。
設定の方法自体は、新規の記事と同じ方法で設定します。
ただ、設定しても目次が表示されない場合や、目次の表示がおかしい場合もあるんです。

九段さん
それはどんなときにおこるんですか?

no-img2
記事Pro
スタッフ
よくあるのが、プラグインやhtmlの導入や設定忘れですね。
プラグインを導入していなければ機能を使うことはできませんし、導入してあってもhtmlのタグ付け忘れや設定間違いがあれば、正しく表示されません。

九段さん
目次表示がおかしいときは、プラグインの導入やhtmlのタグ付けをチェックすればいいんですね。

no-img2
記事Pro
スタッフ
そうです。
プラグインやhtmlを確認してもおかしな所が無い場合は、見出しの数が少ない可能性が考えられます。
WordPressのプラグインは、見出しの数が少ないと正しく動かない場合があるんです。

九段さん
最初に説明してもらった、内容の短い記事には目次を付けなくていい、というのは、この不具合が関係しているんですか?

no-img2
記事Pro
スタッフ
はい。
そもそも、付けても意味がないというのもありますが、プラグインの働きに異常をきたす可能性があるというのが、大きな理由です。

6-2.外観を変えたら目次がおかしい

九段さん
このほかにも、外観を変えたら目次の表示がおかしくなった、というのもありますよね。

no-img2
記事Pro
スタッフ
これは外観側に問題があることが多いです。
外観設定の中に目次に関する設定が組み込まれているため、それが目次の表示に影響を与えている場合ですね。
よくあるのが、自分で設定した目次とテーマの自動設定で含まれる目次が重複表示されている場合です。
この場合、自分が設定した方を消してしまえば、問題は解決します。

九段さん
このほかの問題は、どこを見ればいいですか?

no-img2
記事Pro
スタッフ
このほかの問題が起きた場合でも、外観を変えて起きた問題なら外観に関する部分に問題があります。
装飾を変更するのはCSS部が多いですから、おかしな所が出てきたらここをまず確認してみてください。

7.記事を検索上位に持ちあげたいなら「記事作成代行Pro」にお任せ!

記事作成代行proのトップ画像

九段さん
ブログ記事を読んでもらうには、目次が重要だというのはよく分かったんですけど……。
ちゃんと効果的な目次を作れるかどうか、不安になってきました。

no-img2
記事Pro
スタッフ
それなら、「記事作成代行Pro」にお任せください!

「記事作成代行Pro」は、SEO対策に特化した記事代行会社です。
当然、読者に読んでもらえるような目次も設定できます。

また、目次以外の部分でも、お客様のご意見を反映しながら検索上位に表示できるブログ記事を提供いたします。

実際に担当したお客様のブログを、検索キーワード1位!問い合わせ件数を6.6倍まで伸ばした実績があります。

プラチナプラン導入前~後

記事作成代行pro 実績紹介

九段さん
すごいですね!
どうしてここまで大きくアクセス数を伸ばせるんですか?

no-img2
記事Pro
スタッフ
記事作成代行Proがこれだけの結果を出せているのは、以下3つの内容を徹底しているからです。

記事作成代行Proが結果を出せる3つの理由
  • 徹底したライターの研修制度
  • Googleの順位変動などの動向チェック
  • 徹底調査とSEO分析をかけ合わせた独自システム

これらに加えて、検索する読者の意図を読み取り、それを活かした記事の構成作りに時間の7割を割いています。
これにより、良質で読者の心に響く記事を作り出し、アクセス向上につなげているのです。

「記事作成代行Pro」では、SEO特化記事は、最低1文字3.5円から依頼を受け付けています。

効果の高いSEO対策記事の作成を依頼したい方はもちろん、これまで説明した記事の目次など、特定の項目に関する相談まで、お気軽にご連絡ください。

8.まとめ

ブログ記事の目次は、読者の利便性や満足度を高め、SEO対策効果を生み出す重要な要素です。
ただ目次を付ければ効果がある、という訳ではありませんから、ポイントを押さえて作成する必要があります。
WordPressなど、特定のソフトや媒体を活用する場合は、活用するものに合わせてツールや設定方法を考えることも大切です。

これまでの内容を読んで難しいと感じるようなら、プロの手を借りるのもよい方法です。
「記事作成代行Pro」では、SEO対策に特化した記事の作成を受け付けております。
ブログ記事の目次をはじめとしたお悩みは、ぜひ「記事作成代行Pro」にご相談ください。