目次のSEO効果とは？設置のメリットやHTMLでの作り方も解説

Webサイト上の記事における目次は、主に導入部分に設置され、ユーザーに記事の全体像を知らせる役割を果たします。標準的な機能なため、設置を考える方がほとんどでしょう。

しかし、目次のSEO効果や設置方法を具体的に知らない方も多いのではないでしょうか。

そこで本記事では、目次を設置するメリットを解説します。適切な目次を設置してSEO評価が高いコンテンツを作成したい方は参考にしてみてください。

SEO対策とは？具体的な施策手順や注意点を解説

目次にSEO効果はあるのか

目次を設置することによる、SEOへの直接的な影響はありません。検索結果の上位には目次がないページもあります。

しかし、順位決定に無関係ではありません。目次がなく、どこに何が書かれているのかわからないコンテンツは、ユーザーの離脱を招きます。

反対に、目次でユーザーの関心が高まり滞在時間が増えると、Googleにユーザビリティが高いコンテンツだと認識されます。

目次を設置するメリット3選

SEO効果も含めて目次を設置するメリットを3つ解説します。

• ユーザーの利便性が向上する
• Googleが理解しやすいコンテンツになる
• 検索結果に表示されやすくなる

それぞれ、詳しく見ていきましょう。

ユーザーの利便性が向上する

目次は記事内の見出しの集まりで、リード文の直下に設置することが多いです。目次を見ると記事の全体像がわかるため、ユーザーにとっては記事を熟読するかを判断する材料となります。

また目次をクリックすると、その見出しに飛ぶことができます。利便性が高く、満足のいく内容であれば他の見出しや記事にも興味を持ってもらえるかもしれません。

Googleが理解しやすいコンテンツになる

目次と見出しがリンクでつながっていることで、Googleのクローラーが記事の構造やコンテンツ内容を把握しやすくなります。

そして、クローラーが収集した情報をもとにGoogleに高品質なコンテンツだと判断されると、検索結果の順位が上がります。

検索結果に表示されやすくなる

目次を設置すると、検索結果にもリンクで表示されることがあります。

表示されるには高品質なコンテンツであることが前提で、目次と見出しをHTMLで適切に設定しなければなりません。検索結果に表示される情報が増えるとクリック率が上がるため、目次の設定が正しくできているか確認しましょう。

目次を設置する際の注意点

目次を設定する際に注意したいポイントを3つ解説します。

• 目次がコンテンツ要約になるよう整える
• 目次の見出しにリンクを貼る
• 開閉ボタンを設置する

適切な設定ができていないと、ユーザビリティとGoogleからの評価が低下する恐れがあります。それぞれ、詳しく見ていきましょう。

目次がコンテンツ要約になるよう整える

目次を読んで、コンテンツの内容を簡潔に把握できるかどうかを意識しましょう。コンテンツを要約するコツは、以下の3点です。

• 見出しのタイトルは簡潔にわかりやすくする
• 見出しと内容を一致させる
• 見出しは論理的な順序で展開す

見出しが長すぎてわかりにくかったり、順番に違和感があったりすると、Googleからもユーザーからも論理的でないコンテンツと認識されます。

また、見出しと内容に齟齬があると興味を持ったユーザーの期待を裏切ることにもなります。内容を反映させた見出しを付けましょう。

目次の見出しにリンクを貼る

記事全部ではなく、特定の見出しだけが読みたいユーザーもいるでしょう。

そのようなとき、目次にリンクが設定されておらず見出しに飛べないのは不便です。読みたい見出しまで記事をスクロールしなければならず、ユーザーが離脱する恐れがあります。

開閉ボタンを設置する

目次の一部を隠す開閉ボタンの設置も、ユーザビリティ向上に役立ちます。

例えば、商品やサービスを10種類紹介する記事など、見出しが多いと目次も長くなります。読み進めるユーザーの邪魔にならないよう、開閉ボタンを設置しましょう。

目次を設置する方法3選

目次を設定するには具体的にどうすればよいのでしょうか。ここでは主な方法を3つ紹介します。

• プラグイン
• テーマ
• HTMLタグ

ご自身の状況に合った方法で設定してみてください。

プラグイン

簡単なのは、WordPressのプラグインを使って目次を自動生成する方法です。

おすすめなのは「Table of Contents Plus」というプラグインです。目次をリンク付きで自動表示することが可能で、管理画面で表示条件などの設定ができます。

コンテンツ内の目次を設置したい箇所で専用コードを入力すると、手動での設置も可能です。

テーマ

目的が目次設置だけではなく、全体的に凝ったデザインのブログやサイトを簡単に作りたい場合はテーマの導入がおすすめです。主なテーマは下記のとおりです。

• Cocoon（無料）
• SWELL（17,600円）
• JIN：R（19,800円）　など

テーマを使うと、HTMLの記述をせずに目次が設置できるのはもちろん、画像挿入や囲み枠の設置といった記事の装飾も簡単に行えます。

それぞれのテーマの特徴を吟味して利用しましょう。

HTMLタグ

プラグインやテーマを利用しない場合は、自分でHTMLを記述する必要があります。

箇条書きリストで目次を作り、リンクタグで目次と見出しをリンク化するという流れです。

HTMLでの目次の作り方

HTMLタグで目次を作る方法を順番に説明します。

1. HTMLタグで目次を設定する
2. CSSで目次デザインを設定する

それぞれ、詳しく見ていきましょう。

HTMLタグで目次を設定する

目次の構造を作る

まず、ulもしくはolタグとliタグで箇条書きリストを作ります。ulタグは番号なしの箇条書き、olタグは番号付きの箇条書きです。状況に応じて使い分けましょう。

例えば、以下の見出しの目次を作るとします。

ulタグとliタグを以下のように配置して、目次の構造を作りましょう。

見出しの階層を再現する

続いて、リストの中にさらにリストを作ることで、見出しの階層を再現します。中見出しH3が大見出しH2の中にあるとわかるようにするためです。

以下のように、H3見出しを新たなリストタグで囲みます。

目次をリンク化する

最後に、目次をクリックして見出しに直接飛べるようにリンクを設定します。まず、aタグを使って本文中の各見出しに任意のidを設定します。

それぞれに異なるidを設定しなければなりません。

次に、目次にリンクを貼ります。以下のように、文字列をaタグで囲み、href属性を”#id名”で指定しましょう。

これを、目次の全ての見出しに設定します。目次と本文中の各見出しのidが一致するように気を付けましょう。

以上で目次設置の作業は完了です。

CSSで目次デザインを設定する

目次を装飾して目立たせたい場合は、CSSでデザインを指定しましょう。

まず、デザインを適用する目次を<div></div>で囲み、classに任意の名前を付けて指定します。classの名前をlist_designとした場合、以下のような記述になります。

続いて、CSSファイルで以下のように{}内でデザインを指定していきます。

背景色はbackground、文字色はcolor、フォントサイズはfont-sizeなど、指定できるプロパティにはさまざまな種類があります。

まとめ：目次を設置してユーザビリティを高めよう

目次を設置することによる、検索結果の表示順位に直接的な影響はありません。

しかし、コンテンツを簡潔に要約した適切な目次があることでユーザビリティが向上し、間接的にSEO対策ができるのです。目次はHTMLタグでも設定できますが、ツールを使って簡単に自動生成することも可能です。

ぜひユーザーファーストのわかりやすいサイトを作成して、集客活動に活かしてください。

弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。