ブログ記事に目次は必要？書き方のポイントや設定方法を詳しく解説

ブログを運営していると、記事に目次は必要なのか疑問に思う方もいるのではないでしょうか。結論から言うと、ブログ記事には目次を設定する方が良いでしょう。ブログ記事に目次があるとユーザーの利便性が高まり、アクセスが増えるなどの好循環が生まれる可能性があります。

本記事では、目次がSEOにも好影響がある理由や、目次の設定の仕方などを詳しく解説します。目次の書き方のコツもご紹介しますので、ぜひ参考にしてください。

ブログに目次が必要な理由とは？

ブログの目次とは、記事に書かれている内容を見出し順にリスト化したものです。見出しをクリックすると記事内の該当箇所に遷移するようにリンクを設定しておけば、ユーザーは目的のテキストに素早く移動できます。

記事の冒頭に目次があると、ユーザーは効率的に目的の内容を知ることができ利便性が向上するはずです。また、アクセスが増えて滞在時間が長くなることも大きなメリットといえます。目次がいらないブログもありますが、基本的にはSEO対策の一つとしてブログ記事には目次を設定しておきましょう。

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

ブログに目次があると、ユーザーはブログにどのようなことが書かれているのかを一覧で知ることができます。ユーザーが知りたい情報にアクセスしやすくなるため、抱えていた疑問や課題を解決しやすくなるでしょう。

目次がないと、自分に必要な情報の有無を見極めるためにブログ記事すべてに目を通さなければなりません。探す手間が掛かるためユーザーにとってはストレスになりますが、目次を設定しておけば効率的に必要な情報にアクセスできるため、ユーザーの利便性が向上します。

アクセス数や滞在時間の改善につながる

ブログに目次を設定するときにページ内のリンクを張ると、検索結果に見出し内容が表示される可能性もあります。これは記事が検索結果で上位に入った場合ですが、ユーザーが検索した際にすぐに表示されるのは大きなメリットです。検索結果に表示された見出しにユーザーが求める情報があると分かれば、アクセスの増加につながります。

また、ブログを訪れたユーザーは目次のリンクから知りたい部分に直接アクセスできるため、内容をじっくりと読み込む可能性も高まり、ページの滞在時間もおのずと長くなるでしょう。

SEO対策になる

目次を設置し各見出しへのリンク設定もしていると、検索エンジンからはユーザーファーストで質の高いコンテンツと評価されやすくなります。Googleではユーザーの利便性や満足度も評価項目の一つにあるため、目次の設置はSEOの観点からもおすすめです。

目次がありユーザーが利用しやすいと、検索エンジンはユーザビリティの高いブログと評価し、検索順位にも好影響が期待できます。コンテンツをよりアピールするために、ぜひ目次を設置しておきましょう。

ブログの内容によっては目次が不要な場合も

一般的なブログには目次を設定する方が良いのですが、なかには設定が不要な記事もあります。例えば、文章の量が少ない記事の場合は、目次の項目も少なくなってしまうため特に必要ありません。日付を追って閲覧できる日記ブログなども、見出しを設定しなくても問題ない記事です。

また、ページに一つだけイラストを載せている場合や、ハンドメイド作品の紹介のために画像を中心としているブログも、基本的に目次は不要です。運営しているブログの目的に応じて、目次が必要なのかを改めて確認しておきましょう。

ブログに目次を設定するときのポイント

目次を設定するといっても、ユーザーにブログの内容を簡潔に伝えるためにいくつかのポイントを押さえておく必要があります。
まず、ユーザーがすぐにブログの内容が分かるよう、目次の長さを適切にすることが大切です。目次には折りたたみ機能もありますが、設置するときには開いておくと訪れたユーザーは一目で主な内容が分かります。

また、SEO対策として見出しに検索キーワードを含めることも大切です。このような意識すべきポイントを次に解説しますので、ぜひ取り入れていきましょう。

適切な長さで要点を伝える

ブログの目次に反映される見出しは、コンテンツの要点を適切な長さの見出しで伝えることが大切です。見出しの文字数が長過ぎると、初めて訪れたユーザーがブログの内容を理解するまでに時間が掛かってしまいます。そのため、長くても1行に収まる長さにするようにしましょう。

ただし、見出しが短過ぎてブログの内容がすぐにユーザーに伝わらないのも困ります。改行されないくらいの適切な長さで、ブログの要点をうまくついたシンプルな見出しにすると良いでしょう。

目次を開いておく

目次には、デフォルトで「閉じる」設定にすると折りたたみできる機能もあります。ただし、基本的には目次を開いておく方がユーザーの目に留まりやすくなります。目次が閉じていると、初めて閲覧するユーザーに気付かれず活用されない可能性もあるためです。

工夫して設置された目次はユーザーにとって利便性が高いので、十分活用されるように初めから開いておきましょう。

また、表示する目次の項目が多過ぎると読みにくいため、目次に表示される見出しは「h2」まはた「h3」までにするのがおすすめです。見出しや文字の量が多い記事は、スマートフォンで見たときに目次だけで画面が埋まってしまう可能性があります。ユーザーはスクロールしなければならず、かえって邪魔になる場合もあります。

目次はブログ記事の長さに合わせて開閉の設定を調整すると良いでしょう。

SEOを意識した見出しにする

ブログの見出しは、SEOを意識して作ると検索で上位表示されやすくなります。SEOを意識した見出しのポイントは以下のとおりです。

• 文字数のポイント

見出しの文字数は全角で20文字までにする

• hタグのポイント

hタグ内に検索キーワードを入れるが、多過ぎないようにする

hタグの前半3分の1に検索キーワードを入れる

hタグが多過ぎないように気を付ける

• 見出しのポイント

見出しを見るだけで記事の概要が分かるようにする

見出しを意味するhタグには重要度に応じて1から6まであり、HTMLで記載される要素です。大見出しから小見出しまでの構造を表し、Googleの評価対象にもなっています。そのため、hタグ関連のポイントにも配慮することが大切です。

ブログに目次を設定する方法

運営している自分のブログに目次がない場合は、新たに追加することも可能です。目次を設定するには、大きく分けるとワードプレスで作る方法とHTMLを使って直接記載する方法があります。

ワードプレスで目次を追加するのは比較的簡単なので、手順に沿って操作すれば設定できるでしょう。また、目次を自動生成できるプラグインを使うことや、テーマの変更が必要になる点についてもご紹介します。どれも大切な手順なので理解しておくことをおすすめします。

ワードプレスのブログで目次を作る

ワードプレスを使っているなら、目次作成プラグインを使うと簡単に目次を追加できます。プラグインはワードプレスの機能を拡張するもので、さまざまな機能を追加できるプログラムです。

プラグインには多くの種類があるため、どれにすれば良いか迷うかもしれません。おすすめのプラグインは、「Table of Contents Plus」「Easy Table of Contents」です。それぞれの特徴や使い方の例を説明します。

目次を作成できるプラグインを使う

目次を自動で設置してくれるプラグインは、技術的な知識がなくても短時間で簡単に作れます。無料で使えるプラグインの種類は多いため、できるだけ使いやすいものを選ぶと良いでしょう。

おすすめのプラグインは、「Table of Contents Plus」と「Easy Table of Contents」です。「Table of Contents Plus」は特に使い方が簡単なので、手軽に目次を設定したい方に向いています。こだわりの設定もできる「Easy Table of Contents」は、簡単な機能では物足りない方におすすめです。

プラグインを使って目次を作る例として、「Table of Contents Plus」の設定方法をご紹介します。

• ダッシュボードからプラグインを新規追加する
• プラグイン「Table of Contents Plus」をインストールし有効化する
• 設定を選択してから目次を設定し位置を決める
• 目次の表示条件と自動挿入のコンテンツを選択する
• 目次の上のタイトルとユーザーによる目次の表示切り替えを設定する
• ユーザーが見やすくなるよう階層表示と番号振りを設定する
• 外観を選択し文字の大きさや目次の幅などを整える
• 保存をクリックすれば完了

目次機能がついたテーマに変更する

ワードプレスで現在使っているテーマ（全体のテンプレート）に目次機能がない場合は、高機能なテーマに変更して目次を設定する方法もあります。目次機能があるおすすめのテーマは「SWELL」と「Cocoon」です。

SWELLには、目次の位置を最初のh2タグの前に設定するなどの自動生成機能が備わっています。カスタマイザーで好みのデザインの目次を選ぶことも可能です。Cocoonでは、見出しにh2～h6が設定されていると目次が自動生成されます。すでにある目次は削除するか、必要でなければ自動生成機能を使わない設定にしましょう。

ただし、テーマを変更した際にはサイトの構造が大きく変わることには注意が必要です。テーマの変更時には、ページのレイアウトや細かな部分の設定を見直さなければなりません。そのため、使う予定のテーマについてどのような機能があるのかを事前によく確認しておくと安心です。記事がきれいに表示されているのかをチェックし、問題があれば配置を修正するなどの処置を行いましょう。

HTMLで記載する

ワードプレスを使っていないブログでは、プラットフォームに目次機能が追加できないこともあります。この場合は、HTMLを直接入力することで目次の追加が可能です。

HTMLを記載し目次を設定するには、例えば目次をリストタグ（ol、li）とアンカータグ（a）でマークアップする方法があります。見出しのhタグにアンカーをつけてから、見出しへのリンク（アンカーリンク）を並べるのが主な手順です。

以下にHTMLを使って目次を作成するときのHTMLタグの見本をご紹介します。見出しの数に応じてHTMLタグを増やせば良いので、基本の作り方を確認しておきましょう。

【5つの見出しがある目次を作成する場合のHTMLタグ】

1. 各見出しのhタグにアンカーをつける

<h2 id=”bl-01″>見出し01</h2>

<p>本文</p>

<h2 id=”bl-02″>見出し02</h2>

<p>本文</p>

<h2 id=”bl-03″>見出し03</h2>

<p>本文</p>

<h2 id=”bl-04″>見出し04</h2>

<p>本文</p>

<h2 id=”bl-05″>見出し05</h2>

<p>本文</p>

2. 各見出しへのページ内リンク（アンカーリンク）を並べる

<a href=”#bl-01″>見出し1</a>

<a href=”#bl-02″>見出し2</a>

<a href=”#bl-03″>見出し3</a>

<a href=”#bl-04″>見出し4</a>

<a href=”#bl-05″>見出し5</a>

HTMLで目次を設定する場合は、見出しへのリンクが正しく動作するかを公開前に確認しましょう。

ブログに目次は必要！さっそく追加しよう

ブログに目次があると、訪れたユーザーの利便性が高まり、引いてはSEO対策にもなるため設置するのがおすすめです。ワードプレスを使っている場合は、目次作成機能があるプラグインを使えば比較的簡単に作成できます。ワードプレスを使わずに目次を作るには、ページのHTMLに手動でタグを追加すれば作成可能です。

まだブログに目次を設定していない方は、ユーザービリティの向上や検索順位の改善のために本記事でご紹介したポイントなどを参考に追加してみましょう。

老舗SEO会社のジオコードでは、さまざまなSEO施策を請け負っております。

もちろん、ワードプレスによる目次設定も行えるため、丁寧なSEO施策をしたいとお考えの方は、ぜひ一度ジオコードにご相談ください。