HTMLでページ内リンク（ジャンプ）をスクロールする方法
HTMLでページ内リンク（ジャンプ）を適切に設定し、スムーズにスクロールさせながら、ユーザービリティを高めることが大切です。
今回は、ページ内リンク（ジャンプ）のHTML記述法、ページ内リンク（ジャンプ）のスクロール方法、ページ内リンク（ジャンプ）のSEO効果について中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。
ページ内リンク（ジャンプ）とは？
ページ内リンク（ジャンプ）とは、同じページ内の特定部分にジャンプ（遷移・移動）するリンクのことです。
ページ内リンク（ジャンプ）は、HTMLファイルでアンカー要素（aタグ）を記述し、動作させることが可能です。
ページ内リンク（ジャンプ）は、アンカーテキストとリンク先コンテンツの整合性を合わせることが大切です。
ページ内リンク（ジャンプ）のHTML・HTML5記述法
ページ内リンクのHTML・HTML5の記述法は以下のようになります。
HTMLの記述法
①アンカー要素（aタグ）のname属性で属性値を指定する（※属性値は任意です）
|
1 |
<a name="title">タイトル</a> |
②アンカー要素（aタグ）のhref属性の属性値に①で指定したidを#（半角シャープ）を付けて指定する
|
1 |
<a href="#title">タイトルの位置へジャンプする</a> |
HTML5の記述法
①アンカー要素（aタグ）のid属性で属性値を指定する（※属性値は任意です）
|
1 |
<a id="title">タイトル</a> |
②アンカー要素（aタグ）のhref属性の属性値に①で指定したidを#（半角シャープ）を付けて指定する
|
1 |
<a href="#title">タイトルの位置へジャンプする</a> |
上記のよう、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つに分かれます。
- テキスト文字をデザインする 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のせいだった！ページ内ジャンプできる修正方法
まとめ
ページ内リンクをうまく使って、ユーザビリティを高めましょう。
具体的には、ユーザーの利便性を考慮して、目的のコンテンツにいち早く導いて上げるようにサイト構築することが大切です。
しかし、目的のコンテンツにたどり着いても、そのコンテンツの質が低ければ、ユーザーの満足度は下がってしまいます。
なので、良質なコンテンツにすぐ辿りつけるようにして、よりユーザーの満足度の高いサイトとなるようにSEO対策を進めることが重要です。
SEO対策しても検索順位が上がらない…なぜ？
SEO対策しても検索順位が上がらない…なぜ？
検索順位が上がらない理由は、SEO対策の質が低いからです。
例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やす、内部リンクの最適化など疎かにします。
この場合、SEO対策の質が下がります。
そうなれば、ページやサイト自体の品質が上がらないので、Googleに評価されづらくなります。
結果、検索順位が上がらないというわけです。
こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策をご案内します（無料）。
