情報が豊富でユーザビリティが高いサイトでは、リンクが効果的に使用されています。
ユーザーが求める情報へ快適な移動を可能にするリンクには、情報を探すストレスによる離脱を防止する効果が期待できます。
今回は、Webページの使いやすさを飛躍的に向上させる「ページ内リンク」について解説します。
そもそもページ内リンクとは何か
ページ内リンクとは、1つのWebページ内で指定した場所へ移動できるリンクです。
移動先をHTMLアンカーで固定するため、アンカーリンクとも呼ばれます。
Webページが5000文字以上の場合、スクロールしながら必要な情報を探す事は、多忙なユーザーにとってストレスです。
わずか数秒のタイムロスでWebサイト全体の評価が下がり、ユーザーが閲覧を諦め離脱する原因にもなります。
快適なWebページには、内容が一目で分かる目次やユーザーの心理に寄り添ったページ内リンクが設置されています。
快適さの向上は離脱を防止するだけでなく、ユーザーの満足度やWebサイトへの信頼感を高めます。
結果としてリピーターの増加に役立つため、常にユーザー視点でのリンクの設置が重要です。
ページ内リンクの種類
ジャンプタイプ
ジャンプタイプはページ内リンクを設定したテキストやボタンから、あらかじめ指定した部分へ一瞬でジャンプします。
・メリット
遷移に時間が掛からないためスピーディーな閲覧が可能です。
・デメリット
ページ内をジャンプするため、ユーザーはリンク先が同一ページ内なのか、違うWebページなのかを判別しにくい傾向があります。
自分がWebページ内のどこにいるのかが分からないと、リンク元へ戻ろうとしてブラウザバックで検索結果に戻ってしまい、そのまま離脱する可能性があります。
スムーススクロール（smooth scroll）タイプ
スムーススクロールタイプは、ページ内リンクをクリックすると、滑らかに画面が動き指定先へ移動します。スムーズスクロールとも呼ばれます。
・メリット
ユーザーはリンク元から、どこに移動したのかを把握できるため、次の移動への判断が容易になります。
興味のある部分へ戻る、先に進むというページ内での回遊行動が容易になります。
・デメリット
コンテンツが多い場合、スクロールが画面4つ分以上になると遷移に時間がかかったり、目まぐるしく動く遷移画面がユーザーに不快感を与える可能性があります。
スムーススクロールを使用する際には、移動する範囲や速度に注意が必要です。
seo対策におけるページ内リンクの重要性
ページ内リンクによるユーザビリティの向上は、seo対策にも重要な効果を持ちます。
求める情報へ容易にアクセスできるWebページは快適です。
現代のユーザーは、短時間で価値を求める傾向があります。
そのため、リンクによる快適な回遊が可能なWebページは、ユーザーからその価値を認められます。
滞在時間が長くリピート率が高い、ユーザーに評価されるサイトは、必然的に検索エンジンからも高い評価を得られます。
ユーザーの快適さを追求しつつ無駄を削り、短時間でユーザーの期待を上回る価値を提供することを目標にサイトを構築する必要があります。
地道なページ内リンクの作成は、快適さの基礎となる部分です。
既に現代のユーザーは目次のある快適なWebページに慣れており、重要キーワードや心理的に知りたいと感じるキーワードにリンクがあることを求めています。
ページ内リンクを積極的に活用しましょう。
WordPressでページ内リンクを設定する方法
WordPressのブロック設定を利用する
WordPressには、簡単にページ内リンクを設定する機能があります。
1.リンク先のid名（id属性）を決める
投稿画面でリンク先となるブロックを選択し、画面右側の設定画面を開きます。
設定画面にはメイン設定とブロック設定のタブがあります。
ブロック設定タブの方を選択し、設定下部にある「高度な設定」を開きます。
「HTMLアンカー」に、移動先を示す「id名」を入力します。
「id名」はリンク元にも入力するため、分かりやすい名前を設定しましょう。
2.リンク元を設定する
リンク元となるテキストを選択し、表示されたツールバーのリンクボタン「（ー）」をクリックします。
リンク先を指定する欄に「id名」を入力します。
入力する際には先頭に「#」をつけるため、「#id名」での入力となります。
スムーススクロールタイプの設定
スムーススクロールタイプのページ内リンクを作成するには、テーマの機能を使用します。
WordPressのテーマ「SWELL」ではページ内リンクを作成すると、自動でなめらかな移動になります。
プラグインを利用する
プラグインを利用してページ内リンクを設定することも可能です。
プラグインは「Advanced Editor Tools」を使用します。
1.プラグインを新規追加する
WordPressのダッシュボードメニューから、プラグインの新規追加を選択、画面右上に「Advanced Editor Tools」を入力し検索します。
「今すぐインストール」をクリックし、有効化します。
2.リンク機能の設定をする
WordPressの設定の画面で「Advanced Editor Tools」を選択します。
表示されているエディターメニューへ、「使用しないボタン」の中から「アンカー」ボタンをドラッグ＆ドロップします。
変更を保存します。
3.ページ内リンクを作成する
リンク先になるテキストを選択します。
エディターメニューのアンカーボタンをクリック、「id名」を入力してOKをクリックします。
リンク元のテキストを選択します。
エディターメニューのリンクボタンをクリックして「#id名」を入力して完了です。
WordPressのページ内リンクの不具合とその対処法
ページ内リンクを作成する際に発生しやすい不具合は、リンクをクリックしても目的の場所へ飛ばないケースです。
1.id名（id属性）に間違いがある
リンク先の「id名」とリンク元の「id名」に誤字がないか両方チェックします。
リンク元の「id名」に「#」が追加され「#id名」になっていることを確認します。
id属性に使用できる文字は、半角アルファベットの大文字と小文字、英数字です。
記号は「‐（ハイフン）」「：（コロン）」「.（ピリオド）」「_（アンダーバー）」の利用が可能ですが、入力ミスなどエラー防止のため避けた方が無難です。
id名の最初の一文字はアルファベットを使用します。
2.id名が重複している
Webページ内にリンクが複数あり、同じ「id名」が設定されている場合、先に検知されたリンク先が反映されるため不安定になります。
リンク先の「id名」が複数ある場合は、「link1」「link2」「link3」のように、同じ「id名」でも数字を足すなど簡単な変更を加えることで問題が解決します。
3.目次のリンクが優先される
WordPressのテーマによっては、目次が自動的に作成されます。
そのため見出しなどに個別で設定したページ内リンクが反映されないことがあります。
その場合は、移動先に見出しを選択することを避け、見出しの前後にリンク先を設定します。
リンクの移動先を明確にする
ユーザーがWebページ内の位置を把握できるようにリンクを工夫します。
スムーズスクロールであれば、ページ内の位置が分かりやすいため問題ありません。
ジャンプタイプのリンクの場合は、リンク元テキストに移動先がページ内であることを知らせる表記があることが理想です。「下部へ」など、分かりやすい言葉を添えましょう。
まとめ
今回は、Webページの快適さを向上させる、ページ内リンクについて解説しました。
スピーディーな移動が特徴のジャンプタイプ、なめらかな移動で閲覧中のページ内の位置が把握しやすいスムーススクロールどちらにもメリットがあります。
ジャンプタイプのリンクを使用する場合はユーザーがWebページ内で迷わないように配慮し、スムーススクロールの場合は、スクロール範囲を考慮してリンクを配置します。
設置したリンクは実際にクリックして、ユーザー視点で不快感や戸惑いを感じないかチェックすることも大切です。
「短時間で正確な答えを得られる」Webページを、現代のユーザーは必要としています。
適切なリンクを配置し、Webページのパフォーマンスを向上させましょう。
