ページ内リンクが飛ばない原因は？指定したリンク先へジャンプできない場合の解決方法や設置時の注意点も解説

「同じ記事内でリンクを設置したのに、うまく飛ばない」というのは、WordPressを使い始めて間もない方によくある悩みの1つです。

ページ内リンクは、同じ記事内の好きな場所に移動できるリンクを指します。とても便利な機能ですが、少しでも使い方を間違えると正しく機能しなくなってしまうため、WordPress運営者を悩ませています。

そこで本記事では、ページ内リンクの仕組みや設置方法、ページ内リンクが機能しない原因や解決方法などについて詳しくまとめました。この記事を読むことで、自分でページ内リンクを設置したり、リンク先へジャンプできない問題を解決できるようになることでしょう。

ページ内リンクとは

ページ内リンクとは、クリックするとページ内の好きな場所に移動できるリンクです。

記事内の文章量が多いと、読者はどこに何が書かれているのかを見つけにくくなってしまいます。そこでページ内リンクが役に立ちます。記事内の好きな場所に移動できるリンクを設置することで、読者は無駄にスクロールすることなく、目的の説明にたどり着けるようになるからです。

ページ内リンクを導入するメリットは読者の利便性の向上に留まらず、利便性の向上によって読者満足度が高まることでSEOの評価もプラスになることが期待できます。

もし「記事の離脱率が高い」「記事の読者満足度を高めたい」と悩んでいるのであれば、ページ内リンクを積極的に活用することをおすすめします。

ページ内リンクが飛ばない原因と対処法

ページ内リンクが飛ばない場合、いくつかの原因が考えられます。解決策を見つけるためには明確な理由を見つけることが必要です。ここでは、ページ内リンクが飛ばない原因をいくつかのパターンに分けて解説します。

リンク元のhref属性に「#」が含まれていない

ページ内リンクが飛ばない原因の1つ目は、リンク元のhref属性に「#」が含まれていないからです。

そもそもページ内リンクを機能させるには、リンク元のhref属性に「#」を付ける必要があります。リンク元のhref属性に「#」が含まれていないと、リンク先に飛ぶことができなくなってしまうからです。

リンク元のhref属性はWordPressのテキストエディタ(HTMLの表示機能)で確認できるので、ページ内リンクが飛ばない場合は該当箇所を確認してみてください。

リンク先(アンカー)のid属性に「#」が含まれている

ページ内リンクが飛ばない原因の2つ目は、リンク先(アンカー)のid属性に「#」が含まれているからです。

「#」はリンク元に付けるものであり、リンク先に付けてしまうとリンクが正しく働かなくなってしまいます。

もしページ内リンクが飛ばない場合は、WordPressのテキストエディタ(HTMLの表示機能)を開いて、リンク先のid属性に「#」が含まれていないかを確認してみましょう。

プラグインの設定ができていない

ページ内リンクが飛ばない原因の3つ目は、プラグインの設定ができていないからです。

HTMLを直接編集するのが難しかったり、ページ内リンクを設置するたびに毎回HTMLを編集するのが面倒な方にとってプラグインは非常に便利です。

ですが、プラグインの設定を完了させていなかったり、通常とは違う設定に変更しているとリンクの挙動が変わってしまうことがあります。

もしページ内リンクが飛ばない場合は、プラグインの設定を確認してみましょう。

＼ サイトのお困りごとを相談する ／

ページ内リンクを設定する方法

ここからは、ページ内リンクを設定する方法を具体的に解説していきます。「ページ内リンクを作ってみたいけど、やり方がわからない…」という方は、ぜひ参考にしてみてください。

HTMLを使用して手動でアンカーリンクを設置

まず、HTMLを使用して手動でアンカーリンクを設置する方法を紹介します。この方法は、以下の2ステップで行います

①リンク元を設置する

②リンク先の飛び先(アンカーリンク)を設置する

このようにリンク元とリンク先の2つを設置することで、ページ内リンクが機能します。

まずリンク元ですが「<a href=“#xxx“>リンク元の文章や画像</a>」のように設置します。

つづいて、リンク先の飛び先(アンカーリンク)ですが、以下のように設置します。

■H2の見出しにアンカーを設置する場合

<h2 id=”xxx”>見出し</h2>

■画像(imgタグ)にアンカーを設置する場合

<img src=”画像のURL” id=”xxx” />

■文字にアンカーを設置する場合

<p id=”xxx”>リンク先の文字</p>

「xxx」は任意で文字列に変更できますが、リンク元とリンク先のアンカー名は必ず合わせてください。

＜注意事項＞

・idは半角英数字とアンダーバー(_)やハイフン(-)などの一部記号のみ使用可能です

・idの先頭は必ずアルファベットであること、記号や数字を先頭に記載すると正常に動作しません

プラグインを利用してWordPressでアンカーリンクを設置

プラグインを利用してWordPressでアンカーリンクを設置する方法を紹介します。アンカーリンクを設置するたびに「毎回HTMLを編集するのは面倒！」という方におすすめです。

プラグインを使ってアンカーリンクを設置するなら、「Advanced Editor Tools (previously TinyMCE Advanced)」がおすすめです。WordPressのエディタにショートカットボタンを追加するプラグインで、簡単にページ内リンクを作成できます。

ステップ1、リンク元のアンカー名を設定する

まずプラグインをインストールして有効化します。記事の作成画面へ移動し、アンカーテキストにハイパーリンクを設定します。別ページにリンクする外部リンクではURLや記事のIDを設定しますが、内部リンクでは「#」で始まるアンカー名を記載します。

ステップ2、リンク先のアンカー名を設定する

つづいてリンク先に設定したい部分を選択し、メニューの「挿入」から「アンカー(リンクの到達点)」を選びましょう。先ほど紹介したTinyMCE Advancedプラグインをインストールしていれば、ボタンが表示され、ボタンからも設定できるようになります。

ステップ3、リンク先のアンカー名は「#」を抜いた文字列を入力する

リンク先のアンカー名ですが、リンク元で設定したアンカー名から「#」を抜いた状態で設定しましょう。TinyMCE AdvancedプラグインをインストールしていればHTMLを直接修正する必要がないため、WordPressのビジュアルエディタだけで作業ができ、作業時間を効率化できます。

ページ内リンク設置のメリット

記事の中にページ内リンクを設置することで、さまざまなメリットがあります。ここでは具体的にどのようなメリットがあるのかを紹介していきます。

サイト内の回遊率を高めて直帰率を下げることができる

ページ内リンクのメリットの1つ目は、サイト内の回遊率を高めて直帰率を下げることができる点です。

テーマが大きい記事であればあるほど記事内の情報量が増えてしまい、読者が探している情報が見つけにくくなってしまいます。その結果、「欲しい情報が見つからない」と判断されて他サイトへの離脱が起こり、直帰率が上がってしまうのです。

ですが、ページ内リンクを用意することで、読者は必要な情報にすぐにたどり着けるようになります。さらにリンクによって記事やサイト内を自由に行き来できるため、回遊率も高まり、離脱しにくくなることで結果的に直帰率を下げることにも繋がります。

UX(ユーザー体験)の面からSEOに対して効果が期待できる

ページ内リンクのメリットの2つ目は、UX(ユーザー体験)の面からSEOに対して効果が期待できる点です。

ページ内リンクを設置すると、読者が知りたい情報にすぐにアクセスできるため、読者の満足度が向上します。昨今Googleを始めとした検索エンジンでは、SEOの評価指標にUX(ユーザー体験)を盛り込んでいます。そのため、ページ内リンクを活用して読者の満足度を高めることで、UX(ユーザー体験)の向上に繋がり、結果的に記事やサイト全体のSEOの評価が高まるのです。

オーガニック検索結果にアンカーリンクが設置されることがある

ページ内リンクのメリットの3つ目は、オーガニック検索結果にアンカーリンクが設置されることがある点です。

検索エンジンのオーガニック検索結果を見ると、通常は記事タイトルやメタディスクリプションがヒットします。ところがページ内リンクを設置することで、検索結果の画面にアンカーリンクのリンク先が表示されることがあります。その結果、オーガニック検索結果画面からの流入経路が増えることで、ユーザーの流入数の向上につながるのです。

ページ内リンク設置のデメリット

ページ内リンクのデメリットとしては、多用し過ぎると読みにくくなってしまう点です。

ページ内リンクを設置することで利便性が高まりますが、多用し過ぎてリンクだらけになってしまうと、読者はどこから読めばいいのかわからなくなり、満足度の低下につながります。

記事の利便性の向上に役立つページ内リンクですが、使い過ぎには注意しましょう。

ページ内リンク使用時の注意点

ページ内リンクを使用する際は、注意した方が良い点がいくつかあります。ここでは、ページ内リンクの使用時の注意点をご紹介します。

リンク元とリンク先がすぐ近くにあるときは使わないほうがいい

ページ内リンクの注意点の1つ目として、リンク元とリンク先がすぐ近くにあるときは使わないようにしましょう。

ページ内リンクを設置する目的は、読者が記事を見やすくすることです。ところが、すぐ近くに内容が書かれているにも関わらず、リンクを設置してしまうと、どこを読んでいたのかがわかりにくくなり、かえって読者を混乱させてしまいかねないからです。

リンクテキスト名はリンク先のタイトルにする

ページ内リンクの注意点の2つ目として、リンクテキスト名はリンク先のタイトルにしましょう。

リンクテキスト名(つまりアンカーテキスト)はユーザーだけでなく、検索エンジンにとってもわかりやすい文章にする必要があります。

・ここです

・こちらをクリック

このようにリンク先の内容がわからない表現は、ユーザーにとっても検索エンジンにとっても良くありません。そこでリンクテキスト名はリンク先と関係が深い文字列、つまり「ページ内リンク先のタイトル」に設定することをおすすめします。こうすることでユーザーも検索エンジンも「リンク先に何があるのか」を理解した上で、リンク先に遷移することができるからです。

ページ内リンクが飛ばないなどのサイトのお困りごとはウェブココル株式会社

本記事ではページ内リンクの設置方法やメリット、注意点などを紹介しましたが、いかがでしょうか？

もしページ内リンクが飛ばないなどのサイトのお困りごとがあれば、ウェブココル株式会社にご相談ください。

ウェブココル株式会社ではサイト制作者様へ高品質なSEOコンサルティングを行い、Web集客の課題解決に貢献すべく日々活動しています。

サイト制作にお悩みの方や何かご質問がある方は、お気軽にお問い合わせください。

＼サイトのお困りごとを相談する／