アンカーリンク（ページ内リンク）とは：書き方・目次の作り方とSEOでの扱い

この記事の要点：

• アンカーリンク（ページ内リンク）とは、ページの中の特定の場所へ移動するリンクです。移動先の要素に id を付け、リンクの href に「#」と同じ id を書いて作ります。
• アンカーテキストはリンクとして表示される文字、a タグはリンクを作る HTML の要素で、アンカーリンクとは指すものが違います。
• Google 検索は通常、URL の「#」以降（フラグメント）を別のページとして扱いません。ページ内リンクは、検索順位を直接上げるものではなく、読者が答えの場所へ早く着くための仕組みです。
• 固定ヘッダーで見出しが隠れる、リンクしても移動しないといった不具合は、CSS の scroll-margin-top と id の重複・つづりの確認で直せます。

アンカーリンクとは：ページの中の特定の場所へ移動するリンク

アンカーリンクとは、同じページの中、または別のページの中の特定の場所へ直接移動するリンクです。「ページ内リンク」「ジャンプリンク」とも呼ばれます。長い記事の目次から各見出しへ移動するリンクや、「ページの先頭へ戻る」ボタンがよくある例です。

仕組みは、移動先の要素に名前（id 属性）を付け、リンクの URL の末尾に「#」とその名前を書くことです。この「#」以降の部分を URL のフラグメント（断片）と呼びます。MDN の a 要素の説明（2026 年 10 月 13 日確認）は、href で指定できるものとして「ページの節を示すフラグメント URL」を挙げています。

アンカーリンクは、読者が知りたい答えのある節へ早く着けるようにするためのものです。目次・FAQ・料金表など、ページが長く、読者ごとに読みたい場所が違うページで役に立ちます。

アンカーリンク・アンカーテキスト・aタグの違い

アンカーリンクは「ページ内の位置へ移動するリンク」、アンカーテキストは「リンクとして表示される文字」、a タグは「リンクを作る HTML の要素」です。名前が似ているため混同されやすいですが、指しているものが違います。

アンカーリンクにもアンカーテキストがあるため、「こちら」ではなく移動先の内容が分かる文字にする決まりは、通常のリンクと同じです。

アンカーリンクの書き方：idとhref=”#…”

アンカーリンクは、①移動先の要素に id を付ける、②リンクの href に「#」と同じ id を書く、の 2 つで作れます。MDN の a 要素の例も、見出しに id を付け、別の場所から href="#…" でリンクする形を示しています。

<!-- 例：同じページの見出しへ移動する -->
<a href="#faq">よくある質問へ移動</a>
…
<h2 id="faq">よくある質問</h2>

<!-- 例：別のページの見出しへ移動する -->
<a href="/guide/sample/#faq">サンプル記事のよくある質問</a>

<!-- 例：ページの先頭へ戻る -->
<a href="#top">ページの先頭へ戻る</a>

上の URL は説明用の例です。MDN は、href="#top" または空のフラグメント（href="#"）で、現在のページの先頭にリンクできると HTML の仕様で定義されている、と説明しています。

id の付け方の決まり

id は、文書全体で 1 つだけの名前にします。MDN の id 属性の説明は、id を「文書全体で一意でなければならない識別子」と定義し、値に空白を含めてはいけないとしています。CSS や JavaScript から扱いやすいよう、英小文字・数字・ハイフンで、内容の分かる短い名前（例：faq、how-to）にすると管理しやすくなります。

かつて使われた a 要素の name 属性は非推奨で、MDN は代わりにグローバル属性の id を使うよう案内しています。

目次の作り方：HTMLとWordPressで見出しにidを付ける

記事の目次は、各見出し（h2・h3）に id を付け、その id へのアンカーリンクを記事の冒頭に並べて作ります。見出しタグの使い方は「見出しタグ（h1〜h6）とは」で説明しています。

<!-- 例：記事の冒頭に置く目次 -->
<nav aria-label="目次">
  <ol>
    <li><a href="#what">アンカーリンクとは</a></li>
    <li><a href="#how-to">書き方</a></li>
    <li><a href="#faq">よくある質問</a></li>
  </ol>
</nav>
<h2 id="what">アンカーリンクとは</h2>

WordPress では、見出しブロックを選び、右側の「ブロック設定」の「詳細設定」にある「HTML アンカー」の欄に名前を入れると、見出しの id になります。WordPress.org のサポート記事「ページジャンプ」（2026 年 10 月 13 日確認）は、HTML アンカーは文書内で固有にすること、大文字と小文字が区別されること、スペースは使えず先頭はアルファベットにすることを挙げ、リンク先は「#」で始めて書くよう説明しています。目次を自動で作るテーマやプラグインのうち、見出しの文言から id を作る方式のものでは、見出しを書き換えると id が変わり、外部や社内の資料から張られた「#…」付きのリンクが先頭に飛ぶようになることがあります。公開後に見出しを直す記事では、id を手で固定しておくと安全です。

目次を置くか決める判断表

Googleでの扱い：#付きのURLと検索結果のジャンプ

Google 検索は通常、URL の「#」以降を別のページとして扱わないため、アンカーリンクはページを増やす仕組みにも、順位を直接上げる仕組みにもなりません。Google 検索セントラル「Google 検索における URL 構造のベスト プラクティス」（最終更新日 2025-12-31、2026 年 10 月 13 日確認）は、「Google 検索は通常、URL フラグメントをサポートしていないため、ページのコンテンツを変更する際にフラグメントを使用しないでください」と書き、JavaScript で内容を切り替える場合は History API を使うよう求めています。

一方で、検索結果の側からページ内の位置へ移動することはあります。「強調スニペットについて」（最終更新日 2025-12-18）は、強調スニペットをクリックすると、表示されているページのセクションに直接移動し、ページが自動的にスクロールするため、サイト側で目印を付ける必要は無いと説明しています。ブラウザーが対応していない場合や移動先を判断できない場合は、ページの先頭に移動します。

当サイト（seoagent.jp）が 2026 年 10 月 13 日に Ahrefs で「アンカーリンク」の上位 10 位（日本）を確かめたところ、上位の 2 ページでは、結果の下に「#a03」「#index2」のような、ページ内の見出しを指す URL のサイトリンクが表示されていました。Google の「サイトリンク」の説明は、サイトリンクは自動で、役に立つと判断した場合だけ表示され、見出しの文言は「有益で関連性が高く、簡潔なもの」にするよう勧めています。表示の条件は公開されていないため、目次を作れば必ず出るものではありません。

テキストフラグメント（#:~:text=）とAIの回答からのリンク

テキストフラグメントとは、id が無くても、ページ内の特定の文字列へ直接移動して強調表示させる URL の書き方です。MDN の「テキストフラグメント」の説明（2026 年 10 月 13 日確認）によると、構文は #:~:text=[prefix-,]textStart[,textEnd][,-suffix] で、対応するブラウザーは一致する最初の文字列までスクロールし、強調表示します。

<!-- 例：ページ内の「よくある質問」という文字へ移動する -->
https://example.com/page/#:~:text=よくある質問

MDN は、指定した文字列が見つからない場合や、ブラウザーが対応していない場合は、テキストフラグメント全体が無視され、文書の先頭にリンクされると説明しています。文字列はパーセントエンコードが必要で、照合では大文字と小文字を区別しません。

検索結果や AI による回答の出典リンクから、この形の URL でページに来る場合があります。そのため、答えとなる文を、見出しのすぐ下の段落の中に、その文だけで意味が通じる形で書いておくと、移動した先で読者がすぐ答えを読めます。Google は AI による概要や AI モードのための特別な最適化は必要ないとしており（「AI 機能とウェブサイト」）、ページ内リンクの書き方を変えることで AI の回答に出やすくなる、という公式の説明はありません。

よくある不具合と直し方：ずれ・移動しない・重複id

アンカーリンクの不具合の多くは、固定ヘッダーで見出しが隠れる、id のつづりが違う、同じ id が 2 つある、のどれかです。症状から原因を絞り込みます。

固定ヘッダーで隠れる問題には、移動先の要素に CSS の scroll-margin-top を指定する方法がよく使われます。MDN はこのプロパティを、スクロールスナップ領域の上側のマージンを定義するものと説明しています。効果はブラウザーと画面幅ごとに目で確かめます。

/* 例：id を持つ要素の上に、固定ヘッダーより少し大きい余白をとる */
[id] { scroll-margin-top: 96px; }

ページ内リンクの移動を滑らかにする scroll-behavior: smooth を使う場合は、動きを減らす設定の利用者のために、prefers-reduced-motion で無効にしておくと親切です。

当サイト（seoagent.jp）のページ内リンクの設定と点検

当サイトでは、テーマの CSS で、id を持つすべての要素に scroll-margin-top: 96px を指定しています（リポジトリのテーマ、2026 年 10 月 13 日確認）。上部のヘッダーは画面上部に固定（sticky）で、高さは 76px（幅 1,240px 以下では 64px）のため、移動先の見出しがヘッダーの下に隠れない余白になっています。ページ内の移動は滑らかにしていますが、動きを減らす設定の利用者には無効にしています。

サイトの自動の SEO 点検（scripts/audit/seo_check.py）は、内部リンクを点検するときに URL の「#」以降を取り除いてページの存在を確かめます。そのため、ページは存在するが id が無い、といったページ内リンクの切れは、この点検では見つかりません。id の確認は、ページの HTML で目で行う対象としています。リンク切れ全般の点検方法は「リンク切れとは」で説明しています。

よくある質問

アンカーリンクはSEOに効果がありますか？

順位を直接上げる効果は確かめられません。Google 検索は通常、URL の「#」以降を別のページとして扱いません。読者が答えの節へ早く着けるようにする仕組みとして使い、強調スニペットからの移動などはサイト側の目印なしで行われると Google は説明しています。

固定ヘッダーで見出しが隠れるときはどうすればよいですか？

移動先の要素に CSS の scroll-margin-top を指定し、ヘッダーの高さより少し大きい余白をとります。当サイトでは id を持つ要素すべてに 96px を指定しています。画面幅でヘッダーの高さが変わる場合は、最も高いときに合わせます。

別のページの特定の位置にリンクするには？

リンク先のページの URL の後ろに「#」と移動先の id を付けます（例：/guide/sample/#faq）。リンク先に id が無い場合は、対応するブラウザーではテキストフラグメント（#:~:text=）で文字列を指定できますが、見つからなければページの先頭に移動します。

#以降のURLはGoogleにインデックスされますか？

Google は、URL フラグメントを通常サポートしていないと説明しています。フラグメントで内容を切り替えるページは、それぞれの内容が別の URL として扱われないため、JavaScript で内容を変える場合は History API で URL を変えるよう求めています。

SEOAGENTでできること

SEOAGENT は、自社サイトで記事を作る企業向けの記事制作の支援ツールです。記事の作成では、構成に沿って本文を作り、目次付きの本文として仕上げられます。内部リンクの機能では、関連する記事どうしのリンクを提案し、挿入できます。

テーマの CSS（固定ヘッダーの余白など）や、公開後のページの id の点検は SEOAGENT では行いません。ページの表示は、ブラウザーで実際に確かめてください。検索順位を保証するものではありません。

• AI記事作成・画像生成
• 内部リンクの提案・挿入

サイトの内部のリンク設計は内部リンクとはに、テクニカル SEO のほかの記事は「テクニカルSEOの記事一覧」にまとめています。

参考情報

• MDN：<a> アンカー要素
• MDN：id グローバル属性
• MDN：テキストフラグメント
• MDN：scroll-margin-top
• WordPress.org 日本語：ページジャンプ
• Google 検索セントラル：Google 検索における URL 構造のベスト プラクティス
• Google 検索セントラル：強調スニペットについて
• Google 検索セントラル：サイトリンクの定義と表示について
• Google 検索セントラル：AI 機能とウェブサイト