MENU

SWELLの目次を自動設定・カスタマイズする方法|SEOと読みやすさを両立するTips

SWELLの目次を自動設定・カスタマイズする方法|SEOと読みやすさを両立するTips

ブログ記事が長くなるほど、読者はどこに何が書いてあるかわからなくなりがちです。そこで役立つのが「目次(もくじ)」です。SWELLには目次を自動生成する機能が標準搭載されており、別途プラグインをインストールしなくても手軽に設置できます。本記事では、SWELLの目次機能の基本設定からデザインカスタマイズ、SEOへの活かし方まで、初心者にもわかりやすく解説します。

目次

SWELLの目次機能とは?自動生成の仕組みを解説

SWELLでは、記事内のH2・H3見出しタグを自動的に検出し、記事の冒頭付近に目次として一覧表示する機能が備わっています。「Table of Contents Plus」などの専用プラグインを導入しなくても、SWELL標準機能だけで目次を設置できる点が大きなメリットです。

目次があることで、読者は記事全体の構成をひと目で把握できます。また、読みたいセクションに直接ジャンプできるため、ユーザー体験(UX)が向上します。さらに、Googleが検索結果に「ジャンプリンク」として目次項目を表示するケースもあり、クリック率(CTR)アップにつながる可能性もあります。

目次の基本設定|表示・非表示と位置の変更方法

SWELLの目次設定は、WordPress管理画面の「SWELL設定」→「投稿・固定ページ」→「目次」から行います。

サイト全体の目次表示設定

デフォルトでは目次が表示される設定になっていますが、以下の項目で細かく調整できます。

  • 目次の表示条件:H2が2つ以上ある場合のみ表示するなど、最低見出し数を指定できます
  • 目次の表示位置:最初の見出しの直前に表示(推奨)または記事冒頭に表示を選べます
  • 最初は閉じた状態にする:モバイル表示で特に有効なオプションで、画面の圧迫を防げます

個別記事での目次制御

記事ごとに目次の表示・非表示を切り替えることもできます。Gutenbergエディターの右サイドバー「投稿」タブ内に「目次を表示しない」チェックボックスがあります。短い記事や目次が不要なページはここでオフにしましょう。

目次のデザインをカスタマイズする方法

SWELLでは目次のデザインも柔軟にカスタマイズできます。主な設定項目を確認しましょう。

目次タイトルの変更

SWELL設定の目次セクションで「目次のタイトル」を自由に変更できます。デフォルトは「目次」ですが、「この記事でわかること」「もくじ」など、サイトのトーンに合わせて変更してみましょう。

表示する見出しレベルの選択

H2だけを表示するか、H3まで含めるかを選べます。記事が長くH3が多い場合は、H2のみ表示にするとスッキリ見えます。逆に詳細な構成を見せたい解説記事ではH3まで表示するとよいでしょう。

番号付きリストにする

目次の項目を番号付き(1, 2, 3…)で表示するか、番号なしにするかを選択できます。ハウツー記事やステップごとの解説記事には番号付きが読みやすくておすすめです。

デザインスタイルの選択

SWELLの目次にはいくつかのスタイルが用意されています。「シンプル」「ボーダー」「塗りつぶし」などからサイト全体のデザインに合ったものを選んでください。SWELLのグローバルカラーと連動しているため、メインカラーと統一感のある目次が自動で生成されます。

目次をSEOに活かすポイント

目次はユーザビリティだけでなく、SEO対策としても重要な役割を果たします。

Googleのジャンプリンクを狙う

Googleは検索結果のページタイトル下に、記事内の目次項目を「ジャンプリンク」として表示することがあります。ユーザーが検索結果から直接読みたいセクションに飛べるため、クリック率が大きく改善する効果があります。ジャンプリンクが表示されやすくするには、H2見出しにキーワードを含め、ユーザーの疑問に直接答える構成を意識しましょう。

H2見出しにキーワードを入れる

目次に表示されるH2見出しは、Googleのクローラーが記事の構造を理解するうえで重要なシグナルです。「○○とは」「○○の方法」「○○のメリット・デメリット」など、検索意図に沿った見出しを意識して作るとSEO効果が高まります。

目次の見出し数は3〜5個が理想

目次が長すぎると読者が圧倒されてしまいます。H2は3〜5個程度に絞り、必要に応じてH3で補足するのが読みやすい構成の基本です。目次がコンパクトなほど、ジャンプリンクとして表示される可能性も高まります。

よくある疑問とトラブル解決

目次が表示されない場合の確認ポイント

SWELLで目次が表示されない場合は、次の点を確認してください。

  • H2見出しが設定した最低件数(デフォルトは2個以上)に達しているか
  • 個別記事の設定で「目次を表示しない」にチェックが入っていないか
  • カスタムCSSや他のプラグインが目次要素を非表示にしていないか

目次プラグインとの併用は避けるべき?

SWELL標準の目次機能で十分なケースがほとんどです。「Table of Contents Plus」などの目次プラグインをSWELLと併用すると、目次が二重に表示されるトラブルが起きることがあります。SWELLを使っている場合は、目次専用プラグインの導入は不要です。

固定ページにも目次は必要?

プロフィールページやプライバシーポリシーなど、文字数が少なくH2が1〜2個しかない固定ページには目次は不要です。個別ページ設定でオフにするか、SWELL設定で表示条件(最低見出し数)を設定しておくと自動で非表示になります。

まとめ

SWELLの目次機能は、プラグイン不要で手軽に設置でき、デザインのカスタマイズもSWELL設定から直感的に行えます。目次を適切に設定することで、読者の利便性が向上するだけでなく、Googleのジャンプリンク表示によるCTR改善や、記事構造の明確化によるSEO効果も期待できます。見出しの数やキーワードの入れ方も意識しながら、ぜひ今日から目次機能を活用してみてください。

この記事を書いた人

WEB制作会社勤務
フロントサイドプログラマー兼デザイナー
休みの日はネコと遊ぶか、家の近くのサウナでリフレッシュ
好きな言葉:小さなことからコツコツと

目次