ページ内リンクとは、同じページ内の特定箇所にクリックするだけで遷移できるリンクです。
「ページ内リンクにはどんなメリットがある？」「設定のやり方がわからない」とお悩みの人に向けて、ページ内リンクのメリット・デメリットや作り方、作る際の注意点、よくある不具合とその解決策を、初心者にもわかりやすく解説します。
- 目次
ページ内リンクとは
ページ内リンクとは
ページ内リンクとはその名のとおり、設置したリンクをクリックするだけで、同じページ内の特定の箇所に遷移できるリンクです。
別名「ページ内ジャンプ」「ジャンプメニュー」とも呼ばれており、リンクを設置した箇所から誘導したい箇所に、ユーザーを遷移させられます。
多くのWebサイトでは、目次のように記事の要点を簡潔にまとめた見出しにページ内リンクを設置し、本文の該当する箇所にユーザーが直接ジャンプできる仕組みが使われています。
SEOタイムズでも目次で導入しています。
ページ内リンクのメリット
ページ内リンクには、ユーザーの利便性が向上するメリットがあります。
Webサイトを訪問したけれど、コンテンツの内容が多すぎて、途中で読むことをあきらめた経験がある人も多いかと思います。
ページ内リンクを設置すれば、気になる見出しのリンクをクリックするだけで、すぐに本文の該当する箇所にたどり着けるため、必要な情報を素早く・的確に得ることができます。
結果としてユーザーの満足度が向上します。
また、求める情報にすぐにたどり着けたり、コンテンツ内をスムーズに回遊できたりするWebサイトは、ユーザーにとって使い勝手が良いため、回遊率や滞在時間が向上します。
ユーザーの利便性と満足度の高いWebサイトは、Googleから高く評価されますので、SEO効果も期待できるでしょう。
ページ内リンクのデメリット
ページ内リンクを設置すれば、ユーザーはクリックするだけで簡単に必要な情報だけを手に入れられるため、Webサイトの内容を十分に見てもらえないデメリットがあります。
また、リンクによって直接移動することで、スクロール中に表示される広告も見てもらえなくなるため、広告収入も減少するでしょう。
ただし、デメリットよりも、ユーザーの利便性や満足度が高まるメリットが大きいため、ページ内リンクを設置することをおすすめします。
ページ内リンクの作り方
メリットとデメリットが把握できたら、早速ページ内リンクを設置しましょう。ページ内リンクを作る2つの方法を解説します。
METHOD 1
HTML5を使う方法
HTML5では、nameタグに変わって使用が推奨されている、idタグを使います。
基本的な設定方法は同じですが、グローバル属性である「id属性」では、アンカー要素（aタグ）だけではなく、すべてのHTML要素が指定可能です。
STEP 1
まずは、「着地点」となるリンク先（アンカーリンク）に、アンカー要素（aタグ）の「id属性」を指定しましょう。
属性値が「title」の場合は、
<a id="title">タイトル</a>となります。
STEP 2
次に、リンク元にアンカー要素（aタグ）の「href属性」を指定しましょう。
属性値は、STEP1で指定したidに#（半角シャープ）を付けて指定しますので、
<a href="#title">タイトルにジャンプする</a>となります。
<a href="#title">タイトルにジャンプする</a>
<a id="title">タイトル</a>上記のタグを記述することで、「タイトルにジャンプする」をクリックすれば、「タイトル」にジャンプできます。
METHOD 2
WordPressを使う方法
WordPressを使ってWebサイトを運営している場合は、プラグインを利用することによって、テキストからHTMLタグを書くことなく、ページ内リンクを誰でも簡単に設定できます。
手軽さで人気が高いプラグインは「Advanced Editor Tools」で、ページ内リンクを設置したい箇所に、カーソルでidを設定するだけで、設定可能です。
プラグインの導入は、現サイトとの干渉に気を付けましょう。必ず事前にバックアップを取得することを忘れずに！
ページ内リンク設定の注意点
ページ内リンクを設定する際に注意したい、3つのポイントを解説します。
POINT 1
リンク元とリンク先が近い場合は使わない
リンク元とリンク先が近い場合は、ページ内リンクの使用は避けましょう。
ページ内リンクの目的は、ユーザーの利便性の向上ですが、リンクですぐ近くに飛ばされてしまうと、読んでいた箇所がわかりにくくなるため、かえってユーザーを混乱させてしまいます。
POINT 2
リンク先のタイトルをリンクテキストにする
リンク先のタイトルは、リンクテキスト名にすることをおすすめします。
アンカーテキストであるリンクテキスト名がわかりにくいと、ユーザーだけではなく、検索エンジンにも悪い影響を与えてしまいます。
リンク先の内容がひと目でわかるように、リンクテキスト名にはページ内リンク先のタイトルを設定しましょう。
POINT 3
ユーザビリティを考慮する
ページ内リンクを設定する際には、ユーザビリティを考慮しなければなりません。
例えば、設置されたページ内リンクを別のページに移動するリンクだと、ユーザーが誤解してしまうことがあります。
そうなると、ユーザーは自分が同じページ内にいるのか、別のページにいるのかわからなくなり、ブラウザバックなどの不要な動作を行ってしまいます。
ユーザーの混乱を避けるためには、ページ内リンクであることを示す工夫が必要です。
ユーザーにページ内の移動であることをわかりやすく示し、スムーズな操作を促すことで、ユーザビリティの向上につなげられます。
ページ内リンクの不具合とその解決策
ページ内リンクのよくある不具合と、その解決策を解説します。
クリックしてもジャンプしない
リンクをクリックしてもジャンプしない場合は、記述ミスが原因だと考えられます。
「#」が付いているか、idの属性値が間違っていないかなど、正しく記述できているか確認しましょう。
記述確認には、ChatGPTを活用するととても便利です！
また、古いブラウザの中には、HTML5の記述に用いられる「id属性」に対応していないものもあります。
考慮する場合は「id属性」と「name属性」を使いますが、かなりレアケースのため、基本的には「id属性」で記述しても問題ありません。
意図しない位置にジャンプする
意図しない位置にジャンプしてしまうのは、「position:fixed」でヘッダーを固定していることが原因だと考えられます。
改善するには、CSSまたはJavaScriptで調整します。
CSSで調整する場合は、ページ内リンクのリンク先のid属性値にCSSを指定し、位置を調整します。
また、JavaScriptで調整する場合は、jQueryを使って位置を調整しましょう。
よくある質問
ページ内リンクとは？
同じページ内の特定の箇所にクリックするだけで遷移できるリンクです。
ページ内リンクのつけ方は？
HTMLやHTML5に記述する以外にも、WordPressのプラグインを使う方法があります。
ページ内リンクに飛べないのはなぜ？
記述ミスが原因だと考えられますので、正しく記述できているか確認しましょう。
まとめ
ページ内リンクを設置すると、ユーザーが必要な情報をすぐに手に入れられるため、利便性と満足度が向上します。
また、使い勝手の良いWebサイトは、回遊率と滞在時間の向上も期待できます。
ページ内リンクには直接的なSEO効果はありませんが、Googleではユーザーの使い勝手が良いWebサイトを高く評価するため、間接的にSEO効果が期待できます。
ページ内リンクの設定を検討してみてください。
