【ワードプレス】SEO対策で目次を入れる効果と目次の設定例【自作】

SEO対策実例・コラム
2019.12.31
2020.01.10

記事を作成するときに、目次をつけていますか?目次はSEO対策としても有効なので、目次を挿入しておくことがおすすめです。当記事では目次のSEO効果や目次の挿入方法について解説していきます。

目次の設定におすすめなワードプレスのプラグインやテーマも紹介しているので、目次を挿入したいと考えている方は参考にしてください。

目次とは

目次とは、記事の冒頭に設置する、記事の見出しの一覧のことです。それぞれの見出しとリンクしているので、目次をクリックすることで一気にその見出しへジャンプすることができます。目次を挿入することで、SEO対策や記事のユーザビリティを向上させることができます。

目次はいる?いらない?SEO上の目次の効果

目次が必ず必要かと言われるとそうではありません。ただ、目次があった方が良いです。目次があった方が良い理由を以下に記載いたします。

離脱率を抑えられる可能性がある

実は、Googleでは、滞在時間をAIなどで推測したり、クリック数をJavascriptで計測していると言われています。例えば、せっかく、サイトに訪問しても、目次がなく、ユーザーが離脱してしまった場合、Googleにこのサイトは「役立たなかった」と判断される可能性があります。

目次があることで、ユーザーにどんなことが書いてあるか、伝えることが出来、また、ユーザーが情報を探しやすくなります。

検索結果に表示される

目次があると、Googleの検索結果に表示されます。クリックすると、対象のページに遷移することができ、ユーザーに対して、スムーズに知りたい情報へと遷移させることが出来ます。以下は「ファーストビュー スマホ」で検索した時の画面例となります。

このように、目次があった方がSEO的には効果があると言えます。

目次が検索結果に表示されている例

目次を設置するときの注意点

目次はただ設置するだけでは意味がありません。読者にとって意味のある目次にするためには、いくつかの注意点があります。それぞれ解説していきます。

目次だけで内容がわかるようにする

目次は、目次を見ただけで記事の内容がわかるように設定します。

読者は無駄な記事を読むことを嫌うので、目次で大まかな内容を把握してから記事を読むことが多いです。そのため、目次で「その記事が何について書いてあるのか」がわかるようにしないと、本文を読む前にブラウザバックされてしまう可能性があります。

目次のタイトルが長くなりすぎないようにする

目次のタイトルは長くなりすぎないようにしましょう。目安としては、スマートフォンの画面で一行に収まるくらいです。タイトルが長ければ記事の内容を詳細に伝えることができますが、視覚的に圧迫感を感じてしまい、読者のストレスになってしまいます。

また、長文のタイトルが目次として一覧化されると、目次をスクロールするだけでも手間となり、本文になかなかたどり着けません。そうすると、読者は面倒になって本文に入る前にブラウザバックしてしまいます。記事の離脱率を上げる要因になりかねないのです。

見出しの入れ子は親を補足する

見出しの入れ子とは、小見出しの部分です。「h2」に対する「h3」のことを言います。入れ子は親を補足するように作るのが望ましいです。

たとえば、「目次を設置するときの注意点」という見出しがあったとします。この見出しに対して次のような入れ子を設定してみましょう。以下は誤った設定例です。

<div id="toc_container" class="no_bullets">
<p class="toc_title">目次</p>
<ul class="toc_list">
<li><a href="#01">1.目次を設置するときの注意点</a></li>
<li><a href="#01-01">&nbsp;&nbsp;1-1.目次を適当に設置しても意味がない</a></li>
<li><a href="#01-02">&nbsp;&nbsp;1-2.どのような目次がよいのか</a></li>
</div>

一見おかしな入れ子には見えませんが、「目次を設置するときの注意点は何か」という問いに対して、「目次を適当に設置してはいけない、正しい目次とは?」と述べているので、文脈にねじれが生じているのです。

この見出しに対して適切な入れ子は、以下のようになります。「目次を設置するときの注意点は何か」という問いに対して「具体的な注意点」を述べているので、文脈にねじれは生じません。

見出しは質問、入れ子はその答えという風に考えるとわかりやすいでしょう。

<div id="toc_container" class="no_bullets">
<p class="toc_title">目次</p>
<ul class="toc_list">
<li><a href="#01">1.目次を設置するときの注意点</a></li>
<li><a href="#01-01">&nbsp;&nbsp;1-1.目次だけで内容がわかるようにする</a></li>
<li><a href="#01-02">&nbsp;&nbsp;1-2.目次のタイトルが長くなりすぎないようにする</a></li>
<li><a href="#01-03">&nbsp;&nbsp;1-3.見出しの入れ子は親を補足する</a></li>
</div>

htmlでの目次の設定例

それでは、実際に目次の設定方法を見ていきましょう。目次は自作するやり方と、ワードプレスなどCMSにあるプラグインで設定する方法があります。それぞれメリット、デメリットがありますので、ここでの記事を読んで自分にあったやり方を選んで頂ければと思います。

目次を自作するメリットとデメリット

目次を設定する例を以下に示します。自分で、作るメリットとして、デザインが自由にできることと、
特にワードプレスでいくつか自動で目次を挿入してくれるプラグインがありますが、大体、JavaScriptを使っているため、表示が遅くなる可能性があります。

目次を自作するデメリットとしては、記事ごとに作成する必要があるため、手間がかかることと、ある程度のhtmlの知識が必要となります。

htmlでの目次の設定方法

以下のような目次を作成します。

htmlでの目次の設置例

・html

<div id="toc_container" class="no_bullets">
<p class="toc_title">目次</p>
<ul class="toc_list">
<li><a href="#01">1.11月における各順位計測ツール変動状況</a></li>
<li><a href="#01-01">&nbsp;&nbsp;1-1.国内の順位計測ツール変動状況</a></li>
<li><a href="#01-02">&nbsp;&nbsp;1-2.海外の順位計測ツール変動状況</a></li>
<li><a href="#02">2.11月における弊社順位変動について</a></li>
<li><a href="#02-01">&nbsp;&nbsp;2-1.英文校正系キーワード</a></li>
<li><a href="#02-02">&nbsp;&nbsp;2-2.評判系キーワード</a></li>
<li><a href="#03">3.順位が下落した場合の対応策</a></li>
<li><a href="#04">まとめ</a></li>
</ul>
</div>

<h2 id="01">11月における各順位計測ツール変動状況</h2>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>

<h3 id="01-01">国内の順位計測ツール変動状況</h3>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>

<h3 id="01-02">海外の順位計測ツール変動状況</h3>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>


<h2 id="02">11月における弊社順位変動について</h2>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>

<h3 id="02-01">英文校正系キーワード</h3>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>

<h3 id="02-02">評判系キーワード</h3>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>


<h2 id="03">順位が下落した場合の対応策</h2>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>

<h2 id="04">まとめ</h2>
<div class="txt_box">
<p style="padding-left: 30px;">
テキストが入ります
</p>
</div>

・css

#toc_container {
position: relative;
width: 100% !important;
margin: 2.5em 0;
padding: 20px 15px;
border-top: solid 5px;
font-size: .95em;
background: #f9f9f9;
border-color: #5ba9f7;
box-shadow: 0 1.5px 2.4px rgba(0,0,0,.15);
}
#toc_container .toc_title {
display: inline-block;
position: relative;
margin: 0 0 0 45px;
padding: 5px 0 5px 10px;
font-size: 23px;
font-weight: bold;
color: #5ba9f7;
}
#toc_container .toc_title:before {
display: inline-block;
position: absolute;
top: 0;
left: -45px;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-family: FontAwesome;
font-size: 20px;
font-weight: normal;
text-align: center;
line-height: 50px;
content: "\f0ca";
}
#toc_container ul {
list-style-type: disc;
padding: 0;
border: 0;
}
#toc_container .toc_list li {
font-weight: bold;
}
#toc_container .toc_list {
margin-bottom: 0;
margin-left: 18px;
color: #585858;
}
#toc_container .toc_list li ul {
margin: 5px;
padding-left: 15px;
}

上記のように、実際にhtmlで書く場合は、「ul」と「li」タグを使います。
目次にするのは基本的に、「h2」や「h3」タグなどの見出しタグを設定するのが良いです。

また、目次から目的のコンテンツ部分に遷移させるために、
目次には以下のようなアンカーテキストを設置します。

<li><a href="#01">1.11月における各順位計測ツール変動状況</a></li>

遷移先には以下のようなアンカーテキストに対応したidを設定します。

<h2 id="01">11月における各順位計測ツール変動状況</h2>

このような内部リンクを設置することで、ユーザーは、全ての情報を読まなくても、知りたい情報だけに遷移することが出来るので、ユーザービリティーが向上します。

ユーザービリティーはSEOにとっても重要な部分ですので、目次はただ単にテキストとして、表示するのではなく、上記のように、各目次に対応する内部リンクを設置しましょう。

ワードプレスではどんなプラグインがある?

ワードプレスのプラグインを使うことで、より簡単に目次を設定することができます。

ここでは、よく使われているプラグインを2つ紹介します。

Table of Contents Plus

Table of Contents PlusはHTMLでh2やh3などを設定しておけば、自動で目次を作成してくれるプラグインです。過去に作成した記事にも適用されるので、手動で目次を設定していく手間が省け、設定も簡単です。

プラグインをインストールしたら、「設定」の「TOC+」を選択します。

ワードプレスでtocを選択

そうすると設定画面がでてくるので、「基本設定」を設定していきましょう。

tocの基本設定画面

設定は好みで設定しても大丈夫ですが、ここでは特にチェックしたいポイントをみていきます。

コンテンツタイプを自動挿入

ここでチェックいれたタイプのコンテンツに目次が設定されます。

「post」は投稿、「page」は固定ページのことです。両方にチェックいれておきましょう。
またワードプレスをカスタムし、カスタム投稿できるようにしていたらそのクラスも見出しを設定するようにしたほうが良いです(特にランキングページなど)。

見出しテキストを追加

目次の上に付くテキストのことです。デフォルトでは「contents」となっています。「目次」や「この記事の内容」などに変更するとわかりやすくなるでしょう。

階層を表示する

入れ子を表示するかどうかの設定です。チェックを入れておきましょう。ただ、見出し3、見出し4、見出し5と大量の小見出しを作っている場合はチェックを外すことでスッキリとした目次になります。

番号を振る

目次の前に番号を挿入するかどうかです。こちらもチェックをいれておいて大丈夫です。

Easy Table of Contents

Easy Table of Contentsも簡単に目次の設定ができるプラグインです。
プラグインをインストールしたら、まず、「設定」から「目次」をクリックします。

Easy Table of Contentsの基本設定選択画面

そうすると設定画面が出てくるので、設定していきましょう。

Easy Table of Contentsの基本設定画面

設定が完了したら、実際に記事を開いて目次が表示されているか確認してみてください。

また、Easy Table of Contentsではサイドバーに目次を表示させることもできます。サイドバーに目次を表示することで、本文を読んでいる途中でも記事全体の流れを見ることができるので、おすすめです。

Easy Table of Contentsにおける目次表示例

サイドバーに目次を表示するには、「外観」の「ウィジェット」から設定します。「サイドバー」に目次を追加しましょう。

Easy Table of Contentsにおけるサイドバー設定画面

ワードプレスのテーマで目次を設定する方法(Cocoon)

目次作成機能が入っているテーマを使うことで、プラグインがなくても目次を簡単に作成できます。ここでは、cocoon(コクーン)を紹介します。

Cocoonをインストールするには、まずcocoonのホームページからファイルをダウンロードします。cocoonには親テーマと子テーマがあるので、両方ダウンロードします。

コクーンのダウンロード画面

続いて、ワードプレスにテーマをインストールします。

「外観」→「テーマ」→「新規追加」→「テーマのアップロード」とクリックしていきます。「ファイルを選択」をクリックして、ホームページからダウンロードした親テーマのZIPファイル「cocoon-master.zip」をアップロードしましょう。

コクーンのプラグイン追加画面

「テーマのページに戻る」をクリックし、今度は子テーマのZIPファイル「cocoon-child-master.zip」をアップロードします。完了したら「有効化」をクリックしてください。

テーマをcocoonにすることで、特に設定しなくても、自動で目次が挿入されるようになります。

ただし、プラグインなどで目次を挿入する設定をしていた場合、cocoonの目次とプラグインの目次の両方が表示されるようになってしまいます。その場合はプラグインの目次設定から、目次を表示しないようにしましょう。

まとめ

SEO対策として有効な目次。適当に挿入してもあまり効果はありませんが、適切な目次を付けることで、読者は記事の概要を把握できるようになり、より読みやすく感じるようになります。目次はhtmlでも挿入できますが、ワードプレスでブログを書いているのであれば、htmlの知識がなくてもワードプレスのプラグインやテーマを利用することでより簡単に挿入することができます。この記事を参考に、目次の設定をしてみてください。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)