ページに目次は必要?メリットはある?

まずはWordPressサイトに目次は必要なのか、そのメリットをご紹介します。

ページの内容がひと目でわかる

まず目次を設置する大きなメリットとして、そのページの内容がひと目でわかる点が挙げられます。
Googleをはじめとする検索エンジンを利用するユーザーの多くは、疑問や問題点を解決するためにページWebサイトに訪れ、自分の探している情報が含まれているページなのかを重要視してサイトを選別します。
Googleの求めるユーザーファーストの考え方としては、目次がある方がユーザビリティが高いということになります。

目的の内容部分まで記事を飛ばすことができる

特定の情報のみを求めているユーザーが、1万文字以上で書かれているページの全文を読むことは稀です。
目次が設置してあると、その1万文字の中から求めている情報が書いてある部分(見出し)までページを飛ばしてみることができるため、やはりユーザービリティが高まります。
ページの滞在時間が長ければSEOとして評価がいいと言われますが、Googleはそのページで検索を終えたラストクリックも観測していますので、ユーザーの求める情報を素早く提供することもSEOとしてプラスになると考えられます。

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

image1.png

Google検索でページタイトルの下に見出しが表示されていることを目にしたことがある方も多いのではないでしょうか。
これは見出しが設置してあるページだけで表示される検索結果で、ユーザーは自分の求めている情報が書かれている確率が高いと判断し、結果としてCTR(クリック率)が高くなるなどの効果があります。

プラグインを使って目次を作成する方法

では実際に目次を作成する方法を解説していきます。
目次を作成するプラグインは複数ありますが、Table of Contents PlusEasy Table of Contentsが定番のため、この記事ではその2つのプラグインを紹介します。

Table of Contents Plusを使って目次を作成する

Table of Contents Plusは目次を作成するプラグインで、過去記事全てに反映、h2やh3の見出し構造を自動で判定して階層として表示可能なため、多くのユーザーに利用されています。

Table of Contents Plusは現在、WordPressプラグイン検索画面から表示することができませんので、以下のリンクからzipファイルをダウンロードし、解凍せずそのままWordPressにアップロードします。

Table of Contents Plus

image3.png

Table of Contents Plusの設定項目は以下になります。

【位置】
目次を表示する位置を設定します。
特別なこだわりがない限りはデフォルトの「最初の見出しの前」のままで問題ありません。

【表示条件】
「見出しが何個以上で目次を表示する」という設定です。2〜10の間で自由に設定できます。

【以下のコンテンツタイプを自動挿入】
目次を表示させるページのタイプを選択する設定です。
デフォルトではpage(投稿)のみになっていますので、固定ページなどにも目次を表示させる場合には必要に応じてチェックを入れます。

【見出しテキスト
目次の上に表示するテキストを指定する設定です。

【階層表示】
h2やh3を階層として表示する場合にはチェックを入れます。チェックを入れていおくことをおすすめします。

【番号振り】
目次の先頭に番号を表示させる場合にチェックを入れます。

【スムーズ・スクロール効果を有効化】
目次をクリックした際に、該当の見出しまでジャンプではなくスクロールで移動する場合にはチェックを入れます。

【外観】
目次の外観を好みにカスタムできます。

これらの設定が完了したら、該当の記事に自動で目次が表示されます。

Easy Table of Contentsを使って目次を作成する

続いてEasy Table of Contentsを使って目次を表示する方法です。
Easy Table of ContentsはWordPressからダウンロード可能なため、プラグインの検索窓から直接入力してインストール・有効化します。

image2.png

Easy Table of Contentsも設定内容としてはTable of Contents Plusと同様ですが、Table of Contents Plusよりも詳細な設定が可能です。
Easy Table of Contentsは日本語対応しているため、設定は迷わずできるかと思います。
Table of Contents Plusと同様に、自動で該当の記事に目次が表示されますので、個別の設定等は不要です。

プラグインを使わずに目次を作成する方法

続いてプラグインを使用せずに目次を作成する方法を紹介しますが、プラグインの数が多すぎない、もしくはページの表示速度が気になるほど遅くない方はプラグインを利用しての作成をおすすめします。
おすすめできない理由としては、2019年12月現在、この方法ではGoogle検索のタイトルの下に表示されないためです。
また、phpファイルを編集して目次を作成することもできますが、サイト全体の表示が崩れてしまうこともあるため、ここでは省略します。

プラグインを使用せずに目次を作成するには、まず見出しのタグに目次のタグを埋め込み、それをまとめた目次を記事冒頭で設置します。

見出しの装飾等がCSSで固定されているテーマであれば、見出しタグ(h2,h3.h4...)のみでテキストを囲います。
この見出しタグを目次に対応したものに変更すると、目次からその見出しまでジャンプすることが可能になります。
見出しは以下のように記述します。

<h2 id="heading1">見出し1</h2>
<h2 id="heading2">見出し2</h2>
<h2 id="heading3">見出し3</h2>

idで指定している赤字部分(heading1.2.3)は任意で設定可能なので、自身でわかりやすいものにしましょう。

そして目次は以下のように記述します。

<h2>目次</h2>
<ol>
<li><a href="#heading1">見出し1</a></li>
<li><a href="#heading2">見出し2</a></li>
<li><a href="#heading3">見出し3</a></li>
</ol>

青字部分(heading1.2.3)は見出しで設定したものを記述することでアンカーリンクになります。
目次はプラグインを使う方法と同じく、最初の見出しの前に設置がおすすめです。

まとめ

以上がWordPressで目次を作成する3種類の方法です。
ユーザビリティSEO、どちらの観点でも目次を設置するメリットは大きいため、特別な理由がない限りは目次を作成することをおすすめします。
また、初心者のよくある間違いとして、目次をテキストで最初の見出しの前に打ち込んでいることがありますが、目次は各見出しまでページを飛ばすことのできる内部リンクであることが基本ですので、テキストではなくアンカーリンクで作成しましょう。
初めての方には、特別な理由がない限りプラグインを使用しての目次の作成をおすすめします。