【イラスト付き】ページ内リンクとは？必要性や設定方法も初心者向けに詳しく説明！

ブルーちゃん！

Webサイトについて勉強しているんだけど、ページ内リンクってどんなものか教えてくれないかしら？

ありがとう、ブルーちゃん！

はじめに、そもそもページ内リンクとは何かについて解説するね。

ページ内リンクとは、同じWebページ内の特定の場所にジャンプするリンクのことを指すよ。

ユーザーが目的の情報に迅速にアクセスできるようになるから、特に長いページではより利便性が向上するんだ。

よくある例としては、目次やページ上部への「戻る」ボタンなどに使用されることが多いね。

OK！設定する必要がある理由として、主に以下2つがあげられるよ。

ここからは、それぞれの必要性について解説していくね。

1つ目は、ユーザーにとって使いやすいサイトにつながる点だよ。

ページ内リンクを適切に設定することで、ユーザーが目的の情報に素早くアクセスできるようになるんだ。

結果としてユーザーの利便性が向上し、ページ離脱率を下げる効果も期待できるよ。

うん！特にユーザーのニーズが高そうな場所には、積極的に設定していくと良いよ。

2つ目が、GoogleからSEO的に良い評価を得ることにつながることだよ。

前提として、Googleはユーザーにとって使いやすいサイトを高く評価するんだ。

ページ内リンクを使うとコンテンツの階層がよりわかりやすくなり、検索エンジンにとってもサイトの構造が理解されやすくなるよ。

うん。SEO対策を行う場合は、ぜひ設定してみてね。

OK！設定方法としては大きくわけて以下2つがあるよ。

それじゃあここからは、ページ内リンクの設定方法についてそれぞれ解説していくね。

HTMLはWebページを構成するための言語で、うまく使えばリンクをはじめ、さまざまな機能を設定できるんだ。

まず、見出しなどリンク先に設定したい箇所に、id属性と呼ばれるコードを設定しよう。

たとえばh2の見出しに「section1」というリンクを設定する場合は、「h2」のあとに「id="section1"」と記載するよ。

次に、href属性で「#」に続けて、リンク先の「id」を指定するよ。

つまり、「href="#section1"」となるね。

HTMLでコードを設定するのは少し知識が必要だから、特に初心者の方は次に説明するWordPressでの設定方法がおすすめだよ。

WordPressでは、直感的に操作できる「ビジュアルエディタ」を利用して、ページ内リンクを簡単に設定できるんだ。

そうだよね！

ビジュアルエディタでは、文字をドラッグで選択し、リンクボタンを選択するだけで該当のリンクを埋め込めるよ。

良い質問だね、ピンクちゃん。

実はページ内リンクは、以下3つの箇所に設定できるんだよ！

ここからは、ページ内リンクを設定できる箇所について、詳しく見ていこう。

1つ目が、テキストだよ。

ページ内リンクを設定する箇所としてはもっとも設置しやすい箇所で、テキストをクリックすると特定の場所に移動させられるんだ。

そうだよね。ユーザーにとってもクリックしやすく、簡単に利用できるよ。

2つ目が、リンクボタンだよ。

WordPressなどではボタン形式でリンクを設定できるから、視認性が高くなるんだ。

たとえば、お問い合わせフォームへ飛ばしたい場合など、CVにつながるような場面で視覚的に強調したいときに適しているよ。

3つ目が、画像だよ。

画像にページ内リンクを埋め込む設定も、ユーザー目線で思わずクリックしたくなるからおすすめだよ。

その通り！画像にリンクを付けることで、視覚的な誘導効果を高められるんだ。

ページ内リンクを設定したけどうまく動かない場合に備えて、原因と対策も説明しておくね！

ページ内リンクが飛ばない場合の原因は、主に以下の3つだよ。

対処法とともに、解説していくね。

ページ内リンクが飛ばない1つ目の原因は、タグが正しく設定されていないことだよ。

「id」「href」属性などのつづり間違いや、文字列が誤っていることが原因でリンクが機能しないことがあるんだ。

うん。不要なスペースが入っているだけでも機能しなくなるから、タグの記載には注意しておこう。

2つ目が、id属性に非対応のブラウザを使用していることだよ。

基本的に現在のブラウザはほとんどid属性に対応しているけど、非常に古いブラウザでは正しく機能しない場合があるんだ。

古いブラウザの場合、ブラウザ自体を更新するか、HTMLの「name属性」でリンクを設定する必要があるよ。

3つ目の原因は、設定したリンクが他の場所と重複していることだよ。

複数の箇所に、同じURLや文字列のリンクを設定すると、目的の場所にうまく飛ばなくなる場合があるんだ。

コンテンツを作成した後には、プレビュー画面などでリンクの挙動をチェックしよう。

ページ内リンクを設定したものの、位置がずれてしまう場合があるんだ。

固定ヘッダーの設定が間違っている場合が多いよ。

ユーザーがページを下にスクロールさせているときに、サイトのヘッダー（最上部）を画面上の同じ位置に固定するためのデザインだよ。

この固定ヘッダーの設定がうまくいっていないと、ページ内リンクがずれてしまうんだ。

対策として、Webサイトのスタイルを変更する「CSS」を以下のように編集してみよう。

固定したヘッダーの高さを「padding-top」で指定してから、「margin-top」にマイナスの値を設定することでずれを調整できるんだ。

最後に、今回紹介した内容についておさらいしておくね。

ピンクちゃん、ページ内リンクについて理解できたかな？

それは良かった！またいつでも聞いてね〜。