【目次自動生成】ブログ記事の目次で離脱を減らす作り方と表示ルール

「目次があるのに離脱率が高くて、なんで？」という経験はありませんか。目次を表示するだけでは意味がなく、場所・見出しの書き方・個数まで調整して初めて効果が出ます。私は目次の表示位置と見出しのテキストを変えるだけで、コンテンツのスクロール率が2割ほど上がったのを実感しました。この記事では、その具体的な設計を解説します。

この記事で分かること：

• 目次がうまく効く位置と表示ルール
• 見出しの書き方がクリック率に与える影響
• 自動生成にするか手動にするかの判断

目次は「最初に出す」より「タイミングを遅らせる」

結論から言うと、目次は記事冒頭にすぐ出すより、導入文を1〜2段落読ませてから出す方が読み手の興味を引く場合が多いです。開いた瞬間にいきなり目次だと「これサイト案内か？」と冷める人もいます。

具体例：私が試した3パターンの結果

• 冒頭0行目に出し続けた時期：スクロール率は低め
• 導入文後に出した時期：本文までたどり着く人が増えた
• 前半で出して後半にも配置した時期：全体の離脱は減ったもののダブり感があった

結局私は「導入文2段落ほど読ませた後」の最初の見出し前に置く形に落ち着きました。

見出しの書き方がクリック率を変える

目次の効き目は見出しのテキスト次第です。「〜について」「〜とは」といったタイトルを並べるより、結果やメリットを匂わせる言葉の方が押されやすくなります。

• 弱い例：SEOについて
• 強い例：SEOで最初にやる3つの改善（やることと数が分かる）

目次の対象はH2中心に

技術的な作り方として、目次にはH2をメインにし、H3は本文の補足として目次に含めないか、含めても深くしない方が読みやすいです。サイトによってはH3まで入れすぎるとスマホで縦長になるため、私はH2＋必要時のみH3の2階層までに絞っています。

自動生成にする？手動にする？

自動生成プラグインの選び方

WordPressなら「Table of Contents Plus」や「Easy Table of Contents」、マークダウン系のSSGならプラグインライブラリで自動生成できます。選ぶ基準は次の3つです。

• 対象を見出しタグ（h2/h3）で出せること
• サイトのデザインに合わせて色・余白を調整できること
• 表示位置とON/OFFを記事ごとに制御できること

私のssg環境では、自動生成プラグインでH2を検出して目次を組み立て、詳細ページの先頭付近に出席させています。

手動で書くケースは少ない

更新頻度の高いブログほど手動で整えるのは老舗の負担になります。ただし記事数が少なく質を極めたい導入期は、手動で見出しを整理してから本文を書く方法も有効です。どちらにせよ「見出しの階層を揃える」ことが前提になります。

スマホで見やすくする3つのポイント

• 目次の項目は1タップで折りたたみできるようにする
• 見出しに出てくる文字数を20字前後に絞る
• 「目次」ラベルとジャンプリンクの見た目を分かりやすくする

まとめ

• 目次は冒頭から出すより、導入文を読ませてから出す方が効果的
• 見出しは「結果や数字を匂わせる」書き方がクリックされやすい
• 目次の対象はH2を中心に、スマホでは2階層までに絞る
• 自動生成ならプラグインの設定で対象・位置・デザインを制御する
• 表示位置と見出し文の書き方でスクロール率は変わるので試行錯誤を