長いデータのページの目次は、見出しから作ります。h2とh3を階層どおりに立て、それぞれにidを付け、ページの上に見出しへのリンクを並べます。目次を先に考えるのではなく、見出しの立て方を先に決めます。
h1と見出しの役目はh1と見出しの付け方にまとめました。ここでは、県のページや会社のページのように、項目が多くて縦に長いデータのページに絞ります。
見出しは、どう立てる？
MDNの見出し要素の説明は、見出しのレベルを飛ばさないよう書いています。h1から始め、次にh2、その次にh3と使います。1ページにh1を1つ置き、レベルを飛ばさずに入れ子にすることを勧めています。
理由として、スクリーンリーダーの利用者は、見出しから見出しへすばやく移ってページの中身を判断する、と挙げています。多くのスクリーンリーダーは、ページの見出しを一覧にして出せるとも書かれています。目次は、それを画面に出したものです。
同じ説明は、文字の大きさを変えるために見出しを使わないよう書いています。大きさはCSSで変えます。データのページでよくあるのは、表の題をh4にして小さく見せる作りです。表の題は見出しにせず、表のcaptionに入れます。表の作り方は比較表をHTMLで作るにあります。
データのページの見出しの例
県の採用データのページなら、次のように立てます。
h1 岡山県の会社の採用データ
h2 離職率
h3 業種ごとの離職率
h3 市町村ごとの離職率
h2 有給取得率
h3 業種ごとの有給取得率
h2 データの出典と時点
h2は項目、h3はその項目の切り口にします。項目が10あればh2が10並び、目次も10行になります。h3まで全部を目次に出すと長くなるので、目次にはh2だけを出し、h3は本文で見せる作りもあります。
見出しの言葉は、検索される言葉にする
見出しは目次にそのまま並びます。「その他のデータ」「詳細」のような見出しは、目次で読んでも中身が分かりません。
私たちの運営記録（暦のメディア）
自社の暦のメディアで、神社の特色を表の1行に押し込めていたのを、見出し付きの節に格上げしました。効いた範囲は47ページです。売り場の当せん実績も、表の1セルから見出し付きの節に移し、39ページに効きました。
出典：自社サイトの作業記録・Search Console
表の中に入っていた情報は、見出しが無いので目次にも出ません。見つけ方は、ページのh3の数を数え、載っている件数より少なければ、表に押し込めている疑いを持ちます。記録の全体はデータの出し方の記録にあります。
ページ内リンクは、どう作る？
目次のリンクは、見出しに付けたidへ送ります。
<nav aria-labelledby="toc">
<h2 id="toc">このページの目次</h2>
<ol>
<li><a href="#rishoku">離職率</a></li>
<li><a href="#yukyu">有給取得率</a></li>
</ol>
</nav>
<h2 id="rishoku">離職率</h2>
MDNのidの説明では、idは文書全体で一意でなければなりません。目的の1つに、フラグメント識別子（URLの#から後ろ）を使ったリンクが挙がっています。値に空白は入れられません。
idは、見出しの文字から作るより、項目のコードから作ります。見出しの言葉を直してもidが変わらないので、外から張られた#つきのリンクが切れません。同じページに同じ項目が2回出る作りなら、切り口のコードを足して一意にします。
目次をnavで囲む
MDNのnav要素の説明は、navを、文書の中の他の部分や他の文書へのリンクを持つ部分としています。例として、メニュー、目次、索引が挙がっています。
1つのページにnavは複数置けます。サイトのメニューとページ内の目次が両方あるときは、aria-labelledbyで名前を付けると区別がつく、とも書かれています。上の例では、目次の見出しにidを付けて、navの名前にしています。
目次は、検索結果に出る？
Googleの公式資料で、目次やページ内リンクの書き方を指定した説明は、2026年10月26日の確認では見つけられませんでした。関係するのは、スニペットの説明にある、スニペットからページの中の特定の場所へ送るリンク（続きを読む、のリンク）の項目です。
そこでは、次のことが挙がっています。
- 内容がページにすぐ表示されていること。展開するセクションやタブの後ろに隠れていない
- ページを読み込んだときに、JavaScriptでスクロールの位置を動かさない
- 読み込み時にhistory APIなどを使うなら、URLから#の部分を消さない
目次の付け方そのものではありませんが、ページ内リンクを使う作りでは同じことに気をつけます。とくに3つ目は、目次をJavaScriptで作るときに起こりやすい間違いです。
目次を付けても、検索に出るとは限らない
目次やページ内リンクは、Googleが検索結果に必ず出すものではありません。目次を付けた前後で検索の数字を比べるときも、見出しの言葉を変えた影響と分けて見ます。
スマホでは、どう見せる？
スマホでは、目次が長いと本文までが遠くなります。目次はh1と最初の段落の後に置き、h2だけを出して短くします。
本文の表や節は、タブや折りたたみに入れません。上のGoogleの項目のとおり、隠れた内容はページ内リンクの先として扱いにくくなります。目次そのものを折りたたむのは構いません。
表が長いページは、ページそのものを分けるほうが読みやすくなる場合もあります。一覧を件数で分ける方法は一覧ページの分け方に書きました。
見出しと目次は、同じデータから出す
数百ページを同じ型で作るなら、見出しと目次を別々に書きません。項目のデータから見出しを作り、その見出しの並びから目次を作ります。
組み立てた後は、機械で次を数えます。
- 目次のリンク先のidが、ページの中にあるか
- 同じidが2つ以上ないか
- 見出しのレベルが飛んでいないか
1つ目が外れると、目次を押しても動きません。データ型のサイトの全体の作りはデータベース型からたどれます。
仕様・出典の確認日：2026年10月26日。
