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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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