![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/d81680c2b4e843758e46e6ad64e4afbe/Group%20599.png?w=1200&fm=webp)
SEO
更新日: 2024/6/2
目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説
![character_balloon](/media/character/yellow_question_left.png)
ブルーちゃん、SEOに強いサイトを作りたいんだけど、目次って必要かな?
そうだね。目次はSEOに直接効果があるわけではないけど、あった方がいいよ~。
![character_balloon](/media/character/blue_normal_right.png)
ユーザーが使いやすくなるから離脱率も下がるし。
![character_balloon](/media/character/blue_question_right.png)
間接的には、SEO効果もあると言われているよ。
![character_balloon](/media/character/blue_smile_right.png)
![character_balloon](/media/character/yellow_smile_left.png)
そうなんだ!もっと詳しく教えてもらえる?
もちろん~。設置方法も紹介するね。
![character_balloon](/media/character/blue_confidence_right.png)
目次
- 1. 目次を設定するメリットは?4つ紹介!
- 1-1. メリット1.クローラーが内容を把握しやすくなる
- 1-2. メリット2.ユーザビリティが向上する
- 1-3. メリット3.需要を把握しやすい
- 1-4. メリット4.検索結果に表示される可能性がある
- 2. 目次の設置方法は3通りある!
- 2-1. 目次の設置方法1.プラグイン
- 2-2. 目次の設置方法2.WordPressのテーマ
- 2-3. 目次の設置方法3.HTML
- 3. 目次を入れるHTMLタグの例を紹介!
- 4. おしゃれな目次を作るならCSSの併用がおすすめ!
- 5. 目次設置における3つのポイントは?
- 5-1. ポイント1.見出しにリンクを貼る
- 5-2. ポイント2.記事の概要が把握できるようにする
- 5-3. ポイント3.開閉ボタンがあると便利
- 6. まとめ
目次を設定するメリットは?4つ紹介!
![character_balloon](/media/character/blue_normal_left.png)
最初にも言ったけど、目次はSEOに直接影響するわけではないよ。
上位表示されているけど目次がない、ってサイトもあるもんね。
![character_balloon](/media/character/yellow_sigh_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
でもユーザー・運営者双方にメリットはあって、間接的にSEO効果が期待できるんだ。
![character_balloon](/media/character/blue_down_left.png)
ここでは4つのメリットを紹介するね。
1.クローラーが内容を把握しやすくなる
2.ユーザビリティが向上する
3.需要を把握しやすい
4.検索結果に表示される可能性がある
メリット1.クローラーが内容を把握しやすくなる
![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説の画像_4枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/612fdc9020f646fdb52313b38bcedb19/%E3%83%A1%E3%83%AA%E3%83%83%E3%83%881.png?w=1200&fm=webp)
「クローラー」ってWebサイト上の情報を集めている自動プログラムだよね。
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
そうそう、目次を設置することでクローラーが内容をスムーズに理解できるようになるよ。
![character_balloon](/media/character/blue_happy_left.png)
そして高品質なページだと判断されれば検索結果の上位にあがるから、そういう意味ではSEO対策に効果があるとも言えるんだ。
さっき「間接的に効果がある」と言っていたのは、そういうことだったんだね!
![character_balloon](/media/character/yellow_inspiration_right.png)
メリット2.ユーザビリティが向上する
![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/658422197e9b4bc4bdad42bd5f68e527/%E3%83%A1%E3%83%AA%E3%83%83%E3%83%882.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_question_left.png)
イエローちゃんは目次があるサイトとないサイトなら、どっちを見たいと思う?
うーん、欲しい情報をすぐに探せる「目次あり」の方かな。
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_up_left.png)
だよね。インターネットは本と違って、最初から最後まで読むというよりも必要な情報だけを見たいという傾向があるよ。
![character_balloon](/media/character/blue_smile_left.png)
だから目次で知りたいことがわかるかをすぐに確かめられた方が、ユーザーにとってストレスになりにくいよね。
確かに!目次がないとずっとスクロールしていかないといけないから嫌になっちゃうんだよね……。
![character_balloon](/media/character/yellow_sigh_right.png)
![character_balloon](/media/character/blue_happy_left.png)
さらに、目次にリンクを付けておいてジャンプするようにしておけば、さらに快適にサイトを利用してもらえるよ。
便利だと思ってもらえたら、リピートにもつながりそうだね!
![character_balloon](/media/character/yellow_confidence_right.png)
メリット3.需要を把握しやすい
![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/46bcfb2e14e6462ca39c0a0755e5952d/%E3%83%A1%E3%83%AA%E3%83%83%E3%83%883.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップを使えば、どの項目に需要が集まっているかがわかりやすくなるよ。
ヒートマップって何?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_smile_left.png)
ヒートマップはユーザーがサイト上で行なった動作を調査できるツールで、よく読まれている箇所を色で示してくれたり、離脱した場所をパーセンテージと図形で表してくれたりする機能があるんだ。
![character_balloon](/media/character/blue_up_left.png)
そして目次で使えるのは、クリックされている場所を可視化してくれる機能。
![character_balloon](/media/character/blue_question_left.png)
クリックされていないけど本文は読まれているようなら見出しが悪いのかな? とか、本文も読まれていないならそのトピック自体が不要かも? という分析ができるね。
記事全体の改善に役立てることもできるんだね!
![character_balloon](/media/character/yellow_inspiration_right.png)
メリット4.検索結果に表示される可能性がある
![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/182fa67152f74e839bb2afa7c1e526ef/%E3%83%A1%E3%83%AA%E3%83%83%E3%83%884.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
高品質なページだと認めらえた上でのことだけど、リンク付きの目次を作っておくことで検索結果にその一部を載せてもらえることがあるよ。
サイトに入らなくても何が書いてあるか把握しやすいのは嬉しいよね!
![character_balloon](/media/character/yellow_smile_right.png)
![character_balloon](/media/character/blue_happy_left.png)
ユーザーにとってはいちいちサイトに入らなくても欲しい情報を一発で見つけられるし、運営者にとってもユーザーが訪問してくれるチャンスになるよ。
双方にとって嬉しいメリットと言えるね。
![character_balloon](/media/character/yellow_confidence_right.png)
目次の設置方法は3通りある!
目次は絶対に設置しよう……でも、どうやればいいの?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_down_left.png)
目次の設置には次の3つが基本だよ~。
1.プラグイン
2.WordPressのテーマ
3.HTML
目次の設置方法1.プラグイン
プラグイン、つまり拡張機能のことだね!
![character_balloon](/media/character/yellow_confidence_right.png)
![character_balloon](/media/character/blue_happy_left.png)
そう。特別な知識がなくても、インストールすれば設置できるから簡単なんだ。
![character_balloon](/media/character/blue_normal_left.png)
WordPressなら、「Table of Contents Plus」というのがよく話題に上がっているよ。
目次の設置方法2.WordPressのテーマ
![character_balloon](/media/character/blue_up_left.png)
最初から目次を自動で作ってくれる機能付きのテーマを選ぶのもおすすめだよ。
これならインストールする手間も省けるね!
![character_balloon](/media/character/yellow_smile_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
テーマ選択は目次だけでなくサイト全体の雰囲気を左右するから、それも加味して検討するようにしてね。
目次の設置方法3.HTML
![character_balloon](/media/character/blue_normal_left.png)
今回紹介する中で、1番自分の好きなように目次を作れるよ。
HTMLって自分でタグを入力するんだよね……ちょっとハードル高いかも。
![character_balloon](/media/character/yellow_sad_right.png)
![character_balloon](/media/character/blue_up_left.png)
確かに慣れるまでは大変だけど、HTMLで作ったサイトは構成がシンプルだから読み込みが速くなるし、クローラーが内容を読み取りやすくなるからSEO対策にも向いているんだよ~。
![character_balloon](/media/character/blue_down_left.png)
HTMLでリンク付きの目次を作るときは、ol(ul)タグ、liタグ、aタグの3つを組み合わせてこんな感じで作るよ。
目次を入れるHTMLタグの例を紹介!
<ol> <li><a href="#">目次を設定するメリット</a></li> <li><a href="#">目次の設置方法は3通り</a></li> <li><a href="#">おしゃれな目次はCSSがおすすめ!</a></li> </ol>
「href」って何?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_up_left.png)
これはタグに設定を付けられる「属性」の1つで、hrefはリンク先を指定する効果があるよ。
難しそうだなあ……。
![character_balloon](/media/character/yellow_panic_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
1つずつ着実に押さえていけば大丈夫だから、とりあえず今日は上の図を覚えて帰ってね。
おしゃれな目次を作るならCSSの併用がおすすめ!
![character_balloon](/media/character/blue_normal_left.png)
HTMLを使う場合、CSSを併用するともっとおしゃれな目次が作れるよ。
CSSってなに?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_smile_left.png)
CSSはWebページの文字サイズや色などを変濾したり装飾を加えたりできるプログラミング言語だよ。
![character_balloon](/media/character/blue_happy_left.png)
HTMLファイルにそのまま埋め込むこともできるけど、別でファイルを作っておけば他の記事にも適用できて便利だよ~。
HTMLとは別にコードを書くってこと……?
![character_balloon](/media/character/yellow_painful_right.png)
![character_balloon](/media/character/blue_panic_left.png)
いっぺんにやろうとしなくても大丈夫だよ、イエローちゃん!
![character_balloon](/media/character/blue_normal_left.png)
でも目次に限らずサイト全体を装飾するのに役立つから、HTMLで作成する場合はこっちも追々習得していくのがおすすめかな。
目次設置における3つのポイントは?
目次を作るときに気を付けるべきことってある?
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_down_left.png)
ポイントはいくつかあるけど、特に意識してほしいのは次の3つかな~。
1.見出しにリンクを貼る
2.記事の概要が把握できるようにする
3.開閉ボタンがあると便利
ポイント1.見出しにリンクを貼る
![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説の画像_26枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/2ea34829ab764a2cb58e87e35dd95685/%E3%83%9B%E3%82%9A%E3%82%A4%E3%83%B3%E3%83%881.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_sad_left.png)
目次があってもリンクに飛べないと、便利さとしては物足りないよね。
見たい情報が下の方にあると結局延々とスクロールしないといけないから、ちょっとストレスかも。
![character_balloon](/media/character/yellow_sigh_right.png)
![character_balloon](/media/character/blue_normal_left.png)
当たり前だけど、見出しは本文に則したものにして、目次と本文で一言一句違わないようにしてね。
![character_balloon](/media/character/blue_angry_left.png)
目次から飛んだ先が違う見出しだと不信感を抱いちゃうし、さらに本文の内容が見出しとズレていたら、次からそのサイトに行きたくなくなっちゃうよ。
ポイント2.記事の概要が把握できるようにする
![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説の画像_28枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/245368ccaf074be4878710957e459868/%E3%83%9B%E3%82%9A%E3%82%A4%E3%83%B3%E3%83%882.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_up_left.png)
目次をザっと見て、その記事が何について言及しているかを把握できるのが理想だよ。
どうすれば把握しやすくなるのかな?
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_smile_left.png)
例えば、その記事で伝えたいことが論理的な順番で並んでいるかどうか。
![character_balloon](/media/character/blue_question_left.png)
基本的に文章は「主張→理由→事実」の順が良いとされているけど、いきなり事実の話をされても「何の話?」ってなっちゃうよね。
![character_balloon](/media/character/blue_sigh_left.png)
もっと極端に言うと、いきなり「まとめ」から始まっているのは論理的とは言えないね。
なるほど、違和感を持たせない構成にするのが大事なんだね!
![character_balloon](/media/character/yellow_confidence_right.png)
![character_balloon](/media/character/blue_up_left.png)
そういうこと。論理的でない構成はユーザーが見づらくなるのはもちろん、クローラーがチェックしたときに評価を下げてしまう恐れもあるから、よく考えて作ろうね。
ポイント3.開閉ボタンがあると便利
![目次とは?SEO効果やユーザーへのメリット、3つの設置方法を解説の画像_30枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/55d530a1762d4a659b38f43377239f2a/%E3%83%9B%E3%82%9A%E3%82%A4%E3%83%B3%E3%83%883.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_question_left.png)
その記事のボリュームが大きいと見出しが増えるから、必然的に目次も長くなるよね。
前に見たサイトがまさにそれで、目次で画面がいっぱいになっちゃっていたよ。
![character_balloon](/media/character/yellow_sigh_right.png)
![character_balloon](/media/character/blue_angry_left.png)
目次を確認して読みたいところだけを見るような人なら気にならないかもしれないけど、最初から全部読もうとしている人はスクロールが煩わしくなっちゃうよね。
![character_balloon](/media/character/blue_up_left.png)
そんなときは、開閉ボタンを付けるのがおすすめ。
デフォルトは閉じるようにしておいて、見たい人だけクリックすればいいってことだね!
![character_balloon](/media/character/yellow_smile_right.png)
![character_balloon](/media/character/blue_happy_left.png)
どんな人にとっても使いやすいサイトにするために、こういった工夫を大事にしていこうね~。
![character_balloon](/media/character/blue_down_left.png)
目次についてまとめると、こんな感じだよ。
まとめ
◆ユーザビリティの向上、SEO対策への間接的な効果が期待できる
◆目次を作る方法は、プラグイン・WordPressのテーマ・HTMLの3つ
◆リンクや開閉ボタンを付けてユーザーが使いやすいような工夫をする
本文の内容ばかりを気にしていたけど、目次にも気を配らないといけないんだね。
![character_balloon](/media/character/yellow_normal_right.png)
ブルーちゃん、今日は教えてくれてありがとう!
![character_balloon](/media/character/yellow_happy_right.png)
![character_balloon](/media/character/blue_smile_left.png)
どういたしまして!またいつでも聞いてよ~。
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。