アンカーリンクとは?使い方やメリット・注意点をわかりやすく解説
今は簡易的にブログやホームページ制作ができるため、アンカーリンクを知らない人も少なくないでしょう。
しかし、アンカーリンクの概要や仕組みなどを理解して使いこなせることは、SEO対策をするうえでの基礎力となります。
今回は、アンカーリンクの概要や使い方、メリットから注意点までを解説します。本記事を参考にして、最適な位置にアンカーリンクを設置できるようにしましょう。
- SEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」
-
URLを入れるだけでサイト内部の問題を一括検出。
Googleと同じ視点でサイトクロール、
大規模サイトでも手軽に高度なSEO分析ができます!まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!
アンカーリンクとは?
アンカーリンクとは、ホームページ内の指定の場所に移動できる仕組みを指します。具体的には、今読んでいるコンテンツに関連する記事へユーザーを誘導する技術です。そして、そのリンク内容を表す文字のことをアンカーテキストと呼びます。
アンカーリンクが必要となる理由は、快適にホームページ内から情報を得られる工夫ができるからです。初めてサイトを訪れた人は、同じ情報を探すのに手間と時間がかかります。
上記のようなロスタイムを減らすためにアンカーリンクを設置すると、すぐに最適なページへユーザーを誘導できるので、ストレスなくコンテンツを閲覧してもらえるのです。
上手にアンカーリンクを設置して、ユーザーにとって良質なコンテンツやホームページ作りを目指しましょう。
ハイパーリンクとの違い
ちなみにアンカーリンクと似た仕組みにハイパーリンクがあります。両者は「クリックすると別の場所に移動する」という点で共通しています。
ただしアンカーリンクがホームページ内の指定場所に遷移できるリンクに対して、ハイパーリンクはWEBページ以外の文書内のリンクも含みます。
WEBページでは「アンカーリンク」、それ以外の例えばExcel等では「ハイパーリンク」を用いることが多いと言えます。
アンカーリンクの使い方
アンカーリンクと一括りに言っても、htmlで利用する場合、リンク先の指定方法はhref属性、id属性、target属性の3つの種類に分けられます。
属性 | 特徴 |
---|---|
href属性 | URLでリンク先の指定 |
id属性 | 特定のページをリンク先に指定できる |
target属性 | 開くウィンドウでリンク先を指定できる |
nofollow属性 | 他サイトにリンク評価を渡さないようにする |
各タグで、その特徴やリンク先の指定方法などが大きく異なります。
用途に応じて最適なアンカーリンクを選んで設置しましょう。
ここでは、href属性、id属性、target属性の使い方について説明します。nofollow属性については、別途後述します。
href属性
href属性は、アンカーの到着点や基準となるURIのリンクを設定する属性です。
href属性としてアンカーリンクを使用する場合は、下記のような文字の入力が必要になります。
<a href=”https://○○○.jp”>ブログ
上記の「https://○○○.jp」部分にリンク先として使用したいドメインを入力し、「ブログ」の部分にリンクで表示する名称を入力します。
これらの一連の手順で「ブログ」という表示のアンカーリンクが完成します。
id属性
id属性は固有の識別ができるアンカーリンクです。識別を通して、特定のページを指定できるメリットがあります。
また、id属性を活用すると、CSSやJavaScriptなどから名前が付いた要素を特定して処理できるので利便性が高いです。
具体的なタグとして、下記の入力が必要です。
<a href=”test”>テキスト
<p id=”test”>テキスト</p>
上部のタグが出発点、下部のタグが到着点となります。
そして、「test」に指定したいアンカーリンクの名称、「テキスト」に表示されるテキストを入力すると完成です。
target属性
target属性は、新しいタブページを開くアンカーリンクです。href属性はページ間を移動するタグですが、target属性は別ウィンドウで新たにページが開くので、ユーザーが元ページを見返せるようになり利便性が高いと言えます。
具体的に入力するコードは、
<a href=”リンク先のURL” target=”_blank”>新規タブ</a>
となります。
「リンク先のURL」部分にリンクしたいページのURLを、「新規タブ」部分にリンク名を入れると完成です。
SEO対策に!アンカーリンクを利用するメリット
アンカーリンクは、ユーザーの利便性を向上させるメリットがあります。なぜなら、ユーザーがコンテンツを読んでいるときに、最適で関連したアンカーリンクを設置すると、有益な情報の提供につながるからです。
ユーザーの知りたい情報がすぐ見つかる
具体例としては、低カロリーの料理のレシピのコンテンツの最後に、他の低カロリーの料理に関するリンクを設置する場合です。色々なページを確認する必要がなく、欲しい情報が簡単に見つかるので利便性が高くなります。
反対に、アンカーリンクを設置していないとユーザーはサイト内で何度も別ページに移動する必要があり、求めている情報を探すのが大変になってしまいます。
ユーザーが快適にサイトを利用するためにも、アンカーリンクを上手に設置しましょう。
SEOの評価が上がる
アンカーリンクを設置することで、ユーザーの離脱率の低下、利便性向上によるリピート率の向上が期待できるため、サイト評価が上がります。その結果、検索順位の上昇に繋がるでしょう。
また、Googleのクローラーは内部リンクをたどってクロールし、サイトを評価します。アンカーリンクを設置することで、クローラーが正しく遷移先を認識してくれるのです。
アンカーリンクに使うテキストはリンク先の内容がわかる簡潔な文言にすることで、SEO効果の期待がより高まります。
コンバージョン率(CVR)が向上する
やみくもにリンクを貼るのではなく、適切な説明を伴ったアンカーリンクを設置することが重要です。説明テキストが入ることで、どんな内容の遷移先か理解でき、ユーザーの行動喚起を促すことが可能になります。そのためコンバージョン率の向上に役立つのです。
コンテンツ内でアンカーリンクを活用し、サイトの利便性を向上させましょう。
アンカーリンクを使用する際の3つの注意点
アンカーリンクを使用する際の注意点として、
- リンクの色は青色にする
- リンク先のページを確認する
- リンク評価を渡したくない場合はnofollow属性を使う
などを意識するのが大切です。アンカーリンクを使用する際は、上記3つの点に気を付けましょう。詳細は以下の通りです。
リンクの色は青色にする
リンクの色は青色にしましょう。なぜなら青色は黒色より目立ち、ユーザーから見てもわかりやすいからです。
また、アンカーリンクを目立たせるために、青でも明るめの青にしておくのをおすすめします。暗めの青を使用すると黒と同じように見えてしまうため、アンカーリンクに気付かないユーザーも多いのです。
ユーザーにとってわかりやすいサイトを目指すためにも、アンカーリンクの色味にも気を遣うようにしましょう。
リンク先のページを確認する
リンク先のページの状態をしっかり確認しましょう。非公開になっている、またはリンクが切れている状態でアンカーリンクを設置すると、ユーザーにとって不利益となり、検索エンジンから低い評価を受ける可能性があります。
またリンク先がスパムサイトの場合、こちらのサイト全体の低評価に繋がる危険性もあるので注意してください。
なお、リンク先のURL記入ミスが発生することもあるので、事前に間違いがないか必ずチェックしましょう。
リンク評価を渡したくない場合はnofollow属性を使う
リンク評価を他サイトに渡したくない場合は、nofollow属性を使用すると効果的です。理由としては、nofollow属性を使用するとリンク先として検索エンジンのクローラーが認識しなくなるからです。
低品質なサイトや悪質なコンテンツを提供しているサイトに、自分のサイトへのリンクを設置されると、あわせて悪い評価を受ける場合があります。
上記のような影響を受けないためにも、nofollow属性を活用しましょう。
具体的に使用するタグとして、rel属性とcontent属性の2種類があります。rel属性は特定のリンクに対してnofollow属性を適用する方法、content属性はページ全体のリンクに関してnofollow属性を適用する方法です。
・rel属性のタグ
<a href=”http://○○○.jp/” rel=”nofollow”>サンプルテキスト<a>
上記の「http://○○○.jp」の箇所にページのURL、「サンプルテキスト」にアンカーリンクの名称を入力しましょう。
・content属性のタグ
<meta name=”robots” content=”nofollow”>
上記の記述を行うと、ページ全体のアンカーリンクがクロールの対象外という設定になります。
リンク評価を他サイトに渡したくない場合は、nofollow属性を使用しましょう。
アンカーリンクのずれを修正する方法
アンカーリンクをposition:fixed;で固定していると、ページ移動時にずれが生じるため、対処を行う必要があります。なぜなら、固定ヘッダーと位置が被るからです。
上記の状態を解決しないと、見出しや文字などの一部のコンテンツが見えない状態となり、大変不便です。
実際に様々な対処法がありますが、具体的な方法として、今回はCSSで調整可能なやり方を紹介します。
具体的に記述するコードは、下記の通りです。
.sample {
padding-top: 100px;
}
#sample {
padding-top:100px;
margin-top:-100px;
}
最初にヘッダー部分の高さを入力します。サンプルとして、今回は「100px」と入力しました。入力後、padding-top・margin-topを入力し、高さを相殺する必要があります。
具体的に説明すると、padding-topは画面の外枠、margin-topは画面の内枠といったイメージです。外枠を縮小し内枠を引き上げると、適切な位置にアンカーリンクが設定できます。
アンカーリンクをposition:fixed;で固定してページ移動時にずれが生じた場合は、上記の方法で改善しましょう。
まとめ
今回は、アンカーリンクの概要や使い方、メリットや注意点について解説しました。
今は個人ブログを作成する際に手軽にリンクが貼り付けられるため、アンカーリンクについて知らない人も多いでしょう。
しかし、アンカーリンクの基礎的な内容を理解しておくと、SEO対策の範囲が広がります。
本記事で紹介したポイントや注意点を確認して、最適な位置にアンカーリンクを設置するようにしましょう。
- 【無料のおすすめ資料】WordPress基礎知識大全:SEO対策まで完全網羅
-
世界No.1 CMSのWordPressを徹底解説!
初心者でも簡単に始められる基本設定から、サイトの成功を左右するSEO対策まで網羅。新規ブロガーもベテランも必見の完全ガイドです。
今すぐ無料でダウンロードし、あなたのサイトを次のレベルへ!
- SEO対策でビジネスを加速させる「SEO Dash! byGMO」
-
SEO対策でこんな思い込みしていませんか?
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します