目次でSEO・SXO対策 Table of Contents Plusの使い方とカスタマイズ

スポンサーリンク

目次作成プラグイン Table of Contents Plus

ブログ記事の目次を見出しタグから自動作成してくれるWordPressプラグイン「Table of Contents Plus」をご紹介します。

ブログ記事に目次を設定しておくと、記事の内容や全体の構成を一目で把握することができます。これはユーザーの利便性を高めるだけでなく、SEOやSXOにも効果的です。

Table of Contents Plus を使えば、初心者でも簡単に目次を設定できます。さらに、CSSをカスタマイズすれば、SXOにも配慮したデザインで目次を作成することができます。

わかりやすい目次の作成は、ブログ記事のSXOを考えるよいきっかけになりますよ。

SEOやSXOに効果的 目次の重要性

ブログ記事に一目で内容がわかる目次を設定することや、わかりやすい見出しを作ることは、ユーザーの利便性を考える上でとても重要です。

先日、ENJILOGさんがブログにこんな記事をアップされてました。ENJIさんは今後のGoogleに向けた記事の作り方として「SXO」と「目次」に注目しています。

検索経由で訪れたユーザーがまず知りたいことは「この記事に探している情報はあるか?」です。検索結果を見て訪れたユーザーは、目当ての情報がなければすぐ離脱します。

そう考えると、見やすさ、わかりやすさに配慮した目次はとても重要だということがわかります。

Googleの検索アルゴリズムは常に進化しています。最近のSEOは機械学習の導入によって、ユーザーの利便性まで考慮されるようになってきました。

これからの検索エンジン対策は、今まで重視されてきた「SEO (Search Engine Optimization) 検索エンジン最適化」だけでなく、ユーザーの利便性を向上させる「SXO (Search Experience Optimization) 検索体験の最適化」まで考える必要があります。

Table of Contents Plus のインストールと設定

WordPressの目次作成用プラグインはいくつかありますが、日本語が使えるメジャーなプラグインといえば、Table of Contents Plus で決まりです。

設定もそれほど難しくないので、初心者でも簡単に目次を設定することができます。

プラグインのインストール

では、さっそくインストールしてみましょう。WordPressのダッシュボードから「プラグイン」→「新規追加 」に進み、「Table of Contents Plus」と検索してください。

あとはインストールして有効化すれば準備は完了です。

Table of Contents Plus インストール

目次の設定方法

続いてTable of Contents Plusの設定です。まずは必要最低限の項目だけ設定して、目次を表示させてみましょう。設定は「インストール済みプラグイン」の「設定」か、ダッシュボードの「設定」→「TOC+」から行います。

最初は以下の設定にしておけばよいでしょう。一番下の「設定を更新」をクリックすると、最初の見出しの前に目次が表示されるようになります。

Table of Contents Plus 設定

このような目次が最初の見出し(H2タグ)の上に追加されます。

Table of Contents Plus 目次

各項目の設定は以下の通りです。

位置: 目次の位置を設定します。通常は「最初の見出しの前(デフォルト)」でよいでしょう。記事の一番最初や見出し後に目次を表示することもできます。

表示条件: 記事内の見出しの数によりますが、今回は3つ以上にしました。適切な数はブログによって違うので、適宜変更してください。

以下のコンテンツタイプを自動挿入: 「post」にチェックを入れると、記事内に目次が表示されます。固定ページにも表示させる場合は「page」にもチェックを入れて下さい。

見出しテキスト: 「目次の上にタイトルを表示」にチェックを入れて、入力欄に好みのタイトルを入れます。

目次が長すぎたり、切り替え表示にする場合は「ユーザーによる目次の表示・非表示を切り替えを許可」にチェックを入れてください。

下の「上級者向け」設定は、目次に表示する見出しレベルを変更したり、除外する見出しを設定する場合などに使用します。通常は変更する必要はありません。

SXOにも配慮 CSSをカスタマイズして見やすい目次に

Table of Contents Plusを使って、とりあえず目次を作成しました。これでも十分使えますが、デフォルトのままだとちょっと見にくいですよね。

Table of Contents Plus 目次

Table of Contents Plusは、CSSをカスタマイズすることで目次のデザインを変更することができます。せっかくなので、SXOにも配慮した見やすい目次を作成しましょう。

デザイン変更後の目次

CSSをカスタマイズして、目次を以下のように変更します。左側のデフォルトよりはるかに見やすく、わかりやすいデザインになったと思います。

Table of Contents Plus CSSカスタマイズ

使用する見出しタグは<H2>と<H3>のみです。これ以上増やすとゴチャついて見にくくなるので絞り込みました。

カスタマイズ後の目次ですが、まず背景色を入れて「記事の目次」を強調し、目次内の見出しに適度な余白を作って見やすくしました。

大見出し(H2)は文字を太くして目立つように、中見出し(H3)はナンバリングを止めて、新たにFont Awesomeのwebフォントでアイコンを作り、下部に点線を入れました。

記事になじむように、リンクの色も黒に変更しています。

目次カスタマイズ用CSS

カスタマイズ用CSSは以下の通りです。ブログテーマのstyle.cssにそのまま貼り付けてみてください。ブラウザキャッシュ等でCSSがすぐ反映されない場合は、「Ctrl + F5」でリロードしてください。

なお、いわしブログのテーマはSimplicityを使っています。CSSのコードに説明を入れているので、デザインを変更する場合や、CSSが反映されない場合は各自で修正してください。

CSSの検証は、該当ページ上で右クリック→「検証(chrome)」か「要素を検証(firefox)」で行えます。

/* Table of content plus 子テーマ用のスタイル */
#toc_container {
	margin: 20px auto; /* 目次全体の中寄せと上下余白 */
}

#toc_container p.toc_title{
	padding:5px !important; /* タイトル背景幅を太く */
}

#toc_container ul li{
	padding:10px; /* 見出しの余白 */
}

span.toc_number.toc_depth_2 {
	display: none; /* 中見出しのナンバリング停止 */
}

#toc_container ul ul li:before{
        content: "\f04b"; /* 中見出しのwebアイコン */
	font-family: FontAwesome;
}

#toc_container .toc_title {
	background: #ccc; /* 「記事の目次」背景色 */
}
	
	#toc_container ul a {
	color:#000; /* 見出し部分のリンク色 */
	border-bottom: 1px dotted #ccc; /* 中見出しの下部点線 */
}

#toc_container .toc_list > li > a {
	font-weight:bold; /* 大見出しの太字 */
	border-bottom:none; /* 大見出しの点線を消す */
}

目次を意識してわかりやすい記事を作ろう

ブログ記事は、目次を意識しながら作成すると内容がわかりやすくなります。

いわしは記事内でほとんど中見出しの<H3>タグを使わないのですが、今回は大見出しの<H2>だけでなく、中見出しも意識しながら記事を作成しました。

その結果、以前よりもわかりやすい記事になったと思っています。

これからのSEOは、小手先のテクニックだけでなく、ユーザーの利便性を向上させるSXOにも配慮する必要があります。

目次を意識して記事を作成することは、SXOの向上にも大いに役立つでしょう。

今までは目次がなかったので見出しも適当でしたが、これを機に過去記事を見直して、わかりやすい見出しと目次に変更していきます。

スポンサーリンク
PC用
PC用

フォローする