プラグイン 2023.09.09

WordPressに目次を挿入するメリットとおすすめプラグイン紹介!

この記事を書いた人

土井 純也

WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO

1985年北海道生まれ。
200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。

【 展開しているサービス一覧 】
■WordPress開発サービス「wp.make
■WordPress保守/運用サービス「wp.support
■WordPressハッキング/緊急復旧対応サービス「wp.rescue
■WordPressバージョンアップ代行サービス「wp.versionup

「WordPressに目次を挿入するメリットは何?」

「目次を挿入するためには専門知識が必要なの」

このように、WordPressに目次を挿入する意味やメリット、目次の作り方でお悩みではありませんか。

画面内の表示領域が限られたページへアクセスするユーザーの多くは、目次から気になる見出しをクリックし、ページ内リンクで目的のコンテンツを読み進めます。

そのため、目次がユーザーに与える影響は大きく、ユーザビリティ向上にも貢献します。

目次はユーザーが必ず目を通す部分ですので、必ず設置しましょう。

本記事では、改めてWordPressサイトに目次を設置する意味、メリットをご紹介します。

また記事後半では、目次の作り方も解説しますので、ぜひ参考にしてみてください。

1.WordPressに目次を挿入する意味とは

WordPressに目次を挿入する意味は、ユーザビリティの向上、この1点につきます。

実際にヒートマップツールを導入してみると一目瞭然ですが、多くのユーザーがWordPressサイトやブログにおいて、必ず目次に目を通しています。

ヒートマップツールとは、Webサイトの各ページにおいて、ユーザーがどのような行動をしているのか色で判断できる行動分析ツールのこと。

導入することで、ユーザーのマウスの動きやクリックされている箇所が、はっきりと分析できます。

目次は、気になる見出しへ、最短でアクセスできる非常に便利な機能であり、見出し読みをするユーザーにとっては必要不可欠でしょう。

2.WordPressに目次を挿入する3つのメリット

WordPressに目次を挿入する具体的なメリットについて、ご紹介します。

2-1.利便性の向上

WordPressサイトに目次が挿入されていない場合を想像してみてください。

おそらく、Webサイトを訪問したユーザーが、どこに何が書かれているか瞬時に把握することは難しいですよね。

求めている情報を探すため、モバイル端末であれば、スクロール量も多くなりユーザーにとってストレスでしかありません。

ところが目次を挿入することによって、各見出しから記事の全体像を把握でき、どこに何が書かれているか一目瞭然です。

目次のページ内リンクから、気になる見出しへアクセスすれば、最短で必要な情報に辿り着けます。

目次は、ユーザーの利便性が向上し、潜在的な課題や悩み解決に貢献する非常に便利な機能です。

2-2.アクセス数の向上につながる

目次をWordPressサイトに挿入するメリット2つ目は、アクセス数の向上につながるということです。

具体的には、ページ内に設置する目次や見出しを、適切なHTMLタグでマークアップすることで、Google検索結果のスニペットにページ内リンクを表示できます。

スニペットとは、検索結果の画面に表示されるWebページ内の情報を掲載する説明欄のことです。

ここに目次が挿入されるため、ユーザーは検索結果から自分が求めている情報が掲載されているのか一目で確認でき、アクセス数やクリック率の向上に役立ちます。

2-3.SEO対策にもつながる

WordPressサイトに目次を挿入することで、ユーザーの利便性が向上し、検索結果からも目次を確認でき、アクセスアップにつながるとお話をしました。
実は、このようにユーザーの利便性を第一に考え、必要な情報を素早く届けることは、ユーザーファーストとしてGoogleから高い評価を獲得できる可能性があります。

つまり、目次の挿入は、以下のようにGoogleが掲げる使命に合致するものであり、重要な対策の1つです。

Googleはいつでも、有益で関連性の高い情報をユーザーに提供することを目指しています。

引用:Google 検索の仕組み|精密に精査する

ここまで、WordPressに目次を挿入する3つのメリットをご紹介しました。

ユーザビリティの向上やアクセスアップ、そしてSEO対策など、さまざまなメリットがありますので、ぜひ設置を検討してみてください。

なお、「目次を設置するデメリットが気になる」という方もいらっしゃるかもしれませんが、設置することで不具合が生じることはありません。

特にデメリットは存在しないため、安心して設置できますよ。

3.WordPressサイトに目次を作るおすすめプラグインを紹介!

WordPressサイトに目次を設置するメリットを理解できたところで、実際におすすめのプラグインを紹介したいと思います。

なお、プラグインを利用せずとも手動で作成することも可能です。しかし、HTMLやPHPの知識が必要となりますので、完全初心者向けではありません。

今回は、WordPressの扱いに慣れていない初心者でも、気軽に導入できるプラグインで解説いたします。

3-1.おすすめプラグイン「Table of Contents Plus」


「Table of Contents Plus」は、WordPress初心者でも気軽に導入できる、目次用のプラグインであり、利用者数も非常に多いことからおすすめです。

早速、Table of Contents Plusのインストールから設置の手順をみていきましょう。

3-1-1.プラグインを新規追加


WordPress管理画面、左側のメニューより「プラグイン」→「新規追加」をクリックしてください。

プラグインの新規追加画面が表示されますので、右上の検索窓に「Table of Contents Plus」と入力します。

3-1-2.プラグインをインストールし有効化


上の画像のようにTable of Contents Plusが表示されたら「今すぐインストール」をクリックし、有効化をしてください。

3-1-3.管理画面からTOC+をクリック

次に、WordPress管理画面、左側メニューより「設定」→「TOC+」をクリックします。

3-1-4.目次の設定を進める


上のような画面が表示されますので、以下の通り設定してみてください。

【表示条件:2つ以上見出しがあるときに変更】
表示条件とは、目次を表示するための条件のことで、ここでは2つ以上の見出しがある場合に表示するよう変更しています。

【以下のコンテンツタイプを自動挿入:postとpageにチェックを入れる】
コンテンツタイプとは、簡単に言えば、目次を表示するページのことです。ここでは、目次を自動挿入するページを指定できます。

今回は「post=ブログの投稿ページ」と「page=固定ページ」に目次を自動挿入する設定をしました。

【見出しテキスト:目次と入力】
見出しテキストとは、目次の上に表示するタイトルを指定できる設定です。ここでは「目次」と入力しました。

【ユーザーによる目次の表示・非表示を切り替えを許可】
目次の表示・非表示をユーザー自身が切り替えられる設定です。今回は、ユーザーの利便性を考慮してチェックを入れていますが、任意で調節してみてください。

3-1-5.上級者向け設定を進める

基本設定ページの下部に「上級者向け(表示)」という項目がありますので、「表示」をクリックしてみてください。

すると、上の画像のように上級者向けの詳細設定が開きます。

このなかで「見出しレベル」という項目がありますので、「heading 2 – h2」と「heading 3 – h3」「heading 4 – h4」にチェックを入れます。

これはHTMLにおいて、見出し1〜6まで設定できる見出しレベルを、目次にどこまで反映するかを決定できるものです。

h1は、ブログ記事や固定ページのタイトルに該当する部分ですので、目次には必要ありません。

目次に挿入する見出しレベルは、h2以降で指定してみてください。

なお、目次内の見出しがあまりにも多いとユーザーのストレスになりますので、今回はh2・h3・h4までを設定しました。

設定が完了したら、ページ下部の「設定を更新」をクリックしましょう。

これで、Table of Contents Plusの設定は完了しました。

3-1-6.投稿画面で確認しよう

目次の設定が完了しましたので、実際に記事を投稿して、画面表示で確認してみましょう。

このように、設定した見出しレベルh2・h3・h4が、目次に挿入されていることが確認できます。

また「hide」をクリックすることで、ユーザーが任意で目次を閉じることもでき、非常に便利です。

Table of Contents Plusは、WordPressの操作に慣れていない方でも、基本的な設定だけで気軽に導入できますので、ぜひ検討してみてください。

3-2.Table of Contents Plusの便利な設定
ここまでご紹介した方法でも、十分便利なTable of Contents Plusですが、基本設定を一工夫すると、さらに使いやすくなります。

ここでは、Table of Contents Plusの便利な設定について解説します。

3-2-1.表示・非表示を任意の文字列に

Table of Contents Plusの基本設定には、上の画像のように「ユーザーによる目次の表示・非表示を切り替えを許可」という項目があります。

デフォルトでは、表示を「show」非表示が「hide」に指定されていますが、表示を「開く」非表示を「閉じる」に変更してみましょう。

この状態で記事を投稿し、表示を確認すると……。


このように、非常に分かりやすい形式になりました。

ささいな工夫かもしれませんが、ユーザーファーストを意識して都度調節してみてください。

3-2-2.ショートコードで任意の場所に目次を挿入

Table of Contents Plusは、手動で任意の場所に目次を挿入することも可能です。

具体的には、以下のように任意の場所にショートコードを挿入します。

今回は、記事の投稿画面(ブロックエディタ)からショートコードを挿入しました。この状態で、記事を公開し確認してみましょう。

このように、本来であれば見出しの上に表示されるはずの目次が、指定した場所に挿入されていることが確認できます。

もちろん、使用頻度こそ多くはないかもしれませんが、非常に便利な機能ですので、ぜひお試しください。

まとめ

本記事では、WordPressサイトに目次を挿入する意味と、以下3つのメリットを整理しました。

利便性の向上
アクセス数の向上につながる
SEO対策にもつながる

特にブログ記事やオウンドメディアなど、コンテンツのボリュームが大きいページでは、目次が挿入されていないと何が書かれているか把握しづらいです。

その結果、求めている情報を探すためにスクロール量も多くなり、ユーザーファーストとは言えません。

ユーザーの悩みや疑問の解決策をスムーズに提示するためにも、目次で最適な見出しへと誘導する必要があります。

また、目次を挿入することで、Google検索結果のスニペットに表示され、SEO対策としてもおすすめです。

WordPressに不慣れな方も、プラグインをインストールすれば気軽に導入できますので、ぜひお試しください。

WordPressのウィジェット設定方法など、その他のカスタマイズについては、以下の記事も参考になります。

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ!

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか?

  • WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
  • セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
  • WordPressに最適なサーバーの選定や構築から依頼したい…
  • SEO対策や高速化も考慮したサイト構築を行なってほしい…
  • 制作後の保守・運用についてもサポートしてほしい…
  • 今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら 『wp.make』

wp.make資料

全案件WordPressのみ!
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的!

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…


こんな事態になる前に、ぜひ一度、ご相談ください!
WordPressサイトを作るなら、一番WordPressに詳しいところへ!