アンカーリンクとは
アンカーリンクとは、クリックするとWebページ内の指定した場所や、同じWebサイトの別のWebページへ遷移するリンクのことです。例えば、目次にアンカーリンクを設置すれば、該当箇所にすぐ移動できるため、ユーザーは目的の情報に迅速にたどり着けるようになるため、ユーザーエクスペリエンス(UX)を向上できます。また、内部リンクの構造を最適化することでクローリングの効率化もできるため、SEOにもポジティブな影響が期待できます。
アンカーリンクと似た仕組みで「ハイパーリンク」というものがあります。アンカーリンクは同じWebページの別の箇所や、同じWebサイトの別ページに遷移するものであるのに対し、ハイパーリンクはWebページ以外の文書(Excelやメールなど)内のリンクも含みます。
アンカーリンク使用時のSEOへの影響
アンカーリンクの設置には、SEOにおいて次のような影響があります。
・離脱率の低下
・サイト評価の向上
■離脱率の低下
コンテンツが長い場合、スクロールをして目的の情報を探すことはユーザーにとってストレスになります。そこで、アンカーリンクを設定しUXを高められると、目的の情報を迅速に見つけられるため、直帰率改善の一助となります。
■サイト評価の向上
アンカーリンクを適切に設置すると、クローラーがリンク先のページを発見しやすくなり、インデックスされやすくなります。また、内部リンクの構造の最適化にも繋がるため、サイト評価の向上が期待できます。
ただし、アンカーリンクが不自然に長い、文脈に沿わないといった場合や、リンク先が不自然な場合などがあると、マイナスな評価を受ける可能性があります。アンカーリンクは、あくまでも「UXの向上のために必要なリンクを設置する」と意識することが大切です。
アンカーリンクの使い方
アンカーリンクには、主に次のような種類があり、それぞれ特徴や指定方法などが異なります。
・href属性
・id属性
・target属性
・nofollow属性
・alt属性
■href属性
href属性は、遷移させる先のリンクのURLを指定する方法です。「href」属性は入れ子にすることはできません。
href属性では、以下のようにテキストを入力します。
<a href="リンク先のURL">「表示したいリンク名」</a>
「リンク先のURL」部分には、指定したいリンク先のURLを入力し、「表示したいリンク名」にはリンクで表示する名称を入力します。このアンカーテキストの入力についてはGoogleもベストプラクティスとして紹介しています。アンカーテキストについての詳細は後述します。
サイト内の別ページに遷移したい場合は、絶対URLまたは相対URLどちらでも可能ですが、他サイトへのリンク先を設定する場合は絶対URLで設定します。
■id属性
id属性とは、HTMLを固有に識別するための属性のことです。同一ページの特定の場所(アンカーポイント)に遷移先を指定することが可能です。例えば、目次から見出しに移動させたい時などに使われます。
id属性では、以下のようにテキストを入力します。
リンク先:
<p id="test">「表示したいテキスト」</p>
リンク元:
<a href="#test">「表示したいテキスト」</a>
「test」の部分には、id名が区別できるように任意の名称を記入します。なお、id属性に付ける名前は、ページ内で重複してはいけません。つまり、それぞれを固有の名称にする(ユニークな状態にする)必要があるということです。これは、同じ名称のid属性が複数あると、遷移先が分からない状態になってしまうためです。
■target属性
target属性は、リンクをクリックしたときのウィンドウやフレームの開き方を指定する方法です。targetを「blank」に設定することで、新しいタブでページを開かせることができます。。遷移した後もタブを切り替えれば元のページを閲覧できるため、ユーザーは現在のページを閉じずに確認でき、離脱率の改善につながる可能性があります。
target属性のアンカーリンクのテキストは、次のように記述します。
<a href="リンク先のURL" target="_blank">「表示したいテキスト」</a>
また、上記の「blank」の部分を「self」と指定すれば現在のタブやウィンドウのままリンクを開くことも可能です。
■nofollow属性
nofollow属性は、自サイトとリンク先とを関連付けたくない場合や、リンク先のページをサイトからクロールさせないようにしたい場合に指定する方法です。
信頼性や質の低いサイトへのリンクなど、リンクにnofollow属性のアンカーリンクを設定すると、リンク評価を受け渡すことや検索エンジンにクロールされることを防止できます。
nofollow属性のテキストは次のように記載します。
<a href="リンク先のURL" rel="nofollow">「表示したいテキスト」</a>
また、nofollow属性はmetaタグを活用して設定する方法もあります。metaタグを用いる場合は、次のように記載します。
<meta name="robots" content="index,nofollow" />
■alt属性
alt属性のアンカーリンクは、テキストリンクではなく画像にリンクを設定する際に指定します。検索エンジンは画像に含まれる情報を正しく把握できない場合がありますが、alt属性のアンカーリンクが設置してあれば、検索エンジンの画像認識を補助することができます。
alt属性のアンカーリンクを記述するテキストは以下の通りです。
<a href="https://www.○○○.jp"><img src="画像.jpg" alt="画像の説明">
「画像の説明」は簡潔にわかりやすく、画像が閲覧できない場合でもその画像の内容が把握できる文にしましょう。関連するキーワードを不自然に詰め込むと、キーワードの乱用としてペナルティを受ける可能性もあるため注意が必要です。
アンカーリンク使用時の注意点
アンカーリンクの効果を最大限に引き出せるよう、使用する際には次の3点に注意しましょう。
・分かりやすいアンカーテキストを用意する
・認識しやすいリンクにする
・リンク先のページに適切に遷移できるか確認する
■分かりやすいアンカーテキストを用意する
アンカーテキストは、リンク先の内容を端的に表せるよう、シンプルかつ分かりやすいものにします。「詳しくはこちら」といったような文言よりも、読者がリンク先の内容をイメージできるように具体的な内容を示すのが理想です。
簡潔明瞭なテキストは、ユーザーの理解力やUXを高め、サイト全体のユーザビリティ向上にも貢献します。また、アンカーテキストは、検索エンジンがWebページの内容を把握するためにも大切なものです。抽象的な文言のアンカーテキストは、リンク先との関連性を判断しづらく、サイト全体の評価が下がる原因になります。
■認識しやすいリンクにする
ユーザーが一目でリンクだとわかるような工夫をすることが大切です。例えば、リンク箇所をほかの部分とは異なる色にしたり、下線や太字で強調したりする方法があります。一般的にリンクは青色であることが多いため、青色で強調することでユーザーにとっても「リンクである」と認識しやすくなることが多いです。
アンカーリンクには、テキスト形式のほかにボタンや画像を利用したデザインもあります。ブランディングに合わせて適した形式を使い分けましょう。
■リンク先のページに適切に遷移できるか確認する
アンカーリンクの設定が完了した後は、実際にリンク先が正常に表示されているか忘れずに確認しましょう。リンク切れやリンクに間違いがあると、正しいページが表示されないためユーザーはが欲しい情報を得ることができず、悪いユーザー体験となり離脱率が高まる可能性があります。また、場合によってはリンク間違いが原因で検索エンジンから低評価を受けてしまう可能性もあります。
もし、ページ遷移ができない場合や意図しないページ遷移が生じた場合は、ヘッダーを「position:fixed;」にしている可能性があります。この問題に対処する際の代表的な方法としては、CSSで調整する方法やJavaScriptで調整する方法が挙げられます。
アンカーリンクを適切に活用して、SEO効果を最大化しよう
アンカーリンクを設定することで、より上質なWebページにすることが可能です。適切な場所にアンカーリンクを設定すると、知りたい情報に迅速にたどり着けるため、ユーザーの理解力やUXの向上に役立ちます。また、検索エンジンがクロールする際にもリンク先を見つけやすくなり、SEO効果も期待できます。
本記事で解説したアンカーリンクの使い方や注意点などを理解して、ぜひサイト運営に役立ててください。
SEOのパートナーならヴァリューズ
ヴァリューズでは、SEO対策に必要な戦略設計から、効果検証に至るまでの一気通貫のご支援をしております。国内最大規模のWeb行動ログのデータベースからCVに繋がりやすいKWを特定し、貴社のSEO対策のお力添えをさせていただきます。
ダウンロード【無料】|VALUES Data Promotion ご紹介資料
資料のダウンロードURLを、ご入力いただいたメールアドレスに送付させていただきます。
ご登録頂いた方にはVALUESからサービスのお知らせやご案内をさせて頂く場合がございます。
大学では経済学部で主に会計学を学び、2024年に新卒でヴァリューズに入社しました。現在はデータプロモーション局にて、弊社プロモーション事業のフロントを担当しています。