弊社にも多くのWeb担当者からいただく質問がアンカーリンクです。
「リンクとアンカーリンクの違いは？」
「メリットや注意点は？」
とお悩みではありませんか。
今回はアンカーリンクの使い方、メリット、注意点を解説します。
- 目次
アンカーリンクとは？わかりやすく解説
アンカーリンクとは、
- Webサイト内の指定場所にユーザーを移動させる手段
- 移動先のページに書かれている情報を端的な文字列で表示
といった目的のもとに使用する技術です。
一般的に「リンク」と呼ばれるものと、同じ意味だと捉えて構いません。
ですが「リンク」に関しては、「繋がる」「同期する」という意味で、Web以外のシーンでも使われますが、アンカーリンクに関しては、もっぱらWeb上での呼称であるという違いはあります。
また、「ハイパーリンク」という言葉もありますが、これはWordやExcel上で文字列、文書、画像などを繋ぐ場合に用いられますので、参考までに知っておくとよいでしょう。
Web担当者においては、アンカーリンクに関連して、
- アンカーテキスト
- アンカータグ
について、目的や役割などを理解しておくことのほうが重要です。
参考：Google 公式 SEO スターター ガイド | Google 検索セントラル
アンカーテキストは、Webサイト上でのアンカーリンクに設定する文字列のことで、下線が引かれるなど目立つデザインが多くなっています。
例:アンカーテキスト
またアンカータグは、アンカーリンクを設定するHTMLタグのことで、<a></a>内で記述します。
例:<a href="URL">アンカータグ</a>アンカーテキストもアンカータグも、SEOやユーザーの利便性を左右するため、後ほど詳しく説明することにします。
アンカーリンクを使うメリット
MERIT 1
ユーザーの利便性向上
アンカーリンクを適切にWebサイトへ設置することは、ユーザーの利便性を向上させます。
ユーザーの利便性が向上すれば、欲しい情報へ最短時間にアクセスできるようになるため、ユーザーの評判だけでなく検索エンジンの評価も上がり、SEOにも有効です。
目的のページに辿りやすいWebサイトは、ユーザー側からすると「探す」という手間、つまりストレスを発生させることがないため、ユーザーの滞在時間が伸びるというメリットが得られます。
滞在時間の伸びはリピーターの獲得にも大きく貢献することから、ユーザー目線でのアンカーリンクを常に心がけるようにすることが肝心です。
仮に、アンカーリンクがユーザー目線とズレていれば、欲しい情報がないWebサイトとして、すぐに離脱されてしまいます。
たしかに、適切に関連記事や参考サイトを設置してくれているメディアはとても見やすい印象があります！
そうだよね！見やすいだけでなく、より深く学ぶことができるよね！
またアンカーリンクには、移動先のページ内容を端的に表すアンカーテキストがSEOには重要で、「コチラ」「リンク」のような文字列だけを表示させることは、極力避けることが望ましいです。
例
- 無料登録はこちら
- 関連記事はこちら
- 資料ダウンロードリンク
MERIT 2
早期インデックスに繋がる
アンカーリンクの適切な設置はユーザーの利便性向上のほかに、検索エンジンのクローラーによるインデックスの促進という役割も果します。
インデックスとは、検索結果の対象ページとして検索エンジンのデータベースに追加されることを意味します。
つまり検索結果に表示されるためには、少なくとも検索エンジンのクローラーによるインデックスが必須であり、アンカーリンクによって関連記事が繋がっていれば、上位表示への近道になるわけです。
ゆえにアンカーリンクは、SEOの有効性に影響し、上位表示の可能性を高めると言えます。
アンカーリンクの使い方・HTMLの作り方
実際にアンカーリンクの使い方を説明する前に、aタグ、属性の種類、動作の特徴について、まず整理しましょう。
アンカーリンクの設置においては、HTMLの「<a>」というタグを使用します。
例:<a href="リンク先のURL">aタグの使い方</a>続いて属性の種類ですが、以下の5つは使用する機会が多いので覚えておきましょう。
- href属性
- target属性
- rel属性
- id属性
- onclick属性
href属性
リンク先のURLを指定する際に使用される属性で、「href=”リンク先のURL”」と記述します。
例:<href="リンク先のURL">href属性の使い方</a>アンカーテキストである「href属性の使い方」をクリックすれば、指定したURLに移動、または参照できるようになります。
target属性
リンク先のURLを、ブラウザの新しいタブに表示させる属性で、「target=”属性値”」を<a>タグに追加するだけです。
例:<href="リンク先のURL" target="_blank">target属性の使い方</a>
例のように表示方法の属性値「_blank」を入力すると、アンカーテキストをクリックした時に、新規ウィンドウまたはタブで指定したURLを表示します。
その他にも使用される属性値は以下のようなものがあります。
rel属性
リンク先との関連性を示す場合に使用し、記述は</a>タグに「rel=”属性値”」を追加します。
例:<href="リンク先のURL" rel="nofollow">rel属性の使い方</a>属性値の「nofollow」は、検索エンジンのクローラーに対して、リンク先との関連付け、あるいはクロール自体を避けたい場合に使用するものです。
また広告を掲載する場合は「sponsored」、コメント欄やフォーラムなどユーザー主体のコンテンツには「ugc」を属性値として設定をおすすめします。
id属性
任意の固有な識別子を設定する属性です。
ページ内で目次をクリックすると、当該の見出しにすばやくジャンプするしくみなど、ほぼid属性が用いられています。
例:<h2 id="midashi1">見出し</h2>
<href="#midashi1">rel属性の使い方<見出し1>ページ内の遷移させたい箇所にid(例でいえば、”midashi1″)を記述します。
次に遷移させたいリンクに「#+idの文字列」を記述することで、そのリンクを押した際に、ページ内の指定した箇所に遷移します。
これまでのアンカーリンクと比較すると、記述が少し特徴的です。
属性値である文字列を同じにする部分は、スペルミスなどケアレスミスを起こしやすいため、実際にクリックしてジャンプの着地点を確認するようにしましょう。
ユーザーを見てほしい箇所に誘導できたらお互いにWinWinですね！
onclick属性
onclick属性は、クリック時の動作を設定するために用いられます。
JavaScriptと組み合わせることで、さまざまな動作が可能になります。
ボタンクリックに対する文字列の表示や、お知らせのポップアップなど、ユーザーとのインタラクティブなコミュニケーションに役立つ技術です。
例:ボタンをクリックするとポップアップで「クリックしてください」というメッセージを表示する
<button type=”button” onclick="alert('クリックされました')">クリックしてください</button>このコードの例を解説すると、「button」という要素を使ってonclick属性を設定し、JavaScriptを記述しています。
ボタンがクリックされた時に、alert()関数を呼び出して、メッセージを表示するという流れです。
リンクのデザイン
リンクには、主に2種類のデザインパターンがよく使われます。
- テキストデザイン
- ボタンデザイン
テキストデザインについては、文字列に対して大きさ、カラー、太さ、アンダーラインなど、CSSを使って仕様を決めます。
通常
カラー違い
太さ違い
ボタンデザインは、画像やイラストを背景としてデザインすることもあれば、ボタンの形状と枠、サイズ、フォントの種類、フォントカラー、アイコンに至るまでCSSで設定することも多いです。
Webサイトのテイストに合わせてデザインすることが求められます。
テキストかボタンかだけでも印象が大きく変わるので、適宜どちらにするか判断しましょう！
アンカーリンクを使う時の注意点
POINT 1
青色を使用する
Webでのブラウジングなど、インターネットの利用者は一般的にアンカーテキストについては、青色で馴染んでいます。
たしかに青色以外はほとんど目にしないです。
ゆえにアンカーテキストの色は、認知度の傾向から青色ベースが有効です。
実際に、黒色ベースのテキストの中に青色のテキストは目立ちますし、太字など装飾を加えるとさらに視認性が高まります。
ユーザーが欲しい情報に、すばやくアクセスできるようにしておくことは、Web担当者としての気配りでもあります。
POINT 2
簡潔なテキストで表示する
アンカーテキストにおいては、リンク先の内容を端的にあらわすことが肝心です。
「詳しくはコチラ」など、誘導だけを目的とした文言ではなく、少なくとも「〇〇と■■の注意点」といったように、キャッチコピーを意識しましょう。
さらにキーワードをアンカーテキストに加えることも、SEO対策では常套手段であり、検索エンジンにも理解されやすくなるため評価も上がります。
POINT 3
動作確認を行う
アンカーリンクを設置した時は、必ず動作確認を行いましょう。
間違ったリンク先へ飛ぶ、リンク先に遷移しない、ということが起こっていると、ユーザーにとってかなりのストレスで、早々に離脱する要因となります。
よくあるアンカーリンクのミスとしては、
- URL
- タグ
- 属性値
の記述間違いです。
利便性やSEOの面でも優先的に修正しておきましょう。
遷移先のサイトが表示されなくなるケースもあるので、定期的に確認しましょう！
よくある質問
アンカーリンクについて、問い合わせの多い質問についての回答を、以下に記しておきます。
アンカーリンクを無効にしたいのですが、どうすればいい？
アンカーリンクを無効化する方法として、オーソドックスなやり方を列記すると、aタグ内で記述する場合は、
- 「rel=”nofollow”」を追加してクロールから除外
- 「disabled=”disabled”」を使う
- href属性を外してtabindex属性で”-1″を追加
といった方法が比較的簡単です。
CSSでも「pointer-events: none;」を使って指定要素をクリック無効にして、結果としてアンカーリンクを作動させないこともできます。
必要に応じて使い分けるとよいです。
name属性とはなんですか？
name属性は、id属性同様に特定のポイントに遷移させることができる属性です。
記述方法は以下の通りです。
<h1 name="top">SEOタイムズ</h1> <href="#top">SEOタイムズのtopに遷移する<a>
まとめ
アンカーリンクについて、メリットや使い方、よくあるトラブルの回避などについてご紹介しました。
アンカーリンクは、ユーザーの利便性向上だけでなく、SEOの観点からインデックスの促進効果も期待できます。
このような効果を知った上で、うまく使用することで検索エンジンの評価も高まるわけですが、アンカーリンクは設置後の管理も重要です。
特にリンク切れ、遷移動作の不具合、目的のサイトとは異なる移動という点については、定期的にチェックするようにしましょう。
本記事を読んで、アンカーリンクの有効性を、ぜひ、体感してください。
