この記事を読めば、ブログの目次の必要性や設置の仕方、今よりも滞在時間をぐんと伸ばす目次を作るコツがわかります。
ブログの目次。基本的には付けてるサイトがほとんどですが、「ほんとに意味あるの？」と思っちゃいますよね。
「でも皆つけてるし、デフォルトで開いてるし…」と、なんとなく付けている「目次」。
でも、「なんとなく」だと気持ち悪いと。
そこで今回、目次をつけた場合とつけていない場合を比較して検証してみました。
すると、とある記事では目次の有無で滞在時間に3分もの違いが出るという結果が。
また、目次をクリックされやすい記事とそうでない記事では、クリック率が20%も違うことも判明。
なかなかハッキリした違いがわかりました。
- ブログの滞在時間を改善したい人
- 良い目次の作り方を知りたい人
- 目次ってなに？いるの？と思ってる人
目次があることでなぜ滞在時間がかわるのか？また、目次が必要な記事とそうでない記事は？
さらにさらに、読者に喜ばれる目次の作り方とは？
「ブログの目次」について、データや実例を元に解説していきます。
ブログに必要な「目次」とは？
その記事に書いてある内容を、見出しだけで端的にまとめたものが「目次」です。
たとえばこの記事の目次は、以下の画像のとおり。
ブログにこの「目次」があることで、自分にも読者にも、いろいろと良いことがあるんですよね。
どんな良いことがあるのか、すこし掘り下げていきます。
目次はめちゃくちゃクリックされる
上記の画像は、このブログの「fire tv stickがぶっ壊れたときの対処法」の記事の目次部分をヒートマップでチェックした結果。
25%以上の人が目次から記事を読み進めていることがわかります。
※ちなみにこのヒートマップツールは「heatmap.me」というもので、5記事までは無料で使えてオススメです。
4人に1人が、目次の見出しをみて「ここが読みたい」とクリックしていると。
思ったより多くないですか？
目次がクリックされる理由は「読者が忙しいから」
何故こんなに目次がクリックされるのかと言えば、シンプルに「読者は忙しいから」です。
自分にとって必要な部分だけ読みたいので、書いてある場所がわかるなら即座にそこにジャンプしたいんですね。
つまり目次を設置しておくと「読者にとって親切な作りである＝Googleからの評価も上がる」というような、間接的なSEO効果もあると感じています。
【朗報】目次をいれたら滞在時間が約3分伸びた
SEO効果と言う話を出したついでに、「滞在時間」についての話題も。
「目次から飛ばれてしまうと、滞在時間が下がってしまうのでは？」という疑問は当然でてきますよね。
あくまで3日ほどの検証ではありますが、上記のfire tv stickの記事で「目次を設置した場合」と「設置していない場合」を比較して検証してみました。
結果、目次を設定した方が約7分30秒。設置していない方が4分30秒。
目次を設置した方が、滞在時間が約3分も長くなりました。
テストが3日だけだったのでブレがありそうな気はしますが、一つの比較検証の結果として出たデータです。
上記の結果から、目次がないケースでは「上から下まで見て情報探すのめんどくせえ」と思ってすぐに出ていっちゃった人が増えた。という予測が立ちますね。
もちろん記事の種類にもよるとは思いますが「目次を設置することでユーザー行動が改善される可能性が高い」と言えます。
目次が必要ない記事もあるが、あって損はない
目次の特性から考えるに、「読者が調べる必要にせまられて辿り着いた記事」の目次はクリックされやすいと言えます。
例えばさきほどの「fire tv stickの故障対応」の記事は、完全に必要にせまられて検索してますよね。
反対に、「興味があって調べている」といった状況で読む記事であれば、目次のクリック率は低くなります。
たとえば下の画像は、僕の趣味の一つである「筋トレ」を楽しめるサービスの「リーンボディ」の感想を書いた記事の目次です。
「リーンボディ」というサービスの感想を見たくて来てるので、必要にはせまられてないですよね。つまり上から順番にずらーっと適当に読んでいく人が多いと予想できます。
その結果、リーンボディの記事の目次のクリック率は5%程度。fire tv stickの記事の「25%」と比べると、はっきりとした差が出ました。
こんな記事だと別に目次がある必要性はないようにも思いますが…
僕の出した結論は、「目次はあって困る物ではないから、あった方が良いのでは？」という意見です。
大抵の企業メディアや個人ブログが目次をつけている理由は、そんなところですかね。
ブログに目次を設置する方法
それでは具体的に、ブログに目次を設置する方法をお伝えしていきます。
WordPressを使っている場合が一番簡単で、そもそもテーマに機能としてついている場合すらあります。
そうでなくてもプラグインを利用してカンタンに導入できますので、設置しない手はないですね。
WordPressのプラグインで目次を設置する方法
目次を作るプラグインはいろいろとあるのですが、僕が使っているものが簡単に使えてオシャレでオススメなので紹介しておきます。
「Rich Table of Contents」
というプラグインですね。もちろん無料です。
ただインストールするだけで全記事に目次を作ってくれるという優れたプラグインなのですが。
上の画像のように目次のタイトルや表示する見出しを変えられたり。
はたまたデザインを変えられたりします。
「あれ？表示されないぞ？」ってときは、一番したの「変更を保存」を押せばだいたい解決。
ちょっとオシャレで自分好みな目次をつけたいときは、「Rich Table of Contents」を使ってみてください。
【無料ブログ向け】HTML手打ちで目次を設置する方法
「ページ内ジャンプ」とか「アンカー」と呼ばれる方法を使って、手打ちで目次を用意することもできます。
無料ブログには「目次」の機能が用意されていないこともありますので、そんなときは自分で作ってしまっても良いでしょう。
僕はそもそも「ブログはWordPressで運営したほうが絶対良い」と思ってますが。
さて、HTMLでコーディングして目次を用意したい場合、たとえば下記のようなものを作れます。わずかな距離ですが、目次1～3をクリックすると「飛び先」にジャンプするので試してみてください。
上記のコードをそのままお見せすると、以下のような内容。
<ul>
<li><a href=”#mokuji1″>目次1</a></li>
<li><a href=”#mokuji2″>目次2</a></li>
<li><a href=”#mokuji3″>目次3</a></li>
</ul>
<span id=”mokuji1″>目次1の飛び先</span>
<span id=”mokuji2″>目次2の飛び先</span>
<span id=”mokuji3″>目次3の飛び先 </span>
<ul>とか<li>は今回の目次とは直接関係ありません。
重要なのは、「id=”mokuji1″」の部分ですね。
目次の「飛び先」に「id」という目印のタグを仕込んでおいて、目次からリンクを貼るようなイメージ。
この「id」タグは、上記のコードのように<span>というタグの中にも設置できますし、見出しに使われる<h2>や<h3>といったタグの中にも設定できます。
以下の記事の中で詳しく解説していますので、どうしてもわからない場合はあわせてご覧下さい。
読まれやすいブログの目次にするコツ・注意点
ブログに目次を設置する方法はわかりましたよね。
つぎは具体的に「どんな目次にすれば読まれやすいのか？」という内容を掘り下げて説明していきます。
良い目次をつくれば、探している情報がどこにあるかわかります。その結果、滞在時間の増加につながるはず。
「読まれやすい目次」の作り方は、ぜひマスターしておきたいスキルですね。
目次を見ただけで、記事の内容がわかるのが理想
そもそものwebライティングの基本ですが、「目次を見ただけで記事の内容が分かる」状態が理想です。
ブログ記事は、基本的に1記事1テーマ。読者から聞かれたことに答えるようなイメージで書くのが基本です。
上から順番に読んで理解できるような記事構成になっているなら、目次も自然と「見ただけでストーリーがわかる」ようになっているはずです。
意識しなくても作れるようにしたいですね。
目次の構造を複雑にしすぎない
目次があまりに細かすぎると、逆に読みづらくなってしまいます。
一般的には、「<h2>（大見出し）」のタグと「<h3>（中見出し）」のタグまでを表示するのが見やすいとされています。
目次は「読者が知りたい情報がどこに書いてあるのかわかる」ように用意するものです。
H4やH5まで目次にいれてしまうと、ゴチャゴチャしすぎて逆にわからなくなる…というわけですね。
1つの目次は30文字以内におさめる
なにかルールがあるわけではありませんが、あまりに目次が長すぎるのも考え物です。
たとえば、以下の画像のような目次はどうでしょう。
やけに長い目次が混ざっていると、かなり読みにくいですよね…。上記はPCでの表示ですが、スマホで見るとなおさらです。
できるだけ端的に伝えられる目次にしておきたいですね。
常に開いておいた方が良い（と言われている）
その記事に読者が訪れたときに、最初から目次が開いているサイトと、閉じているサイトがあると思います。
そのサイトの雰囲気にもよるので一概には言えませんが、一般的には「最初から開いている方が良い」と言われています。
冒頭でお伝えしたように、目次の有無で滞在時間が3分も変わった記事もありますので、「見えてた方が便利」ってことですね。
とはいえ好みにもよりますので、「今は閉めてるけど、少しでも読者のページ内行動を改善したい！」という場合は、いちど開けてみても良いかもしれません。
ブログの目次は、読者のために必要なもの
ブログの目次をうまく用意すれば、読者は情報を探しやすくなり、筆者からすれば記事の滞在時間が伸びて嬉しくなり、win-winです。
ぜひ目次を利用して、良いブログにしていきましょう。
ちなみにストーリー性のある目次を作るには、そもそも記事のテーマやターゲット読者を明確に設定しておくことも必要です。
「テーマ」や「ターゲット」の設定方法は以下の記事で解説していますので、ぜひあわせてご覧下さい。
30秒診断
あなたにピッタリな退職代行は？
簡単な質問に答えるだけで、あなたの状況に合った退職代行がわかります。
診断結果
あなたにおすすめの退職代行は
退職代行SARABA（サラバ）です。
退職代行SARABA（サラバ）は、労働組合の退職代行。24時間365日対応で、有給も全て使って即日退職できます。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。
＼CHECK NOW／
まずは無料で、24時間対応のLINE相談から
※退職代行SARABA公式サイトにジャンプします
診断結果
あなたにおすすめの退職代行は
退職代行SARABA（サラバ）です。
退職代行SARABA（サラバ）は、労働組合の退職代行。会社と交渉する法的な権利があるので、安心して即日退職できます。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。
＼CHECK NOW／
まずは無料で、24時間対応のLINE相談から
※退職代行SARABA公式サイトにジャンプします
診断結果
あなたにおすすめの退職代行は
退職代行SARABA（サラバ）です。
退職代行SARABA（サラバ）は、労働組合の退職代行。有給も全て使って即日退職できます。
実はパワハラやセクハラなどの具体的な被害が無い場合は、弁護士に頼んでも賠償請求は難しいかもしれません。
そんな会社に時間を割くくらいなら、弁護士よりリーズナブルな「労働組合」のサービスでスッキリ辞めましょう。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。
＼CHECK NOW／
まずは無料で、24時間対応のLINE相談から
※退職代行SARABA公式サイトにジャンプします
診断結果
あなたにおすすめの退職代行は
「弁護士法人みやび」です。
弁護士法人みやびは、その名の通り弁護士の退職代行。有給が全部使えるように交渉してもらえて、とにかく安心して辞められます。
料金は50,000円ポッキリと労働組合のサービスより高くはなりますが、その分「弁護士」というネームでトラブルのリスクなく辞められるでしょう。
お金よりも「安心」を取りたいあなたは、弁護士法人みやびで決まりです。
＼CHECK NOW／
まずはLINEで無料相談から
※弁護士法人みやび公式サイトにジャンプします
診断結果
あなたにおすすめの退職代行は
「弁護士法人みやび」です。
弁護士法人みやびは、その名の通り弁護士の退職代行。有給だって全て消化できるのはもちろん、損害賠償請求までお願いできます。
退職代行自体の料金は50,000円ポッキリ。それに加えて賠償請求は「成果の20%」の成果報酬でお願いできるシステム。
損害賠償請求までお願いしたいあなたは、弁護士法人みやびで決まりです。
＼CHECK NOW／
まずはLINEで無料相談から
※弁護士法人みやび公式サイトにジャンプします
診断結果
あなたにおすすめの退職代行は
「退職代行J-NEXT」です。
J-NEXTは普通の会社が運営する退職代行なので、有休消化などはお願いできません。
とにかく20,000円ポッキリという料金が魅力で、退職代行業界の中でもトップクラスの格安サービスです。
安心よりも「料金」を取りたいあなたは、退職代行J-NEXTに相談してみて下さい。
＼CHECK NOW／
J-NEXTならとにかく安く辞められる
さっそく無料相談する
診断結果
あなたにおすすめの退職代行は
「退職代行NEXT」です。
退職代行NEXTは弁護士が運営する退職代行。弁護士のサービスの中ではもっともリーズナブルな料金で退職できると評判です。
退職料金は30,000円ポッキリ。損害賠償請求は成果報酬で20%（状況により変動する場合あり）です。
有給の使用、損害賠償請求の相談も含め、できるだけリーズナブルに済ませたいあなたにはNEXTがおすすめ。
平日日中のみの連絡にはなるので即日対応には向きませんが、じっくり相談して辞めたい方はNEXTに相談してみて下さい。
＼CHECK NOW／
まずは無料で、LINE相談から。
※退職代行NEXT公式サイトにジャンプします
