- 同ページの途中に飛ぶリンクの書き方
- 別ページの途中に飛ぶ方法
- ページ内リンクがうまく飛ばない原因と対処法
ページの途中に飛ぶリンクの設置方法をすぐに知りたい方は、下記のボタンをクリックしてください。
ページ内リンクの全体像
まずは、ページ内リンクの全体像を確認していきます。
ジャンプ元に『#id名』、ジャンプ先に『id=”id名”』を入力すれば一気に目的のコンテンツまでジャンプすることができます。
ページ内リンクの種類は2種類
- テキストリンク
- ボタンリンク
どちらを使うかはサイトのデザインや好みによるところです。
ページ内リンクのSEO効果
ページの途中に飛ぶリンク『ページ内リンク』は、下記のようにユーザビリティが高まることで間接的にSEO効果が得られます。
- スクロールの手間が省けて目的のコンテンツまでたどり着きやすい
- 直帰率や離脱率の軽減、平均セッション時間の改善に繋がる
- 利便性の向上でサイテーションや被リンクに繋がる可能性がある
サイテーションとは、被リンクはないがSNSやブログでサイト名が言及されることで、SEO評価に影響するとされています。
ページ内リンクの設置方法
実際に冒頭のボタンリンクで飛んでみた方もいるかもしれませんが、ページの途中に飛ぶリンクの設置方法を解説していきます。
先頭の見出しに戻る方はこちらをクリックしてください。
全体像が把握できたら、次は実際にページ内リンクを設置する手順です。
- 飛ぶリンク先にidを入力する
- 飛ぶためのリンクを作成する
このような2ステップで解説します。
ステップ①：飛ぶリンク先にidを入力する
飛びたいリンク先に、HTMLで以下のような『id=”id名”』を記述する必要があります。
<p id=”test”>ばっちり飛べました<p>
上記の記述は<p>にしていますが<div>でも大丈夫です。
ステップ②：飛ぶためのリンクを作成する
飛ぶためのリンクには、HTMLで以下のような『#id名』の記述が必要です。
<a href “#test”>ここをクリックする</a>
リンクを張るためには『href=』の記述が必要ですが、クラシックエディターであれば簡単に挿入できます。
リンクしたいテキストを選択して、上記のアイコンをクリックするだけで『herf=』の記述になります。
それでは実際にリンクしてみます。
ばっちり飛べました
以上で、同ページの途中に飛ぶためのページ内リンクができます。
別ページの途中に飛ぶ方法
次に、別ページの途中に飛ぶ方法を解説します。
基本的な方法は同ページ内でリンクすることと同じですが、一部に違いがあるので確認しておきましょう。
ステップ①：飛ぶページのリンク先にidを入力する
飛びたいページのリンク先に、HTMLで『id=”id名”』を記述する必要があります。
<p>タグ、<div>タグ、どのような属性値でも構いません。
ステップ②：ページを飛ぶためのリンクを作成する
ページをまたいでリンクを飛ぶ場合は、以下のようなHTMLの記述になります。
<a href=”https://chiyo-blog.com#test”>ここをクリックする</a>
『飛びたいページのURL#id名』にすると指定したページ内へ行き、idタグのついた位置まで一気にジャンプすることができます。
ページ内リンクがうまく飛ばない原因
ページ内リンクがうまく飛ばない原因は、以下の3つが考えられます。
- 属性値が間違っている
- プラウザがidに非対応のまま
- ページ内リンクが重複している
それぞれ詳しく説明します。
属性値が間違っている
属性値とは、idやhrefのことで、この記述に間違いがあるとうまくリンクが飛びません。
- リンク元のHTMLが『href=”#id名”』または『href=”ページURL#id名”』になっているか
- リンク先のHTMLが『id=”id名”』になっているか
記述ミスがないかをしっかりと確認しましょう。
プラウザがidに非対応のまま
現在ページ内リンクの記述は『id』ですが、以前は『name』でした。
『name』の場合の記述は以下のとおり
- リンク元：<a href=”#name名”>○○</a>
- リンク先：<p name=”name名”>△△</p>
もしも利用しているプラウザが『id』に非対応の可能性がある場合は、あえて『name』で記述してみましょう。
ページ内リンクが重複している
ページ内リンクが重複している場合には、ページ内リンクはうまく飛びません。
例えば一番注意が必要なのは『見出しタグ』です。
- <h2>見出し2</h2>
- <h3>見出し3</h3>
見出しタグは、ほとんどの場合で目次からリンクされている可能性が高いです。
見出しタグにページ内リンクしようとしても、目次からのリンクが優先されるためページ内リンクはうまく飛びません。
リンク先：<p id=”id名”>スペース</p>
見出しタグ：<h2>見出し</2>
このように記述することで、見出しへリンクしているようにページ内リンクを設定することができます。
まとめ：ページ内リンクでユーザビリティの高いサイト作りをしよう
ページ内リンクで記事の途中にジャンプする方法は以下のとおりです。
同ページ内の途中に飛ぶ方法
- リンク元：<a href=”#id名”>○○</a>
- リンク先：<p id=”id名”>△△</p>
別ページの途中に飛ぶ方法
- リンク元：<a href=”ページURL#id名”>○○</a>
- リンク先：<p id=”id名”>△△</p>
ユーザーの利便性が向上することでユーザビリティが高まり、結果としてSEO評価にもプラスの効果があります。
ページ内リンクはかんたんなHTMLの記述ですぐに設置することができるので、ぜひ活用をしてユーザビリティの高いサイトを作っていきましょう。
ユーザー満足度に関わる重要な要素として他にページ表示速度があります。
▼ページ表示速度についてはこちら
>>ページ表示速度の改善で検索順位がUPする【具体的な5つの方法】
