# ページ内リンクの作り方完全ガイド｜SEO効果とズレ問題の解決法
ページ内リンクを設置して、いざクリックしたら見出しがヘッダーの裏に隠れた。
そのまま放置していませんか。
ユーザーが「あ、ここが読みたいのに見えない」と感じた瞬間、滞在時間は縮み、離脱のトリガーになります。ページ内リンクは実装自体は数行のHTMLですが、「正しく機能している状態」を作るには、コードの書き方だけでなく、CSSの調整とSEO設計の三つが揃う必要があります。
この記事では、HTMLの基本実装から固定ヘッダーによるズレ解消、Googleのジャンプリンク表示を活用したSEO最大化まで、一度で完結する形で解説します。
ページ内リンクの設計を含むサイト全体のSEO構造設計を仕組み化したい場合は、AI人格®Web運用サービスも参考にしてください。
ページ内リンクとは何か、なぜSEOに関係するのか
ページ内リンクとは、同じHTMLページ内の特定の箇所に直接ジャンプさせるリンクです。aタグのhref属性に「#」を付けたIDを指定することで実装します。
別名「アンカーリンク」「ジャンプリンク」「フラグメントリンク」とも呼ばれます。呼び名は複数ありますが、指しているものは同じです。
SEOとの関係は、直接的な順位要因というよりも、間接的な効果のほうが大きいです。
まず、ユーザーが目的のセクションにすぐ到達できると、ページ内の滞在時間が伸びます。途中で離脱するよりも、知りたいことにたどり着ける体験が続く。バウンス率が下がり、エンゲージメントシグナルとしてGoogleに読まれます。
クローラビリティの面でも有利です。ページ内リンクが整っているということは、構造が明確ということでもあります。Googlebotはページの構造を解析してインデックスするため、見出しとIDが揃ったページは理解しやすい状態になります。
Googleがページ内リンクをどう評価するか
2026年現在、Googleの検索結果画面ではAI OverviewとジャンプリンクがSERPsの可視性を大きく左右しています。
目次とアンカーリンクが揃っているページは、Googleがそれを解析してSERPsの「ジャンプリンク」として表示する場合があります。検索結果のタイトル下に「概要」「実装方法」「よくある質問」といったリンクが並ぶ形です。これはクリック率（CTR）の改善に直結します。
AI Overviewが記事の一部を引用する際も、見出しとIDが明確に構造化されたページのほうが、特定のセクションを引用しやすい状態になっています。
ページ内に構造がなければ、引用されない。
これは2026年のSEO環境における、小さくて重要な原則です。
ページ内リンクの正しいHTMLコードと実装手順
ページ内リンクのHTMLは、リンク元のaタグと、リンク先のid属性の2セットで構成されます。id属性はHTML5から推奨される現代的な実装方法です。
基本コード（リンク元・リンク先の2セット）
実装に必要なコードはシンプルです。
リンク元：
“`html セクション1へジャンプ “`
リンク先（到達先の見出しまたは要素）：
“`html
セクション1の見出し
“`hrefの「#」の後ろとid属性の値を一致させることが唯一のルールです。ここがずれると、リンクをクリックしてもジャンプしません。
以前はaタグのname属性を使う方法が一般的でしたが、HTML5以降はid属性が推奨されています。古いサイトのコードを参照する際には、nameとidが混在しているケースもあるため注意してください。
WordPressのGutenbergエディタを使う場合、HTMLを直接書く必要はありません。各ブロックの「高度な設定」タブを開くと「HTMLアンカー」という入力欄があります。そこにIDを入力すると、リンク先として機能します。リンク元のテキストにはURL欄に「#入力したID」と書くだけです。プラグインは不要です。
よくある実装ミスとその原因
正しいコードを書いているはずなのに動かない、というケースの原因は大半が以下の3つです。
- id名の書き間違い（タイポ）: hrefの「#」以降とidの値が1文字でも違うと動きません。大文字・小文字の違いでも動作が変わります
- id名に日本語や特殊文字を使っている: id属性には半角英数字・ハイフン・アンダースコアを使うのが原則です。日本語や記号を使うとURLにパーセントエンコードが発生し、予期しない動作の原因になります
- ページが短くてジャンプしているように見えない: ページの高さが不足していると、リンクは機能しているのに視覚的な移動が小さく、「動いていない」と誤認することがあります
id名は `section-1`、`faq`、`summary` のように、内容が類推できる英数字で設定しておくと管理も楽になります。
固定ヘッダーによるズレ問題を完全解消する方法
固定ヘッダー（position: fixed）があるサイトでページ内リンクを使うと、ヘッダーの高さ分だけスクロール位置がずれる問題が発生します。CSS の scroll-padding-top プロパティで解消できます。
「実装したのに見出しがヘッダーに隠れる」というのは、Web制作の現場では非常によくある問題です。ユーザーはリンクをクリックしたのに、読みたいテキストの先頭が見えない。こうした小さなストレスが積み重なると、サイトへの信頼感が静かに低下していきます。
scroll-padding-topによるCSSのみの解決法
JavaScriptなしでこの問題を解決できます。CSSの1ブロックを追加するだけです。
“`css :root { scroll-padding-top: 80px; scroll-behavior: smooth; } “`
`scroll-padding-top` にはヘッダーの高さを指定します。ヘッダーが80pxなら80px、100pxなら100pxです。
`:root` に設定するとサイト全体に適用されるため、各ページで繰り返し書く必要がありません。
レスポンシブ対応が必要な場合（スマートフォンでヘッダーの高さが変わる場合）は、メディアクエリで調整します。
“`css @media (max-width: 767px) { :root { scroll-padding-top: 60px; } } “`
ヘッダーの高さはブラウザの開発者ツールで確認できます。Chromeなら要素を選択した状態でComputedパネルに表示されるheightの値を使ってください。
スムーススクロールの設定方法
`scroll-behavior: smooth` の1行で、クリック後のジャンプが滑らかなスクロールに変わります。
先ほどのコードに既に含めていますが、この1行だけでも単独で機能します。対応ブラウザはChrome・Firefox・Safari・Edgeの現行バージョンすべてをカバーしており、2026年時点で実務上の問題はありません。
スクロールの速さはCSSカスタムプロパティでは直接制御できませんが（JavaScriptが必要です）、多くのケースでは `smooth` のデフォルト速度で十分な体験になります。
SEO効果を最大化するアンカーリンクの設計ルール
アンカーテキストとは、リンクをクリックする際に表示されるテキストです。検索エンジンはアンカーテキストをリンク先ページの内容の手がかりとして評価します。
「こちら」と「目次の使い方｜スムーススクロールの設定まで解説」では、Googleが受け取る情報量がまったく違います。これはページ内リンクでも外部リンクでも同じです。
アンカーテキストの最適化
Googleのリンクベストプラクティスでは、アンカーテキストに「click here」「here」「learn more」などの汎用的な言葉を使わず、リンク先の内容を具体的に説明するテキストを使うよう案内しています。日本語の「こちら」「詳細はこちら」「詳しくはこちら」も同じ問題です。
ユーザーはスクリーンリーダーを使う場合も含め、アンカーテキストを読んで「ここをクリックすると何が見られるか」を判断します。Googleも同じ情報をリンク評価に使います。
目安として、アンカーテキストは10〜25文字程度、リンク先の内容を端的に表す言葉を選びます。
内部リンクと外部リンクのアンカーテキストの考え方は同じですが、内部リンクの場合はリンク先記事のタイトルをそのまま使うのが最もシンプルで安全なアプローチです。リンク先が変わった場合にもアンカーテキストとのズレが生じにくくなります。
ページ内リンクの設置数と配置の考え方
実用的な目安は、3000文字以上の記事であれば10〜15個程度です。それ以上になると、ユーザーが「どこへ飛べばいいかわからない」状態になる可能性が高まります。
配置の考え方は2パターンあります。
目次型は記事冒頭にまとめて設置します。ユーザーが全体像を把握してから読み始められるため、長文記事やハウツー記事に向いています。本記事もこの形を想定しています。
本文埋め込み型は本文中に自然に挿入します。「詳しくはこちらのセクションで解説します」のような形で、文章の流れの中でジャンプさせます。情報が相互参照する構成の記事に向いています。
ページ内の構造設計はサイト全体のリンク設計と連動します。内部リンク全体の戦略については、グローバルナビゲーションのSEO効果を最大化する設計と実装の完全ガイドで詳しく解説しています。また、ページ内リンクをピラーページ・クラスターページ構造と組み合わせる方法は、ピラーページとクラスターページとは？作り方とSEO効果を解説も参考になります。
今日から使えるアンカーリンク設計チェックリスト
アンカーリンクの品質チェックは、実装・UX・SEOの3軸で行うことで見落としを防げます。
実装後に一度、このリストで確認してください。
- id属性が全セクション（ジャンプさせたい全箇所）に設定されているか
- リンク元のhref「#以降」とリンク先のid値が一致しているか（大文字・小文字も含めて完全一致）
- id名が半角英数字・ハイフン・アンダースコアのみで構成されているか
- 固定ヘッダーがある場合、scroll-padding-topを設定しているか
- アンカーテキストが「こちら」「詳細はこちら」になっていないか
- スマートフォン表示でジャンプ後の位置が正しいか実機またはエミュレータで確認したか
- Google Search ConsoleでそのページがインデックスされているかURL検査で確認したか
- 設置数が15個を超えていないか（超える場合はセクション統合を検討する）
サイト全体のページ内リンクを設計するとき、構造の壁が見えてくる
サイト規模が大きくなるほど、ページ内リンク・内部リンク・目次の設計は一元管理が難しくなります。構造設計を仕組み化することで、更新のたびに発生するリンク切れや設計の揺れを防げます。
記事が10本、20本のうちは手動管理で問題ありません。ただ、50本・100本と積み重なってくると、あるページのIDを変えたとたん、他のページからのリンクが切れる。更新のたびに全ページをチェックするのは現実的ではなくなります。
また、サイトのデザインを変更してヘッダー高さが変わった場合、scroll-padding-topの値をどのページで設定していたか、漏れがないかを確認する作業も発生します。
これらは「手が届かなくなった」問題ではなく、「設計の仕組みがない」問題です。
AI人格を使ってサイト全体のリンク設計テンプレートを標準化し、更新ルールをAIに持たせることで、この種の管理コストを大幅に削減できます。
サイト全体のSEO内部構造の設計方針については、SEO内部対策チェックリスト2026｜AI人格® Web運用活用法が体系的にまとまっています。
ページ内リンクの設計も含め、Webサイト全体のSEO運用を仕組み化したい場合は、AI人格®Web運用サービスの詳細をご覧ください。
よくある質問
ページ内リンクはSEOに直接効果がありますか？
ページ内リンク自体が検索順位を直接押し上げるシグナルではありません。ただし、ユーザーの滞在時間向上とクローラビリティの改善を通じて、間接的にSEOに貢献します。目次とアンカーリンクが揃っているページはGoogleのSERPsでジャンプリンクが表示される場合があり、CTRの改善につながります。
固定ヘッダーがあるとなぜリンクがずれるのですか？
position: fixedのヘッダーは通常の文書フローの外に存在するため、ブラウザがアンカーリンク先のスクロール位置を計算する際にヘッダーの高さを考慮しません。scroll-padding-topを設定することで、ブラウザがスクロール先を計算する基準点をヘッダーの高さ分だけずらすことができます。
ページ内リンクを何個まで設置してよいですか？
明確な上限はありませんが、3000文字以上の記事で10〜15個程度が実用的な目安です。設置数よりも「ユーザーが本当にジャンプしたい箇所かどうか」を基準に選ぶほうが重要です。多すぎると目次が長くなりすぎて、かえってユーザーが迷う原因になります。
WordPressでページ内リンクを設置する方法は？
Gutenbergエディタでは、各ブロックの「高度な設定」タブにある「HTMLアンカー」欄にIDを入力することでリンク先として機能します。リンク元はテキストを選択してリンクを挿入し、URLに「#入力したID」を記入するだけです。HTMLを直接編集する必要はなく、プラグインも不要です。
アンカーリンクのid属性に日本語は使えますか？
技術的には使用可能ですが推奨しません。日本語をid属性に使うとURLがパーセントエンコードされ、リンク先のURLが長く読みにくい形になります。id属性は半角英数字・ハイフン・アンダースコアで書き、アンカーテキスト（ユーザーに見える文字）を日本語にするのが現実的なベストプラクティスです。
まとめ
ページ内リンクの実装は3分もあれば完了します。ただ、「機能している」状態と「ユーザー体験とSEOを最大化している」状態の間には、scroll-padding-topの1行とアンカーテキストの設計という差があります。
この記事で確認したことを振り返ります。
- 基本実装はリンク元のhref「#ID」とリンク先のid属性の2セット
- 固定ヘッダーのズレはscroll-padding-topとscroll-behavior: smoothで解消できる
- Googleジャンプリンク表示のためには目次とアンカーリンクの構造が揃っていることが条件
ページ内リンクは小さな設計ですが、サイト全体のUXとSEOを底上げします。
チェックリストを参考に、今日中に確認してみてください。
サイト全体のSEO内部構造を仕組み化したい場合は、AI人格®Web運用サービスの詳細をご覧ください。
