ブログ部

ブログ・アフィリエイト・WordPress・SEOなど、収益&アクセスを改善させるノウハウ集!

ブログ集客/収益

【166%改善】ブログに目次は必要?目次のメリットや作り方を解説!

投稿日:2020-01-15 更新日:

ブログの目次の作り方

今回はブログの目次についてです。

ブログ記事に目次を設置することは、なかば当たり前のようになっていますが、

そもそもブログに目次って必要なのでしょうか?

 

結論から言うと、ブログに目次は必要です。

目次はユーザビリティ(読者の使い勝手や満足度)を高め、SEO効果もあるとても重要な要素なのです。

 

今回はブログのメリットや役割について、

さらに目次の作り方や、効果的な目次にするためのコツを解説いたします。

 

1.ブログに目次を入れるメリットは?

成功するアフィリエイトサイト7つの秘策

ブログの目次はどんな役割をもっているのでしょうか?

また、ブログに目次を設置するメリットは何でしょうか?

本章ではブログの目次に関する基礎情報を解説いたします。

 

1-1.目次とは?

目次の画像

▲この記事の目次はこんな感じ。

目次とは記事内の「見出し」を書かれた順に並べ、リスト化したものです。

とくにブログ記事などのWEBページにおいては、目次をリンクにすることができるため、

クリックすると目的の箇所まですぐに移動するナビゲーション(案内・誘導)の機能を持たせることができます。

 

1-2.目次のメリット

ブログに目次を設置するメリットは3つあります。

読む前になにが書かれているか分かる
読みたい箇所にすぐに移動できる
求めている答えがすぐに分かる

つまりブログの目次は、読者(ユーザー)にとって便利&役に立つということです。

 

最近の検索エンジンはユーザビリティ(ユーザーの利便性や満足度)をとても重要視しているので、

ブログに目次を設置することによりSEO効果も期待できます。

 

 

2.目次はめっちゃクリックされる!

おすすめの脱サラ

冒頭にも書いたとおり、個人的にはブログに目次は絶対に必要だと考えています。

なぜなら目次はめっちゃクリックされる(=必要とされている)から、

そして目次を設置することで、ブログの滞在時間や直帰率が改善するからです。

 

2-1.目次は必要とされている!

ブログに目次が必要かどうかが一発で分かる画像をお見せします。

目次のヒートマップ02

WordPressで稼ぐなら!
【筆者愛用!SEOに強いレンタルサーバ】

初心者なら迷わずコレ一択!高速&安定&高性能の一押しレンタルサーバー

※4/30まで限定!独自ドメインが無料に

これは目次がどれくらいクリックされているかのか?を表したヒートマップです。

 

このヒートマップでは、よくクリックされている部分がより赤く表示されるようになっていますが、

これを見れば、ブログの目次がどれほどユーザーに必要とされているかが一目瞭然ですよね。

 

目次のヒートマップ03

ちなみにこれは目次の代わりに設置した一覧表のヒートマップ。

比較やランキングのコンテンツでは、このように一覧表を各見出しにページ内リンクさせるようにすると良いナビゲーションになります。

 

2-2.目次で滞在時間が166%改善!

下記はブログに目次を入れない場合/入れた場合に、

ユーザー行動にどんな変化があるのかを調べた検証結果です。

 

ブログ記事に目次を設置した結果、ページ滞在時間・直帰率はいずれも改善しました。

  目次を入れない場合 目次を入れた場合 改善率
滞在時間 2分12秒 3分39秒 166%改善
直帰率 82.2% 79.8% 2.4point改善

※3つの記事の平均値。Google Analyticsで前後2週間ずつ計測したものを比較。

 

つまり目次を入れることでナビゲーション(案内・誘導)が分かりやすくなり、

ページ内のさまざまな箇所が読まれたり、重要箇所の熟読率が高まったと想定できます。

その結果、ユーザーのページ滞在時間が長くなったということですね。

 

また、情報の探しやすさやなどでユーザーの満足度が高まり、

他の記事を読んでくれる機会が増え、直帰率が改善したのだと考えられます。

 

2-3.目次が必要ないブログもある

もちろん、なかには目次を作る必要のないブログもあります。

目次が必要ない例

短い文章で、見出しの必要がない記事

目次の役割は内容のサマリーや読者のナビゲーションですから、

たとえば目次が必要ないほど短い記事や、

日記ブログのようにそもそも見出しを作らない記事などは、目次は不要です。

 

▲「稼げる記事テンプレ」ワンコイン販売中!

 

3.ブログの目次の作り方

本章ではブログの目次の作り方を解説します。

ブログにはさまざまな種類がありますが、もしあなたのブログがWordPress(ワードプレス)ならば、

プラグインを入れるだけで簡単に&自動的に目次を生成できるようなります。

 

無料ブログであれば、サービスごとにできるものとできないものがあるので、

ご利用のサービス内で調べてみてください。

もしデフォルトで目次機能のないサービスでも、HTMLで作ることができます。

 

3-1.ワードプレスで目次を作る

WordPressで目次を作るなら「Easy Table of Contents」というプラグインをおすすめします。

同じような目次の生成機能を持つプラグインにTable of Contents Plusがありますが、

数年間更新されていないのでEasy Table of Contentsのほうが安心です。

 

Easy Table of Contentsで目次を作る手順

  • STEP1
    目次を入れる前
    目次の作り方01(目次を入れる前)目次を入れる前の記事はこんなかんじ。
  • STEP2
    プラグインの追加
    目次プラグインをダウンロードする01ワードプレスの管理画面から ①「プラグイン」 → ②「新規追加」の順に進みます。

     

    目次プラグインを検索①右上の検索窓から「Easy Table of Contents」を検索する。

    ②Easy Table of Contentsが表示されたら「今すぐインストール」をクリック。

     

    目次プラグインを有効化する有効化」をクリックします。

  • STEP3
    プラグインの設定
    目次プラグインの設定プラグインの一覧画面が表示されるので、Easy Table of Contentsの「設定」をクリックします。

     

    目次プラグインの設定前半画像のとおりに設定します。

    今回は「投稿に3つ以上の見出しがある場合」に「1つ目の見出しの直前」に目次を表示させる設定にします。

    見出しラベルは単純に「目次」でもいいのですが、タップできることを分かりやすくするために、今回は「タップできる【目次】」という文言にしました。

     

    目次プラグインの設定後半僕はタイトル文字の太さを「Bold」に、テーマを「カスタム」にしました。

    これはお好みでどうぞ。

     

    目次プラグインを設定保存最後に「変更を保存」をクリックします。

  • STEP4
    完了
    プラグイン設置後のキャプチャこれで完了です。記事にも目次がちゃんと表示されています。

 

ちなみにEasy Table of Contentsでは、

目次の表示の有無や、H2・H3・H4…などどのHタグを目次に表示させるかを

各記事の編集画面から、それぞれ個別で設定することができます。

かなり便利な機能なので覚えておいてください。

 

3-2.HTMLで目次を作る

HTMLで目次を作ることもできます。

まず下記①のように各見出しタグ(hタグ)にアンカー(id="○○"となっている部分。○○は任意のものでOK)を設定し、

②のように各見出しへのページ内リンク(アンカーリンク)を並べていきます。これが目次です。

②の目次は、序文と1つ目の見出しの間など、お好きな場所に記載してください。

① 各hタグのHTML見本

<h2 id="bl-01">見出し01</h2>
<p>本文</p>
<h2 id="bl-02">見出し02</h3>
<p>本文</p>
<h2 id="bl-03">見出し03</h3>
<p>本文</p>
<h2 id="bl-04">見出し04く</h3>
<p>本文</p>

② 目次のHTML見本

<a href="#bl-01">見出し1</a>
<a href="#bl-02">見出し2</a>
<a href="#bl-03">見出し3</a>
<a href="#bl-04">見出し4</a>
  

 

 

4.上手な目次を作る6つのコツ

目次はただ設置すればOKではなく、ユーザーに便利に活用してもらえるよう創意工夫することが大切です。

本章では上手な目次を作る6つのコツについて解説します。

 

4-1.目次はつねに開いておく

せっかくブログに目次を設置したのに、デフォルトで「閉じる」を設定していたのではもったいないですよね。

目次のヒートマップ02

繰り返しますが、目次はめちゃくちゃクリックされる、ユーザーにとってとても便利な機能です。

ブログの目次はつねに開く設定にしておくことをおすすめします。

 

4-2.短すぎず、長すぎず

目次は短すぎず、長すぎず、ちょうどいい長さに調整しましょう。

長い目次だとユーザーにとって便利じゃありません。誰も読みたいと思わないし、頭に入ってこないです。

 

下記は長い目次の例ですが、あんまりクリックされていないことが分かりますよね。

目次を閉じるボタンもけっこう押されています。

長い目次

 

逆に下記のように短い目次なら必要ないと思います。

目次の意味を果たしていないですからね…。

短い目次

 

目次は短くても3項目、長くても9項目くらいまでがいいと思います。

人間が短時間に理解&記憶できる数はそのくらいですからね。

下記は全部で6項目の目次ですが、分かりやすくてスンナリ頭に入ってくると思います。

ちょうどいい目次

 

4-3.見出しは1行におさめる

見出しの文字数が長すぎると、改行されて読みにくいですし、

単純にゴチャゴチャ感が出て読み手にストレスがかかってしまいます。

改行されないくらいの短さで、要点を上手くついたシンプルな見出しを作りましょう。

 

4-4.目次であらすじが分かるように

目次を読んだだけでその記事のあらすじが分かるような見出し構成にしましょう。

話の順序をよく練り、読者に分かりやすく伝わるように論理的な話の展開を考えましょう。

 

余談ですが、僕がブログコンサルなどで他人の記事を診断する際は、かならず目次から見るようにしています。

目次を見れば、その人が論理的な文章を書ける人か? セールスライティングができる人か?

文章で稼ぐセンスがある人か? などがだいたい分かってしまうからです。

 

目次(というよりは見出し構成)というのは、そのくらい重要な要素なのです。

 

4-5.読みたいと思える魅力的な目次に

目次はふつうは序文(記事の冒頭)の下に置くものですので、記事を読むユーザーのほとんどが目次を目にすることになります。

つまり目次が魅力的でないと離脱が増えてしまうんですよね。

目次は見出しをリスト状に並べたものですので、魅力的な目次とは魅力的な見出しによって作られます。

数値をうまく活用する
シンプルで分かりやすくする
キラーワードを含める
読者が求める答えを書く(または書いてあることが分かるようにする)

…などなど、読んでもらえる工夫をねじ込みましょう。

 

4-6.追尾型の目次を設置

この記事をPCで読んでいる方には見えていると思いますが、

画面右(→)のサイドバーには、この記事の目次が表示されているはずです。

 

つまり追尾型の目次になっており、スクロールしてもつねに表示されるようにしています。

つまりユーザーはいつでも好きな箇所に移動することができるのです。

目次の役割はナビゲーション(案内・誘導)ですので、

記事の冒頭だけではなくいつでもクリックできるようにしておくとユーザーライクですよね。

 

この他にも、各章の本文の最後に「目次へ戻るリンク」を入れたり、

スマホの画面右下に追尾型のメニューボタンを置くというカスタマイズもおすすめですよ。

 

\ 限定情報を見逃すな! /

YouTube
動画のブログ部」はじめました! ブログやアフィリエイトに役立つ動画講座を無料配信中♪

公式LINE
LINE@で「裏ブログ部」やってます!ブログには書けない裏話、更新通知、限定情報を配信♪

Twitter
コソ~っとTwitterもやってます('ω')ノ フォロー&リプ大歓迎!いろいろ絡んできてね♪

 

 

5.ブログの目次|まとめ

新しいブログ立ち上げ

今回は大きく4つの話をさせていただきました。

 

ブログの目次は探している情報を見つけやすくする役割があるとともに、

ページ内回遊を促したり、読みたい場所にすぐに移動できるなど、

ユーザーの検索体験をより快適にするために必要不可欠な機能です。

 

ユーザーに満足してもらうためであることはもちろん、

SEO効果もあり、検索順位にも好影響を与えます。

 

ぜひ今回の内容を参考に、あなたのブログにも素晴らしい目次を導入してください。

 

 

 

WordPressを始めるなら!
【筆者愛用のSEOに強いレンタルサーバー】

 

サンツォ
エックスサーバーは国内シェアNo.1!
みんなが使っている信頼・安心の高性能レンタルサーバーだよ!

 

※4/30まで期間限定!
いまエックスサーバーを契約すると…

独自ドメイン1本を
無料プレゼント

 

 

 

-ブログ集客/収益

Copyright© ブログ部 , 2020 AllRights Reserved.