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

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

2016/08/24内部対策[最終更新日]:2017/03/06
このエントリーをはてなブックマークに追加

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

今回は、ページ内リンク(ジャンプ)のHTML記述法、ページ内リンク(ジャンプ)のスクロール方法、ページ内リンク(ジャンプ)のSEO効果を中心に解説したいと思います。

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

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR

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

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

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

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

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

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

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

<a name=”title”>タイトル</a>

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

<a href=”#title”>タイトルの位置へジャンプする</a>

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

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

<a id=”title”>タイトル</a>

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

<a href=”#title”>タイトルの位置へジャンプする</a>

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

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

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

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

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

jQuery とっても簡単、ページ内リンクでスムーズスクロール
jQuery でページ内リンクを全てスムーズスクロールにしよう | phiary

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

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

ページ内リンクを活用することで、以下のようなSEO効果が考えられます。

・ユーザビリティの向上
ページ内リンクの設置で、目的の関連コンテンツにすぐ辿りつけ、理解性・操作性が高まり、ユーザービリティ向上につながる。
わかりやすく使いやすいページは、お気に入り追加やブックマークされ、リピーターも増えやすくなり、SEO効果が期待できる

・直帰率・平均セッション時間の改善
目次(ページ内リンク)の設置で、目的のコンテンツがすぐ見つかれば、直帰率平均セッション時間の改善につながり、SEO効果が期待できる

SEO対策で上位奪取に必要な21の基本知識」では、SEO効果が期待できる対策を中心に解説してますので、ぜひご参考ください。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

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

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

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

・JavaScriptで調整する
jQueryを使用して、ページ内リンクのジャンプ先位置がずれるのを調整する

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

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

①テキスト文字をデザインする
CSS(スタイルシート)で、テキスト文字の色や大きさ、太さなどをデザインしながら、ページ内リンクを設置する

②ボタンをデザインする
画像やCSS(スタイルシート)で、ボタンの形や色、大きさなどデザインしながら、ページ内リンクを設置する

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

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

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

「ページトップへ戻る」の設置により、グローバルメニューなどサイト内の他コンテンツへのアクセスを促し、ページ/セッション改善によるサイトパフォーマンスの向上が期待できます。

「ページトップへ戻る」は、デザイン性や操作性が大切です。
使いやすく、見やすい「ページトップへ戻る」にし、ページ内リンクの効果を高めましょう。

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

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

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

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

id属性
・ページ内リンクのジャンプ先(HTML5推奨)
・CSSも指定可能

name属性
・ページ内リンクのジャンプ先(いまでも使えるが、非推奨)

class属性
・CSSでアンカー要素(aタグ)のスタイル調整

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

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

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

・属性値が間違っている
idやname、hrefの属性値を見直し、正しい記述に改善する

・ブラウザが非対応
ページ内リンクのジャンプ先に指定する、アンカー要素(aタグ)にid属性、name属性両方記述する

・jquerymobileを使ってる
リンクにイベント用のクラス名をつける、アンカー対策用スクリプトを書く、リンク用aタグのAjaxを無効にするなどの対策をする
※参考:ページ内リンクが飛べないのはjquerymobileのせいだった!ページ内ジャンプできる修正方法

まとめ

効果的なページ内リンクで、良質なコンテンツを見せることが大切です。

ユーザーが望むコンテンツを増やし、適切にリンク活用しながら、順位上昇を目指しましょう。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly