サイトのユーザビリティを高めるためには、ユーザーが求める情報へ素早くジャンプできるようにページ内リンクを設定するのが効果的です。
しかし、HTMLに馴染みがない場合やサイトを立ち上げたばかりだと、疑問点も多いのではないでしょうか。
そこで、これからページ内リンクを設定する人向けに、設置する意味や具体的な設定方法について解説していきます。
ページ内リンク（アンカーリンク）とは？
ページ内リンクは「アンカーリンク」とも呼ばれており、クリックすることでページ内の指定した部分に移動できます。サイトの目次部分にページ内リンクが設定されていることが多いので、利用したことがあるのではないでしょうか。ページ内リンクはHTMLでアンカー要素を記述したり、プラグインを使用することで動作させることが可能です。また、ページ内リンクはアンカーテキストとジャンプ先のコンテンツの整合性を合わせることが重要になります。
WEBサイトにページ内リンクを設置する意味
ページ内リンクを設置することで、SEOへのプラスの影響やサイト全体の使いやすさを向上させるなどのメリットがあります。
使いやすいサイトにする上で必要不可欠な技術なので、サイトの離脱率が高い場合は積極的に設置してください。
ページ内リンクのメリット
ユーザーがサイト内で求めている情報を探しているときに、ページの情報量が多く見つけづらいと他のサイトへ離脱してしまいます。
しかし、ページ内リンクを設置することで必要な情報への素早い移動が可能になり、サイト内の回遊率を高めて直帰率を下げることができます。
また、アフィリエイトや通販サイトの購入ボタンなど、誘導したい場所に直接移動させられる点も大きなメリットになります。
SEOに与える影響
メリットにあったサイトの回遊率向上や直帰率の低下は、SEOに対しても効果があります。
ページ内リンクを設置してユーザーの利便性を高めることで、滞在時間やリピーターの増加も期待できるので、サイトパフォーマンスが向上していきます。
さらに、ユーザーにとって使いやすいサイトは共有されやすく、被リンクの獲得などにも繋がります。
ページ内リンクはSEOに直接的な影響を与えるわけではありませんが、地道に検索エンジンからの評価を高めてくれます。
ページ内リンクの設定方法
ページ内リンク設置するためには、HTMLでアンカー要素を記述する必要があります。
具体的な設定方法は、主に以下の2つになります。
HTMLで記述する
まずは、アンカー要素のname属性で「着地する場所」を指定します。
<a name=”sample”>着地する場所のタイトル</a>
”sample”の部分は任意のidを設定してください。
次に、アンカー要素のhref属性で「ジャンプする場所」を指定します。
<a href=”#sample”>ジャンプする場所のタイトル</a>
この際、着地する場所で設定したidに半角シャープを付けるのを忘れないようにしましょう。
HTML5で記述する
HTML5では、name属性ではなくid属性の使用が推奨されています。
そこで、流れはHTMLの記述と同じままで使用する属性を変更していきます。
まずは、アンカー要素のid属性で「着地する場所」を指定します。
<a id=”sample”>着地する場所のタイトル</a>
次に、アンカー要素のhref属性で「ジャンプする場所」を指定します。
<a href=”#sample”>ジャンプする場所のタイトル</a>
HTML5では、アンカー要素であるaタグ以外にも「div」「span」「h2」などのあらゆる要素でid属性を指定できます。
WordPressのプラグインで設定する方法
WordPressを使用している場合、プラグインの「Advanced Editor Tools」を利用することで簡単にページ内リンクを設置できます。
まずはプラグインの新規追加で「Advanced Editor Tools」を検索し、インストール後に有効化します。
次に、設定の「Advanced Editor Tools」をクリックして「使用しないボタン」の中にある「アンカー」をツールバーにドロップします。
これで設定は完了です。
実際にページ内リンクを設置する場合は、リンクを設置したいテキストを選択して「リンクの挿入ボタン」をクリックし、半角シャープから始まる任意の英数字を入力します。
その後、ページ内の着地させたい場所のテキストを選択し、アンカーボタンをクリックします。
IDの欄に先程の任意の英数字を半角シャープを抜いて入力したら、ページ内リンクの設置は完了です。
ページ内リンクを設定する場合の注意点
ページ内リンクを設定する場合、以下の4つの点について注意する必要があります。
id名を重複させない
id属性は固有の識別子なので、ページ内でid名が重複してはいけないというルールがあります。
複数のページ内リンクに同じid名が指定されている場合、ジャンプする場所が定まらないなどの不具合が発生するので注意してください。
ユーザビリティに注意する
ユーザーがページ内リンクをクリックする際、別ページへ移動するリンクだと認識してクリックしてしまう場合があります。
自分が「同一ページ内にいるのか」「別のページへ移動したのか」で混乱してしまい、ブラウザバックするなどの不要な行動を取らせてしまいます。
そこで、リンクに下矢印のアイコンを付け加えたり、ジャンプ方法をスクロールの動きに設定するなどしてリンクがページ内の移動であることを伝えるようにしましょう。
position:fixedには対策をする
ヘッダーなどを「position:fixed」で固定にしている場合、ページ内リンクの着地点が背景に隠れて見えなくなる可能性があります。
そういったケースは、以下のような記述をして対策をする必要があります。
#anchor{
padding-top:〇〇px;
margin-top:-〇〇px;
}
〇〇の部分に固定された要素の高さを指定することで、ページ内リンクを正しく設定できます。
リンクがページのどこにジャンプするかを確認する
ページ内リンクを設置した後は、必ず目的の場所にジャンプするかを確認してください。
もし意図していない場所にジャンプしてしまう場合は、次の項目で説明する方法で不具合を修正するようにしましょう。
ページ内リンクの不具合への対処法
ページ内リンクを設置した場合に発生する可能性が高い、2つの不具合に対処する方法を解説していきます。
ページ内リンクが飛ばない
ページ内リンクをクリックしてもジャンプしない場合は、以下の方法で対処してください。
- idやname、hrefの属性値を見直して正しく記述する
- id属性とname属性の両方で記述して試す
- jquerymobileを使用している場合は対策する
基本的には記述を見直すことで解決しますが、フレームワークに「jquerymobile」を利用している場合のみ特殊な対策が必要になります。
対策にはリンクにイベント用のクラス名をつけたり、アンカー対策用のスクリプトを記述するなどが挙げられます。
上記の2つでも解決しない場合は、リンク用aタグのAjaxを無効にしてください。
ページ内リンクの位置がずれる
ページ内リンクが意図していない場所にジャンプする場合は、以下の方法で対処してください。
- ページ内リンクのジャンプ先のid属性値にCSSを指定
- jQueryを使用して調整する
位置がずれるのは「position:fixed」を使ってヘッダーを固定しているのが原因なので、上記のどちらかの方法でヘッダーの高さ分を相殺してください。
まとめ
より良いサイトにするためには、ユーザーの利便性を第一に考えて、目的のコンテンツにすぐ辿り着けるように構築することが大切です。
それが直帰率の低下や滞在時間の増加という結果になり、SEOの評価を高めることに繋がります。
ぜひ積極的にページ内リンクを設置して、ユーザビリティの向上を目指しましょう。
