ページ内リンクは、ページ内の特定の場所へ素早く移動できるリンクです。読者が知りたい情報にすぐアクセスできるため、記事全体の読みやすさ向上にもつながります。

本記事では、ページ内リンクの作り方をHTMLとWordPressの環境に分けて紹介しています。リンクが機能しないときの原因と対処法や、移動時になめらかなアニメーションを付ける方法も解説します。コピーするだけで使えるコードや設定手順も図で解説しているので、ぜひ参考にしてください。

ページ内リンクとは

ページ内リンクとは、クリックするとページ内の指定した位置（見出しや画像、ボタンなど）へ瞬時に移動できるリンクを指します。別名「アンカーリンク」とも呼ばれます。

ページ内リンクが利用される主なシーンは、以下のとおりです。

• 長文記事の冒頭に設置する目次から各セクションへ直接ジャンプする
• FAQページで質問一覧から該当の回答へ素早く移動する
• ランディングページでCTAボタンから申し込みフォームへ誘導する
• ページ下部に置いた「ページトップへ戻る」ボタンで先頭に戻る

ページ内リンクを設置することで、読者は知りたい情報へスムーズにアクセスできるようになります。長くスクロールして目的の情報を探す手間が省けるため、記事全体の読みやすさ向上にもつながります。

とくに、情報量の多い長文記事やランディングページでは効果を発揮しやすく、ユーザーが必要な情報へ迷わずたどり着ける導線設計として有効で、ユーザー体験の向上にも直結します。 

※関連記事：外部リンクとは？被リンク・内部リンクとの違いやSEO効果・対策方法を紹介

ページ内リンクを設置するメリットとは

ページ内リンクは、ユーザーが情報へスムーズにアクセスできる導線をつくるだけでなく、コンテンツの読みやすさや成果にも影響する重要な要素です。

ここでは、具体的なメリットを4つの観点から解説します。

1.知りたい情報へすぐたどり着ける導線をつくれる

ページ内リンクを設置すると、読者は目的の情報へ直接アクセスできるようになります。長文記事はスクロールの負担が大きくなりがちですが、目次やアンカーリンクを活用すると、必要な情報へ最短でたどり着けます。読者が迷わず情報を得られる状態をつくることは、記事全体の読みやすさと満足度の向上に直結します。

2.離脱率・直帰率の改善につながる

目的の情報にすぐアクセスできないと、ユーザーはページを離れやすくなります。ページ内リンクで「探すストレス」を減らすことは、閲覧の継続につながります。結果として、離脱率や直帰率の改善が期待でき、コンテンツ全体の評価向上にも寄与するでしょう。

3.Googleのサイトリンクに表示される可能性がある

目次構造やページ内リンクを適切に設計すると、検索結果に「サイトリンク」として表示される可能性があります。これは、検索結果上から特定の見出しへ直接移動できるリンクが表示される仕組み。

すべてのページで表示されるわけではありませんが、構造が整理されたコンテンツほど対象になりやすい傾向です。表示されると検索結果上での占有面積が広がり、クリック率の向上も期待できます。

4.ユーザー行動の改善を通じたSEOへの間接効果が期待できる

ページ内リンクは、検索順位に直接的な影響はありません。しかし、ユーザー行動の改善を通じて、間接的にSEOへ寄与します。ページ内の回遊が促進されれば滞在時間が延び、複数のセクションが読まれることで、コンテンツの満足度が高いとみなされやすくなります。こうしたシグナルの積み重ねが、長期的な検索順位の安定や改善につながる可能性があります。

ページ内リンクを作る方法

続いて、Webページにページ内リンクを作成する方法をご紹介します。実装方法は大きく分けて2つあります。 

• HTMLのidタグ｜解説はこちら
• WordPressのHTMLアンカー｜解説はこちら

記事制作エディターやCMSによって、方法が異なります。それぞれ詳しく解説します。

HTMLのid属性を使う方法

1つ目は、HTMLのid属性を使ってページ内リンクを設定する方法です。

id属性とは、Webページ内の特定の要素に名前を付ける仕組みです。この名前をリンク先として指定することで、任意の位置へジャンプできるようになります。 見出しだけでなく、段落、画像など、さまざまな要素をリンク先に設定できます。

※以前はname属性が使われていましたが、現在ではid属性の仕様がが標準となっています。

idタグを使った設定例

具体的な記述例を紹介します。

■見出しに設置する場合

たとえば、ブログ記事の中の「料金プラン」という見出しへジャンプさせる場合、以下のように記述します。

クリックする場所（リンク元）の記述：

<a href="#price">料金プランを見る</a>

移動先(リンク先)の記述：

<h2 id="price">料金プラン</h2>

このように記述すると、読者が「料金プランを見る」をクリックしたときに、自動的に「料金プラン」の見出し位置まで移動します。

■特定のエリアに設置する場合

特定のエリアや枠全体をリンク先にしたい場合は、divタグにidを設定します。たとえば、記事の途中で、LP内のお問い合わせフォーム部分へジャンプする場合、次のように記述します。

クリックする場所（リンク元）の記述：

<a href="#contact">お問い合わせフォームへ移動</a>

移動先（リンク先）の記述：

<div id="contact">
  <p>お問い合わせフォーム</p>
</div>

このように、移動先となる場所に「div id=”名前”」を指定し、リンク元のhrefに「#名前」を記述することで、ページ内リンクが機能します。

画像やpタグも同様に、`

<img id="photo01">

` や `

<p id="summary"> 

`のように指定できます。

WordPressのHTMLアンカーを使う方法

2つ目は、WordPressのHTMLアンカー機能を使う方法です。

HTMLアンカーとは、ページ内の特定の場所へ移動するための「目印」をつくる機能です。

WordPressを使っている場合に限られますが、HTMLを直接編集する必要がないため、初心者でも簡単に設定できます。

ブロックエディターでの設定手順は、以下のとおりです。

1. 移動先となるブロック（見出しなど）を選択する
2. 設定エリアの「高度な設定」にある「HTMLアンカー」に任意の文字を入力する
3. リンク元の文字のハイパーリンク設定画面を開く
4. 「#」を入力し、着地地点で入力したHTMLアンカーの文字を入力する

上記の1.〜4.の手順を図でも解説しましょう。

HTMLアンカーの名前を付ける際は、以下の点に注意してください。このルールに従っていないアンカーは、意図したとおりに機能しない可能性があります。

※参考記事：サポートフォーラム – WordPress.org 日本語｜ページジャンプ （外部ページ）

ページ内リンクが機能しないときの原因と対処法

ページ内リンクを設置したものの、「クリックしても反応しない」「まったく違う場所に飛んでしまう」といったトラブルが起きることがあります。

おもな原因は、1.HTMLの記述ミスと、2.id名の重複です。順に説明しましょう。

原因1.記述ミス

もっとも多い原因は、HTMLの記述ミスです。以下のポイントを確認してください。

「#」のつけ忘れ・つけ間違い	・リンク元（クリックする場所）には「#」が必要 ・リンク先（異動先）には「#」は不要
全角・半角のミス	・URLや「#」、idは半角英数字で記述する
スペルミス	・リンク元のhref属性とリンク先のid属性は完全に一致させる ・大文字と小文字も区別される (「Price」と「price」は別のものとして扱われます)

小さなミスでも、ページ内リンクは正しく機能しません。1文字ずつ確認することが大切です。

原因2.id名の重複

HTMLでは、「1つのページ内に同じidは1つしか使えない」というルールがあります。

例えば、id=”price” がページ内に2か所以上あると、ブラウザはどこに遷移すればよいか判断できません。その結果、リンクが機能しなかったり、意図しない位置へ移動したりします。

HTMLをコピー&ペーストして作成している場合、意図せずid名が重複してしまうことがあります。ページ内で同じid名が使われていないか、必ず確認しましょう。

着地位置がずれるときの原因と対処法

ページ内リンクは機能しているものの、移動先の見出しが画面上部の固定ヘッダーに隠れてしまうことがあります。

固定ヘッダーとは、スクロールしても常に画面上部に表示されるヘッダーのことです。ブラウザは移動先を画面の最上部に表示しようとするため、見出しがヘッダーの裏に隠れてしまうのです。

この問題は、CSSで移動先の位置に余白を持たせることで解決できます。

たとえば、「price」というid名をつけた見出しの位置を調整する場合、スタイルシート（CSS）に次のようなコードを追加します。

#price {
    padding-top: 50px;
    margin-top: -50px;
}

それぞれのコードの意味は以下のとおりです。

• padding-top：要素の内側の上に余白を作る
• margin-top：要素の外側の上方向の位置を調整する（上にずらす） 

この記述は、上に50pxの余白を確保しつつ、その分だけ表示位置を上に調整するという意味です。50pxの部分は、固定ヘッダーの高さに合わせて調整してください。

別ページの見出しに移動するリンクの作り方

ページ内リンクは、同じページ内だけでなく、別ページの特定の場所にも設定できます。
方法はシンプルで、リンク先URLの末尾に「#id名」を付けるだけです。

たとえば、以下のように記述します。

<a href="https://mieru-ca.com/blog/internal-link/#01">内部リンクとは</a>

そして、リンク先のページには、対応するid名を設定しておく必要があります。

<h2 id="01">内部リンクとは</h2>

リンク元と移動先のid名が一致していれば、別ページを開いた際に指定した箇所まで自動的にスクロールされます。

スムーススクロールの実装方法

ページ内リンクをクリックした際、画面が一瞬で切り替わると、「今どこに移動したのか分かりにくい」と感じることがあります。こうした違和感を減らす方法が、スムーススクロールです。

スムーススクロールを設定すると、リンクをクリックした際になめらかなスクロールで移動します。移動の過程が視覚的に見えるため、読者はページ内の位置関係を把握しやすくなります。

スムーススクロールの実装方法は、2つあります。

■CSSで実装する

CSSに以下の1行を追加するだけで実装できます。特別な要件がなければ、まずこちらの方法を試してみてください。

html {
  scroll-behavior: smooth;
}

■jQueryで実装する

スクロール速度や動きをより細かく調整したい場合は、jQueryを使用します。以下のコードでは、#で始まるリンクをクリックした際にスムーススクロールが動作します。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    // #で始まるアンカーをクリックした場合に処理
    $('a[href^="#"]').click(function() {
        // スクロールの速度（ミリ秒）
        var speed = 500;
        // アンカーの値取得
        var href= $(this).attr("href");
        // 移動先を取得（hrefが#または空ならhtml要素をターゲットにする）
        var target = $(href == "#" || href == "" ? 'html' : href);
        
        // 移動先を数値で取得
        // 固定ヘッダーの高さを考慮して -60 しています
        var position = target.offset().top - 60;

        // スムーススクロール実行
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        
        // URLに#を残さないための処理
        return false;
    });
});
</script>

これは、CDNからjQueryを導入する場合を想定しています。ご自身の利用環境に合わせて、コードを調整してください。

※関連記事：
・【事例付き】おすすめアクセス解析ツールでサイト改善する方法教えます
・ページスピードを落とさないための4つの改善施策｜ページスピードインサイト活用とSEOとの関係

ページ内リンクの活用例

ページ内リンクは、設置する場所や見せ方を工夫することで、記事の読みやすさや成果向上につなげられます。

ここでは、Webサイトでよく使われている代表的な活用パターンを紹介します。

テキストにページ内リンクを設置する3つの例

もっとも基本的な使い方が、テキスト（文字）への設置です。
よくある活用例は以下の3つです。

例1.目次

記事の冒頭に置き、読みたい見出しへ直接移動する

例2.出典・注釈

文中の「※1」などをクリックし、ページ下部の参考文献リストに移動する

例3.記事内誘導

「手順の詳細は後述します」などのテキストから、解説部分へ移動する

とくに目次は、長文の記事で役立ちます。読者が知りたい情報へすぐアクセスできるため、記事全体の読みやすさが向上します。

以下は、コピーして使えるシンプルな目次のHTMLコード例です。

<div class="toc-container">
  <p>目次</p>
  <ul>
    <!-- リンク元（出発地点） -->
    <li><a href="#section-01">1. ページ内リンクとは</a></li>
    <li><a href="#section-02">2. 基本的な作り方</a></li>
    <li><a href="#section-03">3. まとめ</a></li>
  </ul>
</div>

<!-- リンク先（着地地点） -->
<h2 id="section-01">1. ページ内リンクとは</h2>
<!-- 本文... -->

<h2 id="section-02">2. 基本的な作り方</h2>
<!-- 本文... -->

<h2 id="section-03">3. まとめ</h2>
<!-- 本文... -->

※関連記事：SEOに強い目次とは？作成と改善方法をお伝えします

ボタンや画像にページ内リンクを設置する3つの例

テキストだけでなく、ボタンやバナー画像にもページ内リンクを設定できます。テキストだけでなく、ボタンやバナー画像にもページ内リンクを設定できます。テキストリンクより目立つため、読者が気づきやすくなります。

よくある活用例は以下の3つです。

例1.CTA（行動喚起）ボタン

「お問い合わせフォームはこちら」などのボタンから、ページ下部のフォームへ移動する

例2.「トップへ戻る」ボタン

画面の右下に常駐し、クリックするとページの最上部へ移動する

例3.ボタン型の目次

ページ上部のヘッダーに表示され、クリックすると各見出しへ移動する

ページ内リンクは、読者が知りたい情報にアクセスしやすくする便利な機能です。仕組みはシンプルですが、目次や「トップへ戻るボタン」、ボタン型リンクなど、幅広い用途に使えます。適切に設置することで、読者のストレスを減らし、記事全体の満足度向上につながります。

ぜひ本記事のコードや手順を参考に、ユーザーにとって使いやすいページ作りを実践しましょう。
悩むことがあれば、当社・Faber CompanyのSEOコンサルタントへお気軽にご相談ください。

20年の実績｜Faber CompanyのSEOコンサルティングサービス

SEOコンサルに無料相談する

SEOコンサルサービスの概要資料を見る

※関連記事：
・【2026年最新】SEOとは？優先度の高い10のSEO対策をわかりやすく解説
・内部リンクとは？定義とSEOに効く貼り方・注意点
・外部リンクとは？被リンク・内部リンクとの違いやSEO効果・対策方法