アンカーリンクという言葉を聞いたことがある人も多いかと思いますが、どのようなマーケティング、WEB施策なのかを明確に説明することが難しい人が多いのではないでしょうか。
実は、ホームページ・ブログ制作において製品の品質を更に上げたいなら、アンカーリンクがとても重要です。「TOPへ戻る」という文言は、一番馴染みがあるのではないでしょうか。
ページ最下部まで読んで、また最初までスクロールして戻るのは億劫ですよね。
アンカーリンクを上手く使いこなすことで、SEO対策になり、ユーザー満足度の向上にも繋がります。
本記事では、アンカーリンクを利用するメリットや使い方、注意点などを紹介していきます。
ぜひ参考にしてください。

目次

アンカーリンクの意味は？

アンカーリンクとは、WEBページを閲覧しているとき、クリックするとページ内の指定の場所へ移動できるリンクのことです。ページ内リンクとも呼ばれます。

アンカーとは英語でいかりをおろす、固定するという意味です。

指定したい場所にアンカーリンクを設置して固定し、ユーザーが欲しい情報に辿り着けるようになります。

WEBページを訪れたユーザーは、自分の探したいコンテンツがなかなか見つからないと離脱してしまう可能性が高いです。

ユーザーが見たいコンテンツへすぐに遷移し、知りたいコンテンツを探す手間や時間を解消できるので、アンカーリンクはとても重要です。

アンカーリンクの使い方

アンカーリンクをHTMLで利用するときの使い方は、3パターンに分けられます。

リンク先に指定したい要素に合わせて、選んでください。

【href属性】リンク先のURLを指定する方法

aタグの一つでリンクを指定したいときにこのタグを使います。

表示させたいリンク名称

「表示させたいリンク名称」のところに指定したいリンク先のURLを設定します。

「表示させたいリンク名称」をクリックすると、設定したURLに遷移する仕様です。

【id属性】ページ内の特定位置を作成する方法

aタグの二つ目で固有に識別するためのアンカーリンクを作成する方法です。

idを通して、ページの特定の箇所に遷移先を指定できるメリットがあります。

id属性のアンカーリンクを作成する場合は、以下のような文字入力が必要になります。

テキスト

「test」に指定したいアンカーリンクの名称を入れ、「テキスト」に表示するテキストを入れましょう。

【target属性】別ページまたは別ウィンドウで表示させる方法

aタグの三つ目は新しいタブページを開くアンカーリンクを作成する方法です。

target属性は別ウィンドウで新たにページが開きます。target属性のアンカーリンクを使用する場合は、以下のような文字入力が必要になります。

新規タブ

新規タブ部分にリンク名を入れてください。

ユーザーが元ページを見返せるようになるので、利便性が高いです。

【nofollow属性】信頼できないページに対し、リンク設定する場合

リンク先とサイトを関連付けたくないときや、リンク先のページをサイトからクロールさせないようにしたい場合の設定方法です。

nofollow属性のアンカーリンクを付ける場合は、以下のような文字入力が必要になります。

テキスト

「テキスト」に表示するテキストを入れましょう。

【alt属性】画像リンクを設定して、画像の説明をする

Googleなど検索エンジンは、画像の内容把握が難しいです。

画像の説明を加えて、検索エンジンに対して内容を伝えることができます。

alt属性のアンカーリンクを使用する場合は、以下のような文字入力が必要になります。

https://www.○○○.jp”>”画像の説明”

「画像の説明」は簡潔にSEOを意識したものを入れると良いでしょう。