ページ内リンクで記事の途中にジャンプする方法【かんたんなHTML】

悩んでる人
悩んでる人
記事の初めの方に書いた情報を知っている人は、次の項目に進むまでスクロールが面倒で離脱しそう。ページの途中にジャンプできるようにしたいけど、どうやってやればいいの?
たけちよ
たけちよ
このような疑問をたけちよが解決します。
 
記事内をわざわざスクロールせずに必要な情報までリンクで飛ぶ方法を『ページ内リンク』といいます。
かんたんなHTMLを記入するだけで設置ができ、ユーザーの操作性が向上するため離脱率の軽減が期待できる便利な機能です。
 
今回は、初心者でも簡単にできるページの途中に飛ぶリンク『ページ内リンク』の設定方法を解説します。
 
たけちよ
たけちよ
設定方法は超かんたんなので、記事を読めば一瞬で使いこなせますよ。
 
本記事でわかること
  • 同ページの途中に飛ぶリンクの書き方
  • 別ページの途中に飛ぶ方法
  • ページ内リンクがうまく飛ばない原因と対処法

 

ページの途中に飛ぶリンクの設置方法をすぐに知りたい方は、下記のボタンをクリックしてください。

 

 

 

ページ内リンクの全体像

ページ内リンクの全体像

まずは、ページ内リンクの全体像を確認していきます。

 

ページ内リンク 全体像

 

ジャンプ元に『#id名』、ジャンプ先に『id=”id名”』を入力すれば一気に目的のコンテンツまでジャンプすることができます。

 

ページ内リンクの種類は2種類

  • テキストリンク
  • ボタンリンク

 

どちらを使うかはサイトのデザインや好みによるところです。

 

たけちよ
たけちよ
本記事ではテキストリンク、ボタンリンク、どちらも使用しているので比較してみて下さい。
 

ページ内リンクのSEO効果

ページの途中に飛ぶリンク『ページ内リンク』は、下記のようにユーザビリティが高まることで間接的にSEO効果が得られます。

  • スクロールの手間が省けて目的のコンテンツまでたどり着きやすい
  • 直帰率や離脱率の軽減、平均セッション時間の改善に繋がる
  • 利便性の向上でサイテーションや被リンクに繋がる可能性がある

 

サイテーションとは、被リンクはないがSNSやブログでサイト名が言及されることで、SEO評価に影響するとされています。

 

たけちよ
たけちよ
最近ではブログを読むのもスマホが多くなってきているので、スクロールの手間を省けるのはユーザビリティに直結しやすいです。

ページ内リンクの設置方法

ページ内リンクの設置方法

実際に冒頭のボタンリンクで飛んでみた方もいるかもしれませんが、ページの途中に飛ぶリンクの設置方法を解説していきます。

先頭の見出しに戻る方はこちらをクリックしてください。

 

全体像が把握できたら、次は実際にページ内リンクを設置する手順です。

  1. 飛ぶリンク先にidを入力する
  2. 飛ぶためのリンクを作成する

 

このような2ステップで解説します。

 

ステップ①:飛ぶリンク先にidを入力する

飛びたいリンク先に、HTMLで以下のような『id=”id名”』を記述する必要があります。

 

<p id=”test”>ばっちり飛べました<p>

 

上記の記述は<p>にしていますが<div>でも大丈夫です。

見出しタグでもOKとされることもありますが、うまくいかないことがあるのでおすすめしません(後の項目で詳細を解説)。
 
たけちよ
たけちよ
飛ぶリンク先の名前は、自由に決めて大丈夫ですよ。
 

ステップ②:飛ぶためのリンクを作成する

飛ぶためのリンクには、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』で記述してみましょう。

 

たけちよ
たけちよ
今は非対応のプラウザがほとんどないので、idのせいでページ内リンクがうまく飛ばないことはあまり考えにいですけどね。
 

ページ内リンクが重複している

ページ内リンクが重複している場合には、ページ内リンクはうまく飛びません。

例えば一番注意が必要なのは『見出しタグ』です。

 

  • <h2>見出し2</h2>
  • <h3>見出し3</h3>

 

見出しタグは、ほとんどの場合で目次からリンクされている可能性が高いです。

見出しタグにページ内リンクしようとしても、目次からのリンクが優先されるためページ内リンクはうまく飛びません。

 

悩んでる人
悩んでる人
じゃあ、なんでこのページはさっきボタンやテキストから見出しに飛ぶことができたの?
 
見出しタグにページ内リンクをする場合は、以下のような記述にします。
 
リンク元:<a href=”#id名”>○○</a>

リンク先:<p id=”id名”>スペース</p>

見出しタグ:<h2>見出し</2>
 
見出しタグの直上に、飛ぶリンク先のHTMLを記述します。
 

ページ内リンク

 

このように記述することで、見出しへリンクしているようにページ内リンクを設定することができます。

 

まとめ:ページ内リンクでユーザビリティの高いサイト作りをしよう

ページ内リンクでユーザビリティの高いサイト

ページ内リンクで記事の途中にジャンプする方法は以下のとおりです。

 

同ページ内の途中に飛ぶ方法

  • リンク元:<a href=”#id名”>○○</a>
  • リンク先:<p id=”id名”>△△</p>

 

別ページの途中に飛ぶ方法

  • リンク元:<a href=”ページURL#id名”>○○</a>
  • リンク先:<p id=”id名”>△△</p>

 

ユーザーの利便性が向上することでユーザビリティが高まり、結果としてSEO評価にもプラスの効果があります。

ページ内リンクはかんたんなHTMLの記述ですぐに設置することができるので、ぜひ活用をしてユーザビリティの高いサイトを作っていきましょう。

 

ユーザー満足度に関わる重要な要素として他にページ表示速度があります。

▼ページ表示速度についてはこちら
>>ページ表示速度の改善で検索順位がUPする【具体的な5つの方法】

【国内最速!格安レンタルサーバー『ConoHa WING』】

当サイトで契約中のWordPress向けレンタルサーバー!

国内最速サーバー速度&抜群の安定性

初期費用無料&独自ドメイン永久無料

これ1つで簡単にWordPressブログが始められます。

初回限定価格!ブログ運営1ヶ月間の徹底サポート
こちらをクリック
初回限定価格!ブログ運営1ヶ月間の徹底サポート
こちらをクリック