アンカーリンクとは？使い方やSEOの効果を解説

最近はブログやホームページが簡単に作れるようになったので、アンカーリンクについて知らない方も多いかもしれません。
アンカーリンクの基本的な使い方や仕組みを理解することは、SEO対策を行う上で重要です。
この記事では、アンカーリンクの使い方やSEOの効果を解説します。

アンカーリンクは指定の場所に移動できるリンク

アンカーリンクとは、Webページ内の指定の場所にリンクを貼る機能です。
アンカーリンクを活用することで、ユーザーがWebページをより快適に閲覧することができます。
アンカーリンクは、同じページ内でも使用することができます。
特にスマートフォンでは、幅が狭いためどうしても縦長のサイトになってしまいます。
一番下までコンテンツを読んで、一番上までもう一度スクロールしなければならないのはユーザーにとって非常に不便です。
アンカーリンクを使用することで簡単に重要な箇所やトップページに戻ることができるため、ユーザーの利便性が向上します。
また、アンカーリンクはWebページの構造を明確に伝える役割も果たします。

アンカーリンクの使い方

アンカーリンクには、リンク先の指定方法によって大きく5つの種類があります。

それぞれ組み合わせることで、webページ内の異なるセクションやコンテンツにスムーズに移動できるアンカーリンクを作成することができます。
用途に合わせて最適なアンカーリンクを設置しましょう。

href属性

href属性は、アンカーのリンク先のURLを指定するための属性です。
aタグの一つで、指定したURLがアンカーリンクのリンク先となります。

href属性は、次の形式で指定します。

href=”URL”
URLは、リンク先のWebページのURLです。
指定したいリンク先のドメインを「https://○○○.jp」と入力し、それに対応する表示名を「ブログ」と入力します。
これにより、「ブログ」という表示のアンカーリンクが完成します。

target属性

target属性を指定すると、アンカーリンクをクリックしたときに新しいウィンドウでリンク先のページが開きます。
href属性は同じページでの移動ですが、target属性はユーザーが元のページを見返しながらリンク先のページの閲覧が可能です。

具体的に入力するコードは以下の通りです。

target属性は、

「リンク先のURL」にはリンクしたいページのURLを入力し、「新規タブ」にはリンク名を記入することで、新しいタブでリンクを開くアンカーリンクが完成します。

rel属性

rel属性は、リンク先のリレーションシップを指定するための属性です。
タグに「rel=”属性値”」を追加することで、リンク先との関連性を示すことができます。
アンカーリンクでは、通常「nofollow」を指定して、検索エンジンのクローラーがリンクをたどらないようにすることが一般的です。
例えば、以下のように記述します。

広告を掲載する場合は「sponsored」を、コメント欄やフォーラムなどユーザー主体のコンテンツには「ugc」を使用することがおすすめです。
「sponsored」はリンクが広告であることを示し、「ugc」はユーザー主体のコンテンツであることを示します。
これにより適切な関連性を示し、検索エンジンの評価に影響を与えることなくリンクを設置することができます。

id属性

id属性は固有の識別が可能なアンカーリンクで、特定のページを指定できます。
リンク元で指定したhref属性の値と、ジャンプ先の要素のid属性が一致している必要があります。
また、id属性を活用することで、CSSやJavaScriptなどのプログラミング言語から簡単に特定して処理することができます。
具体的なタグとして、次のような入力が必要です。

上部のタグが出発点、下部のタグが到着点です。

onclick属性

onclick属性は、リンクをクリックした際に特定のJavaScriptコードを実行するための属性です。
ボタンクリックに対して文字列の表示やお知らせのポップアップなど、ユーザーとのインタラクティブなコミュニケーションを促進するために効果的な技術です。

button要素にonclick属性を設定し、JavaScriptを使用しています。
ボタンがクリックされたとき、alert()関数を呼び出してメッセージを表示する仕組みです。

アンカーリンクを使うメリット

アンカーリンクを使うことで、以下のメリットがあります。

ユーザビリティが向上する

アンカーリンクを適切に使用することで、ユーザビリティが向上します。
例えば、長いWebページにアンカーリンクを貼っておけば、ユーザーは必要な箇所にすぐに移動することができます。

また、アンカーリンクを関連するコンテンツに貼っておけば、ユーザーが興味のある情報を見つけやすくなります。
たとえば、低カロリー料理レシピの最後に、他の低カロリー料理に関するリンクを配置します。
これにより、ユーザーは別のページに行かなくても関連情報を簡単に見つけられ、利便性が向上します。

反対に、アンカーリンクを設置しないとユーザーは何度も異なるページに遷移する必要があり、情報を見つけることが難しくなります。
また、アンカーリンクのテキストはリンク先の内容が一目で理解できる簡潔な文言にすることで、SEOの効果を最大化できます。

インデックスに繋がる

アンカーリンクは、検索エンジンのクローラーによるページのインデックス促進の役割も果たします。
インデックスとは、検索結果のページとして検索エンジンのデータベースに追加されることを指します。
検索結果に表示されるためには、検索エンジンのクローラーによるインデックスが最低限必要です。

たとえば、アンカーリンクにキーワードを貼っておけば、検索エンジンはそのキーワードがWebページの重要な内容であると認識します。
これにより、Webページの検索エンジンからの評価が向上し、上位表示される可能性が高くなります。

アンカーリンクを使う際の注意点

アンカーリンクを使う際に、気を付けておきたいことが5つあります。

それぞれ詳しく解説します。

リンクの色を変える

アンカーリンクが十分に識別できない状態で使用されると、ユーザーが混乱する可能性があります。
アンカーリンクの色は、通常のテキストとは違う色にすることでユーザーがリンクをクリックしやすいようにしましょう。
一般的には、黒色よりも目立ちユーザーが認識しやすい青色が使用されます。

さらにアンカーリンクを目立たせるためには、明るめの青色を選択することがおすすめです。
暗い青色は黒に近い色に見えてしまうため、アンカーリンクに気づけないこともあります。

IDが重複しないようにする

アンカーリンクのIDは、ページ内に重複しないようにしましょう。
重複すると、リンク先のページが正しく表示されなくなる可能性があります。
複数のアンカーリンクを配置する際には注意が必要です。

わかりやすいテキストで表示する

アンカーリンクのテキストは、リンク先のページの内容を簡潔に表すようにしましょう。
「詳しくはこちら」といった誘導だけを目的とした文言ではなく、具体的なキャッチコピーを意識して選ぶことが重要です。

リンク評価をしたくないときはnofollow属性を使う

リンクの評価を他のサイトに伝えたくない場合、nofollow属性を利用すると有効です。
nofollow属性を使用することで、リンク先が検索エンジンのクローラーに認識されなくなります。
低品質なサイトや悪質なコンテンツを提供しているサイトから自分のサイトへのリンクが設置されると、その影響を受けて悪い評価を受ける可能性があります。
このような影響を避けるためにも、リンク評価を伝えたくない場合にはnofollow属性を適用しましょう。

具体的に使用する方法として、rel属性とcontent属性の2つがあります。
rel属性は特定のリンクにnofollow属性を適用し、content属性はページ全てのリンクに対してnofollow属性を適用します。
用途に合わせて使い分けましょう。

position:fixed;を使用するとずれが生じる

アンカーリンクにposition:fixed;属性を付けると、アンカーリンクが画面に固定されます。しかしこの場合、アンカーリンクのリンク先が固定要素の背景に隠れてしまい、表示されないという問題が生じます。
このような状況に対処するための方法は複数ありますが、最も簡単なCSSを使った方法をご紹介します。

リンク先の要素に固定要素の高さ分（上記の例では100px）のpadding-topを適用します。
これにより、リンク先の要素を固定要素の下にずらすことが可能です。

しかし、このままでは元のレイアウトが崩れてしまう可能性があります。
そこで、margin-top: -100px;を使用して要素を元の位置に戻すことで、レイアウトの崩れを防ぐことができます。

まとめ

ページ内リンクを利用して、webサイトのユーザビリティを向上させましょう。
ユーザーの利便性を最優先に考え、求める情報やコンテンツにスムーズに導く構築が重要です。
ただし、目的のコンテンツにアクセスしても、そのコンテンツの品質が低い場合ユーザーの満足度は低下してしまいます。
そのため、高品質なコンテンツを作成しSEO対策をすることが大切です。
SEO対策についてお困りの方は、NUVOにご相談ください。
webサイトの構築からコンテンツの運用まで、すべてお任せいただけます。

https://d-nuvo.com/index.html