SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

HTMLでページ内リンク(ジャンプ)をスクロールする方法

HTMLでページ内リンク(ジャンプ)を適切に設定し、スムーズにスクロールさせながら、ユーザービリティを高めることが大切です。

今回は、ページ内リンク(ジャンプ)のHTML記述法、ページ内リンク(ジャンプ)のスクロール方法、ページ内リンク(ジャンプ)のSEO効果について中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

HTMLでページ内リンク(ジャンプ)をスクロールする方法

ページ内リンク(ジャンプ)とは?

ページ内リンク(ジャンプ)とは、同じページ内の特定部分にジャンプ(遷移・移動)するリンクのことです。

ページ内リンク(ジャンプ)は、HTMLファイルでアンカー要素(aタグ)を記述し、動作させることが可能です。

ページ内リンク(ジャンプ)は、アンカーテキストとリンク先コンテンツの整合性を合わせることが大切です。

ページ内リンク(ジャンプ)のHTML・HTML5記述法

ページ内リンクのHTML・HTML5の記述法は以下のようになります。

HTMLの記述法

①アンカー要素(aタグ)のname属性で属性値を指定する(※属性値は任意です)

②アンカー要素(aタグ)のhref属性の属性値に①で指定したidを#(半角シャープ)を付けて指定する

HTML5の記述法

①アンカー要素(aタグ)のid属性で属性値を指定する(※属性値は任意です)

②アンカー要素(aタグ)のhref属性の属性値に①で指定したidを#(半角シャープ)を付けて指定する

上記のよう、HTML5ではアンカー要素(aタグ)のname属性の指定が非推奨となり、id属性の使用が推奨されました。
アンカー要素(aタグ)以外に、h1やp、divなどのあらゆる要素でid属性が指定でき、今までより幅広く便利に活用できそうです。

ちなみに、対応してないブラウザを考慮するために、name属性・id属性、両方指定する手段もあります。

ページ内リンク(ジャンプ)のスクロール方法 ※jquery活用

ページ内リンクでジャンプ先へスムーズにスクロールさせるjqueryを活用した方法が以下のようなサイトで確認できます。

当ブログ(SEOラボ)でも、ページを読み進めると、画面右下の矢印からページトップへ戻る、jquery使ったスムーズなスクロールを実装してます。

ページ内リンク(ジャンプ)のSEO効果

ページ内リンクを設置することで、ユーザビリティが高まるので、SEO効果が期待できます。
例えば、設置したページ内リンクを踏んで、スクロールなどの手間を掛けずに目的のコンテンツへすぐ辿り着けたとします。
そうなれば、ユーザー満足度が高まるので、その分Googleから評価されやすくなるというわけです。

また、こうしてユーザーの利便性を高めれば、直帰率や平均セッション時間の改善、リピーターの増加にもつながるので、サイトのパフォーマンスが向上しやすくなるでしょう。
さらに、利便性の高いページは、お気に入り追加やブックマーク、共有されて参照されやすくなります。
結果的に、サイテーションや被リンク獲得の促進に繋がるので、その点でもSEO効果が見込めるようになるでしょう。

なので、ページ内リンクの設置含めて、ユーザビリティを高めるようにSEO対策することが、上位表示を目指すためのポイントとなります。

ページ内リンク(ジャンプ)の位置がずれる原因と調整法

ページ内リンクのジャンプ先位置がずれる原因として、「ヘッダーをposition:fixed;で固定してる」ケースが多くみられます。
このケースを改善するため、以下のような調整法があります。

  • CSSで調整する
    ページ内リンクのジャンプ先のid属性値にCSSを指定して、位置がずれるのを調整する
  • JavaScriptで調整する
    jQueryを使用して、ページ内リンクのジャンプ先位置がずれるのを調整する

※参考:position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

ページ内リンク(ジャンプ)のデザイン

ページ内リンクのデザインは、以下のよう大きく2つに分かれます。

  1. テキスト文字をデザインする
    CSS(スタイルシート)で、テキスト文字の色や大きさ、太さを調整したり、下線を用いるなどしてデザインしながら、ページ内リンクを設置する
  2. ボタンをデザインする
    画像やCSS(スタイルシート)で、ボタンの形や色、大きさなどデザインしながら、ページ内リンクを設置する

ちなみに、当ブログ(SEOラボ)でも、テキストやボタンをデザインしながら、ページ内リンクを設置してます。

ページ内リンク(ジャンプ)と「ページトップへ戻る」

ページ内リンクの「ページトップへ戻る」を設置し、ユーザービリティを高めることが大切です。

「ページトップへ戻る」の設置により、グローバルメニューなどサイト内の他コンテンツへのアクセスを促し、ページ/セッション改善によるサイトパフォーマンスの向上が期待できます。
「ページトップへ戻る」は、デザイン性や操作性が大切です。
使いやすく、見やすい「ページトップへ戻る」にし、ページ内リンクの効果を高めましょう。

一昔前、テキスト文字主体の「ページトップへ戻る」が多くみられました。
現在は、jqueryなどのサンプルスクリプトが流行し、デザイン性・操作性が高い「ページトップへ戻る」ボタンが多くみられます。

ページ内リンク(ジャンプ)とアンカー要素(aタグ)のid、name、class属性について

ページ内リンクのアンカー要素(aタグ)にid、name、class属性が指定でき、それぞれ以下のような役割があります。

  • id属性
    「ページ内リンクのジャンプ先(HTML5推奨)」や「CSS」の指定が可能
  • name属性
    ページ内リンクのジャンプ先(いまでも使えるが、非推奨)
  • class属性
    CSSでアンカー要素(aタグ)のスタイル調整

基本的に、id属性でページ内リンクのジャンプ先を指定、class属性でデザイン調整しながら、ページ内リンクを設置しましょう。
ちなみに、非対応ブラウザを考慮して、name属性・id属性両方記述し、ページ内リンク設置する方法もあります。

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

ページ内リンクが飛ばない原因として、以下のような対処法があります。

まとめ

ページ内リンクをうまく使って、ユーザビリティを高めましょう。
具体的には、ユーザーの利便性を考慮して、目的のコンテンツにいち早く導いて上げるようにサイト構築することが大切です。

しかし、目的のコンテンツにたどり着いても、そのコンテンツの質が低ければ、ユーザーの満足度は下がってしまいます。
なので、良質なコンテンツにすぐ辿りつけるようにして、よりユーザーの満足度の高いサイトとなるようにSEO対策を進めることが重要です。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら