【ページ内リンクが飛ばない】原因を解決して100％ジャンプさせる方法

ページ内リンク（アンカーリンク）は、任意の場所（コンテンツ情報）スクロールできるため、とても便利な機能です。

しかし、HTML5の記述を行いリンク元とリンク先双方を設置したにも関わらず、なぜか正常に作動しない…。

下記のような悩みや問題があって困っていませんか？

ページ内リンクが飛ばない！といっても、原因は1つだけではありません。

この記事では、複数の原因を1つずつ紹介し、あわせて対処法も解説しています。HTML5の細かな記述も掲載しているため、WordPress初心者やHTML5が全く分からない方でも、コピペするだけで問題を解決できます。是非参考にしてみて下さい。

KAZUKAZU

今すぐ問題を解決したい方は、目次をご覧下さい。

ページ内リンクって何？

ページ内リンクとは、クリックすると同一ページの任意の場所にジャンプ移動できるリンクになります。ページ内リンク以外にも、アンカーリンクとも呼ばれています。

このページ内リンクは、アンカーテキストだけでなく画像や見出しといった任意の場所に移動できます。クリックをすれば、気になるコンテンツ情報にスクロールできるため、ユーザーの利便性を高めることができます。

KAZUKAZU

実際に体験して頂くと分かりやすいため、以下のリンクを一度クリックしてみて下さい。

ここをクリックしてみてね。

文章のリンク先

見出しのリンク先（ここまで飛ぶよ）

ページ内リンクに似たような機能でいえば、WordPressのWebサイトに目次を表示できる「TinyMCE Advanced」プラグイン（無料）や、画面右下の矢印からページトップへ戻る「jqueryのスクロール機能」もあります。他にも類似したツールやサービスもあります。

どれも内部リンクになりますが、自分でリンク先を指定できない（見出しやトップページ以外は指定できない）ため、ページ内リンクとは少し特徴が異なります。

KAZUKAZU

下記のページにもページ内リンクを設置しています。こちらも参考にしてみて下さい。

ページ内リンクのSEO効果

ページ内リンクを設置するとSEO効果を期待できます。これはユーザーが目的のコンテンツ情報に辿り着くことができるため、ユーザーの満足度（ユーザービリティ）が高まります。

いわゆるUX（ユーザー体験）も向上し、ページ内の回遊率が増加や直帰率の低下、さらに平均セッション時間の増加にも繋がります。

ユーザーにとって利便性の高いページは、ブックマークやお気に入り登録にも繋がり、リピーターとなります。

リピーターとなれば当然アクセス数も増加し、ページ内リンクを設置したページも評価が上がります。他にも、ユーザーがSNSなどで共有や被リンクを行えば、Webサイト全体の評価も高まります。

最終的に検索順位も上がり、SEO効果が高まっていきます。

KAZUKAZU

ページ内リンクを設置すると、オーガニック検索結果でアンカーリンクが設置されることもあります。

ページ内リンクの注意点

ページ内リンクはユーザビリティを高めるメリットがありますが、逆にデメリットもあります。

ページ内リンクを使いすぎると、ユーザーは目的のコンテンツ情報に辿り着けず迷子になります。他にもリンク元とリンク先の表示が分かりにいと、見逃すこともあります。

KAZUKAZU

リンク元は「〇〇はこちら」、リンク先は「〇〇について」など、具体的な文言を記載することがポイントです！

他にも、リンク元とリンク先が近すぎてしまうのも注意です。ユーザーの利便性を損ねてしまい、むしろクリックしたことで余計な手間をかける結果となります。

ページ内リンクは、ユーザーの利便性を高めるコンテンツの一部です。ユーザーファーストを意識して設置すると良いです。

ページ内リンクの正しい記述方法（HTML5）

ページ内リンクは、以前までは「HTML」を主流で使われていましたが、最近は「HTML5」が主流になっています。

KAZUKAZU

以下が、htmlの記述の違いになります。

HTMLでは、アンカー属性（aタグ）のnameタグが使われていましたが、非推奨になりました。HTML5では、nameタグの代わりに、idタグが推奨され、使われるようになりました。

KAZUKAZU

HTML5の記述方法を以下にまとめますね。

簡単に説明すると、href属性はスタート地点（ジャンプ元）です。id属性はゴール地点（ジャンプ先）です。

href属性は自由に指定できますが、「#」を必ず入れて下さい。id属性も自由に指定できます。（こちらは「#」が不要です）

そして、href属性とid属性の文字を合わせることがポイントです。

KAZUKAZU

例えば、リンク元が「"#1"」であればリンク先は「"1"」になります。

【ページ内リンクが飛ばない】8つの原因と解決方法

「ページ内リンクが飛ばない！」といっても、原因は1つだけではありません。複数あります。場合によっては合併していることもあるため注意して下さい。一覧でまとめると、以下のように7つの原因があります。

KAZUKAZU

各原因と解決方法に関しては、以下の項目で詳しく解説しますね。

リンク元のhref属性に「#」が抜けている

href属性に「#」が抜けてしまうと、ジャンプしません。以下の記述に修正してみて下さい。

リンク先のid属性に「#」が入っている

id属性に「#」が入っていると、ジャンプしません。以下の記述に修正してみて下さい。

半角を全角にしている

HTML5の記述は半角文字になります。これは、リンク元とリンク先のいづれも共通です。

例えば、「#」を「＃」にしていないか、もう一度確認してみて下さい。

「””」が抜けている

リンク元とリンク先のいづれも、「”」を使います。これは、二重引用符（ダブルクォーテーション）と言います。

「””」と二重引用符（ダブルクォーテーション）を2つ記載するため、抜けていないかもう一度確認してみて下さい。

「”」を「''」になっている

「”」が正しいのですが、間違った「''」を記載していないか、もう一度確認してみて下さい。

間違った「'」は、引用符（シングルクォーテーション）と言います。引用符（シングルクォーテーション）を2回入力すると、二重引用符（ダブルクォーテーション）に似ている文字になり、間違いやすいです。

「”」に修正して下さい。

KAZUKAZU

僕はこの「'」に何度もやられ、解決するまで長時間格闘しました…。

同じid属性を複数設置している

id属性の文字は任意に記載できますが、同一ページ内に同じ文字は複数使えません。

同じid属性が複数設置していないか、もう一度確認して見て下さい。複数ある場合は以下のように記述を変更してみて下さい。

目次系プラグインが干渉している

プラグインを使用して目次を設置している場合は、プラグインが干渉している可能性があります。

特にページ内リンクで設定している「任意の文字を数字」に設定している場合、ページ内リンクがうまく作動しません。目次に戻ってしまうおかしなエラーが発生します。

解決策としては、ページ内リンクに設定している「任意の文字を数字以外」に変更してみて下さい。

KAZUKAZU

僕の場合、SUGOI MOKUJI（すごいもくじ）というプラグインをインストールしたら、ページ内リンクがおかしくなりました…。

jQuerymobileを利用している

スマホページを作成できるjQuerymobileを利用していると、リンク元の「#」が無効化されてしまいエラーになって、ページ内リンクが飛ばないことがあります。

対策として、aタグに「data-ajax=”false” 」を追記することで解決できます。以下の記述を参考にしてみて下さい。

KAZUKAZU

修正が終わったら、Bliskのようなスマホ表示ができるブラウザでチェックしてみて下さい。

ページ内リンク（ジャンプ）がずれてしまう場合

ページ内リンクが飛ぶ（ジャンプ）けれど、すれてしまう原因はヘッダーが原因です。これは、ヘッダーを「position:fixed；」で固定しているため、CSSで調整してみて下さい。

他にも、JavaScriptで調整する場合はjQueryを使用することで、ずれを調整することができます。

まとめ

ページ内リンクが飛ばない場合は、まずは原因を追究してみて下さい。

大半の原因がリンク元もしくはリンク先のHTML5の記述が間違っています。他にもjQuerymobileを利用している場合は、aタグに追記することで解決できます。

このように、正しいHTML5の記述を行えばページ内リンクが正常に作動します。ユーザーにとっても、目的の情報に瞬時に辿りつくことができるため、利便性の高いコンテンツとなります。

そして結果的にSEO効果も期待できるため、是非試してみて下さい。