アンカーリンクという言葉を聞いたことがある人も多いかと思いますが、どのようなマーケティング、WEB施策なのかを明確に説明することが難しい人が多いのではないでしょうか。
実は、ホームページ・ブログ制作において製品の品質を更に上げたいなら、アンカーリンクがとても重要です。「TOPへ戻る」という文言は、一番馴染みがあるのではないでしょうか。
ページ最下部まで読んで、また最初までスクロールして戻るのは億劫ですよね。
アンカーリンクを上手く使いこなすことで、SEO対策になり、ユーザー満足度の向上にも繋がります。
本記事では、アンカーリンクを利用するメリットや使い方、注意点などを紹介していきます。
ぜひ参考にしてください。
目次
アンカーリンクの意味は？
アンカーリンクとは、WEBページを閲覧しているとき、クリックするとページ内の指定の場所へ移動できるリンクのことです。ページ内リンクとも呼ばれます。
アンカーとは英語でいかりをおろす、固定するという意味です。
指定したい場所にアンカーリンクを設置して固定し、ユーザーが欲しい情報に辿り着けるようになります。
WEBページを訪れたユーザーは、自分の探したいコンテンツがなかなか見つからないと離脱してしまう可能性が高いです。
ユーザーが見たいコンテンツへすぐに遷移し、知りたいコンテンツを探す手間や時間を解消できるので、アンカーリンクはとても重要です。
関連記事：クロール（クローリング）とは？意味やGoogleへのリクエスト方法、SEOとしての基礎を解説！
アンカーリンクの使い方
アンカーリンクをHTMLで利用するときの使い方は、3パターンに分けられます。
リンク先に指定したい要素に合わせて、選んでください。
【href属性】リンク先のURLを指定する方法
aタグの一つでリンクを指定したいときにこのタグを使います。
<a href=”https://○○○.jp”>表示させたいリンク名称
「表示させたいリンク名称」のところに指定したいリンク先のURLを設定します。
「表示させたいリンク名称」をクリックすると、設定したURLに遷移する仕様です。
【id属性】ページ内の特定位置を作成する方法
aタグの二つ目で固有に識別するためのアンカーリンクを作成する方法です。
idを通して、ページの特定の箇所に遷移先を指定できるメリットがあります。
id属性のアンカーリンクを作成する場合は、以下のような文字入力が必要になります。
<p id=”test”>テキスト
「test」に指定したいアンカーリンクの名称を入れ、「テキスト」に表示するテキストを入れましょう。
【target属性】別ページまたは別ウィンドウで表示させる方法
aタグの三つ目は新しいタブページを開くアンカーリンクを作成する方法です。
target属性は別ウィンドウで新たにページが開きます。target属性のアンカーリンクを使用する場合は、以下のような文字入力が必要になります。
<a href=”https://○○○.jp” target=”_blank”>新規タブ
新規タブ部分にリンク名を入れてください。
ユーザーが元ページを見返せるようになるので、利便性が高いです。
【nofollow属性】信頼できないページに対し、リンク設定する場合
リンク先とサイトを関連付けたくないときや、リンク先のページをサイトからクロールさせないようにしたい場合の設定方法です。
nofollow属性のアンカーリンクを付ける場合は、以下のような文字入力が必要になります。
<a href=”https://○○○.jp” rel=”nofollow”>テキスト
「テキスト」に表示するテキストを入れましょう。
【alt属性】画像リンクを設定して、画像の説明をする
Googleなど検索エンジンは、画像の内容把握が難しいです。
画像の説明を加えて、検索エンジンに対して内容を伝えることができます。
alt属性のアンカーリンクを使用する場合は、以下のような文字入力が必要になります。
<a href=”https://www.○○○.jp”><img src=”画像.jpg” alt=”画像の説明”>
「画像の説明」は簡潔にSEOを意識したものを入れると良いでしょう。
関連記事：HTMLとは？簡単なHTMLタグの基本からCSSの基礎まで初心者にもわかりやすく解説
SEO対策にも効果あり！アンカーリンク設置は何が良い？メリットとは？
WEBページにアンカーリンクを作成することは、SEO対策にも繋がります。
なぜなら、ユーザーが知りたい情報を閲覧しているとき、関連しているアンカーリンクを設置することで、新たに有益な情報を手に入れられるので、満足度も上がるからです。
アンカーリンクを使用していないユーザーは、知りたい情報を色々なページで確認したり、サイト内で何度も別ページに移動しなければならなかったり、とてもストレスを感じることでしょう。
知りたい情報を探すのがとても大変になります。
欲しい情報がすぐ見つかる利便性
ユーザーは、知りたい情報を求め、WEBページを閲覧します。
ページ内にリンクがないWEBページは、目的の情報を見つけるのに時間がかかるため、ユーザーは使いづらいと感じることが多いでしょう。
だから、アンカーリンクを利用して、ページ内リンクを作ることで、ユーザーが素早く目的の情報へ遷移でき、満足度を上げられます。
そうすることでユーザビリティが高まり、お気に入りやブックマークしてくれる人も増えるでしょう。
ユーザーの利便性が高められると、ページに長く滞在することになり、直帰率が改善されます。
また、リピーターの増加にもつながるので、サイトのパフォーマンスが向上し、SEO対策にも効果が出ます。
サイト評価アップやインデックスに繋がる
Googleのクローラーは、内部リンクをたどってクロールし、インデックスします。
クローラーが回ってくることで、サイトは評価され、インデックスされることで検索結果に表示されます。
だから内部リンクによって、Googleから評価を受けやすくさせることは、とても重要です。
内部リンクで、関連するページを繋げることで、Googleが質の良いページと認識するので、上位表示される可能性も高まります。
関連記事：Googleサーチコンソールとは！初心者でも分かる使い方
アンカーリンクを使うときに気をつけたいポイント
アンカーリンクはとても便利な一方、利用する際の注意点がありますので注意しておきましょう。
リンク先の内容がわかる簡潔なテキスト
指定のリンク先ページに記載されている内容がわかりやすいテキストを意識してください。
「詳細はこちら」というより、もっと具体的にコンテンツがイメージできるものが良いです。
さらに、アンカーテキストは、GoogleなどがWEBページの内容を把握するための重要な手段でもあります。
抽象的なアンカーテキストでは、クローラーがリンク先との関連性を判断するのが難しくなり、サイト全体の評価が下がってしまうことも。
アンカーテキストの中にSEO対策のキーワードを含めると、WEBページの内容がどんなものなのか伝わりやすいです。
具体的に内容を記載するのが望ましいですが、長すぎるテキストはユーザーにとって混乱してしまう原因となるので、簡潔にまとめることを意識しましょう。
リンクであることをわかりやすく見せる
リンクであることがわからず、クリックされなければ、全く意味がありません。
ユーザーがリンクであることがすぐにわかるよう、文字の色を変更したり、太字にしたり一目でわかるような工夫をしましょう。
リンク先のページの状態をチェックする
リンク先のページが非公開になっていたり、リンク切れまたはリンク間違いなどがあるとユーザーはすぐに離脱してしまうでしょう。
関連性の低いページがリンク先として登録されているときも、ユーザーや検索エンジンが混乱してしまうので気をつけたいところです。
さらに、ウイルスに感染する可能性があるサイトやコンテンツの質が低いサイトなど、いわゆるスパムサイトへのリンクはサイトの評価を下げることになるので、絶対に確認してください。
関連記事：SEOで重視されるオーソリティとは？調べる方法と高める方法を解説！
アンカーリンクがずれるときの対処法
ヘッダーをposition:fixed;で固定している場合、アンカーリンクがヘッダーの高さ分だけずれてしまいます。
これを改善する方法は以下の2つになります。
CSSで調整する
固定されたヘッダーの高さ分のpadding-topと、ヘッダーの高さ分のネガティブマージンをmargin-topに設定し、ずれを解消できます。
margin-top:-100px;
padding-top:100px;
JavaScriptで調整する
jQueryを使用して、ページ内リンクのジャンプ先位置のずれを調整します。
関連記事：PV（ページビュー）とは！UUやセッションとの違いも合わせて解説！
アンカーリンクのデザイン
アンカーリンクのデザインには、大きく2つのパターンがあります。
・テキスト文字デザイン
・ボタンデザイン
テキスト文字デザイン
CSSで、テキストの文字色や太さ、アンダーラインなどでデザインします。
シンプルでオーソドックスなものの方がクリックされることも多いです。
テキスト文字デザイン
画像やイラスト、CSSでボタンの形や色、大きさをデザインします。
リンクの数が多い場合は、画像やイラストで可視化させるとわかりやすいでしょう。
関連記事：CSSとは？できること、HTMLとの関係や基本文法
まとめ
ユーザー満足度やサイトの評価を上げるには、アンカーリンクを付けた方が良いです。
また、SEOの観点からも、アンカーリンクには重要な役割があります。コンテンツの重要性を強調し、ページの構造を定義し、ページ上のSEO分析データを向上させるのに役立ちます。私達はアンカーリンクの構造を理解してGoogleのクローリングに対応することで、コンテンツについてより多くの情報を、Googleにもユーザーにも知らせることができるようになります。
上手にアンカーリンクを付けることで、さらに質の高いWEBページを作ることができます。
ユーザーが良質なコンテンツへ即座に辿り着けるような、ユーザビリティの高いページにするために、アンカーリンクを活用しましょう。
