目次とは、記事の見出し一覧（アウトライン）のことです。
サイトの内容にもよりますが、目次があったほうがユーザーにとってわかりやすい記事になる場合があります。
今回は、目次を付けるメリットや目次の付け方について深堀りしていきたいと思います。
▼目次とはこれのことです▼
ブログの目次とは記事の「見出し一覧」のこと
目次とは、記事の見出し一覧のことです。記事の冒頭に表示します。
目次をクリックすると、その見出しに移動します。（＝ページ内リンク）
ブログの目次を作るために必要な「見出し」
見出しは見出し1（<h1>）～見出し6（<h6>）まで設定できます。
HTMLでは、「<h1>見出しのテキスト</h1>」のように、<h>～</h>タグで囲います。
- 見出し1（<h1>）→大見出し
- 見出し2（<h2>）→中見出し
- 見出し3（<h3>）→小見出し
と考えるとわかりやすいです。
通常、記事のタイトルが「見出し1（<h1>）」になるので、本文中の見出しは「見出し2（<h2>）」以下を使います。
※見出しの順番を飛ばしてしまったり（h2→h4）、順番が前後（h2→h4→h3）するのはNGです。（＝SEO的に不適切）
目次の必要・不要は「サイトの内容」によって変わる
そもそも、目次って必要なのでしょうか。
結論→サイトの内容による
記事の全体像を先に伝えたほうがわかりやすいサイトの場合は、目次が必要です。
《目次が必要なサイト》
- ノウハウ系サイト
- 文字数が多いサイト
- アフィリエイトサイト
《目次は不要なサイト》
- 日記
- エッセイ
- 小説
- ネタバレするとつまらないサイト
上記はあくまで目安ですが、目次があったほうがユーザーにとって親切かどうかで設置するか否かを判断しましょう。
ブログに目次を設置するメリット
- 利便性を高める
- Google検索から見出しにダイレクトで飛べる
- SEO的に若干効果的
利便性を高める
目次があると、記事に書かれている内容が予めわかるので、知りたい答えがあるかどうかを記事を読む前に判断出来ます。
目次から知りたい答えが書かれている部分にすぐに飛ぶことも出来ます。
Google検索から見出しにダイレクトで飛べる
目次を設置すると、Google検索から見出しにダイレクトに飛べるようになります。知りたい情報にすぐに飛べるので、Google検索からの流入増加が期待できます。
SEO的に若干効果的
一番大事なのは「ユーザーのためになる質の高いコンテンツ」を作ることですが、目次を設置したほうがSEO的にも若干効果的なのではないかと言われています。
ブログに目次を付ける際のポイント
- 目次だけで記事の内容が分かるようにする
- 目次（見出し）は疑問形にしない
- 目次（見出し）に検索キーワードを含める
- 目次（見出し）が短すぎる or 長くなりすぎないようにする
目次だけで記事の内容が分かるようにする
目次は記事のアウトラインです。目次だけで記事の内容がわかるようにしましょう。
目次（見出し）は疑問形にしない
上記のように、目次だけで記事内容がわかるようにするためには、なるべく疑問形にしないほうが良いです。
見出しを疑問形にしてしまうと、文章を読まないと結論がわからないからです。（疑問形のほうが良い場合もあるので、絶対ではないです。）
目次（見出し）に検索キーワードを含める
見出しはページ内でも重要な部分なので、出来る限り検索キーワードを含めるようにしましょう。見出しに検索キーワードを含めると、検索に引っかかりやすくなります。（SEO的に効果的）
ただし、検索キーワードを含めて不自然になるようであれば、無理に含めなくてもOKです。
目次（見出し）が短すぎる or 長くなりすぎないようにする
見出しが短すぎると意味がわからないですし、長すぎると読む気が失せてしまいます。
短すぎる見出し例）
「観光スポット」→若干説明不足なのでNG！
長すぎる見出し例）
「横浜のおすすめ観光スポットは、中華街とみなとみらい地区で、名物は肉まんとしゅうまいで、人気のお店は…」→もはや文章なのでNG！
この場合、「横浜のおすすめ観光スポット」くらいが適切でしょう。
WordPressのおすすめ目次プラグイン『Table of Contents Plus』
WordPress（ワードプレス）では、プラグインで簡単に目次を付けられます。おすすめのプラグインは『Table of Contents Plus』です。
プラグインをインストールしたら[有効化]します。
左メニュー[設定]-[TOC+]より
「以下のコンテンツタイプを自動挿入」の「post」にチェックを入れ、一番下の[設定を保存]ボタンを押します。
上記設定では、post（投稿ページ）とpage（固定ページ）に目次を表示する設定になっています。page（固定ページ）はどちらでもOKです。
《おすすめの設定箇所（任意）》
「最初は目次を非表示」…どちらでもOK
「見出しレベル」…「h3」くらいまで
「番号振り」…どちらでもOK（テーマによっては指定がある場合もあります）
スムーズ・スクロール効果を有効化…どちらでもOK（有効化するとスルスルっとスクロールで移動します）
ブログの目次はスマホでは「閉じている状態（非表示）」がおすすめ
記事を開いた時に、目次が「開いている状態（表示）」か「閉じている状態（非表示）」かを選ぶことが出来ます。
どちらでもOKですが、スマホでは「閉じている状態（非表示）」をおすすめします。目次で画面がいっぱいになってしまうためです。
だったら最初は非表示にしておいて、読みたい人だけ表示して見てもらえば良いかなと思います。
どちらが良いかはサイトによっても異なるため、アクセス解析をしてみて、目次があるパターンと無いパターンで離脱率がどう変化するかをテストしてみると確実です。
アクセス解析には、「Google Analytics（グーグル アナリティクス）」を使います。「Google Analytics（グーグル アナリティクス）」の使い方については、別の記事で解説したいと思います。
▼Google Analytics（グーグル アナリティクス）
https://www.google.com/analytics/web/?hl=ja
コピペOK！プラグインを使わずにHTML・CSSで目次を作る方法
- 自由なデザインで目次を作りたい
- 特定の記事だけに目次を入れたい
などの場合、プラグインを使わずに目次を作ってもOKです。
目次と見出しのHTML
《目次：HTMLのみ》
<ul>
<li><a href=”#A”>見出しA</a></li>
<li><a href=”#B”>見出しB</a></li>
<li><a href=”#C”>見出しC</a></li>
</ul>
《見出し：HTML》
<h2 id=”A”>見出しA</h2>
<h2 id=”B”>見出しB</h2>
<h2 id=”C”>見出しC</h2>
《目次：HTML＋CSS》
<ul style=”padding: 10px; border: 1px solid #ccc;”>
<li><a href=”#A”>見出しA</a></li>
<li><a href=”#B”>見出しB</a></li>
<li><a href=”#C”>見出しC</a></li>
</ul>
HTML・CSSの解説
箇条書き・リンク・見出しを組み合わせて作っています。
《HTML：箇条書き》
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
《HTML：リンク》
<a href=”リンク先URL”>テキスト</a>
リンク先URLを「#●●」とすると、「#」＝idを意味するため「id=●●」と名前が付いた場所にリンクします。
《HTML：見出し》
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>
《CSS》
<ul>に「style」を付けてCSSを記載しています。
<ul style=”padding: 10px; border: 1px solid #ccc;“>
ここでは「余白10px・線1px」を付けています。
※外部CSSに記載したほうがスマートですが、解説が長くなるためここでは割愛します。
まとめ
目次とは、記事の見出し一覧のことです。目次の必要・不要は、サイトの内容によって変わります。
- ノウハウ系サイト
- 文字数が多いサイト
- アフィリエイトサイト
などの場合は、目次があったほうが利便性が向上するので設置をおすすめします。
上記では、目次を作る際のポイントや、HTML・CSSによる目次の作り方なども解説しています。
目次を付けたほうが、自分のためにも良いかもしれません。目次があると話がブレにくく、後から見直す時にもスムーズだからです。
ぜひ、上記を参考に目次の設置を検討してみてくださいね！
コメント