SEO/SEM

アンカーリンクとは?使い方やメリット・注意点をわかりやすく解説

アンカーリンクとは?使い方やメリット・注意点をわかりやすく解説
アンカーリンクという言葉を知っていますか?

今は簡易的にブログやホームページ制作ができるため、アンカーリンクを知らない人も多いですよね。

しかし、アンカーリンクの概要や仕組みなどを理解して使いこなせることは、SEO対策をするうえでの基礎力となります。

今回は、アンカーリンクの概要や使い方、メリットから注意点までを解説します。本記事を参考にして、最適な位置にアンカーリンクを設置できるようにしましょう。
SEO対策でビジネスを加速 SEO DASH 無料でダウンロード

アンカーリンクとは?

アンカーリンクとは、ホームページ内の指定の場所に移動できる文字を指します。具体的には、今読んでいるコンテンツに関連する記事へユーザーを誘導する技術です。

アンカーリンクが必要となる理由は、快適にホームページ内から情報を得られる工夫ができるからです。初めてサイトを訪れた人は、同じ情報を探すのに手間と時間がかかります。

上記のようなロスタイムを減らすためにアンカーリンクを設置すると、すぐに最適なページへユーザーを誘導できるので、ストレスなくコンテンツを閲覧してもらえるのです。

上手にアンカーリンクを設置して、ユーザーにとって良質なコンテンツやホームページ作りを目指しましょう。

アンカーリンクの使い方

アンカーリンクと一括りに言っても、リンク先の指定方法は以下のように、大きく3つの種類に分けられます。

属性 特徴
href属性 URLでリンク先の指定
id属性 特定のページをリンク先に指定できる
target属性 開くウィンドウでリンク先を指定できる

各タグで、その特徴やリンク先の指定方法などが大きく異なります。
用途に応じて最適なアンカーリンクを選んで設置しましょう。

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効果の期待が高まります。

コンテンツ内でアンカーリンクを活用し、サイトの利便性を向上させましょう。

アンカーリンクを使用する際の3つの注意点

アンカーリンクを使用する際の注意点として、

  • リンクの色は青色にする
  • リンク評価を渡したくない場合はnofollow属性を使う
  • position:fixed;で固定しているとずれが生じる

などを意識するのが大切です。アンカーリンクを使用する際は、上記3つの注意点に気を付けましょう。

リンクの色は青色にする

リンクの色は青色にしましょう。なぜなら青色は黒色より目立ち、ユーザーから見てもわかりやすいからです。

また、アンカーリンクを目立たせるために、青でも明るめの青にしておくのをおすすめします。暗めの青を使用すると黒と同じように見えてしまうため、アンカーリンクに気付かないユーザーも多いのです。

ユーザーにとってわかりやすいサイトを目指すためにも、アンカーリンクの色味にも気を遣うようにしましょう。

リンク評価を渡したくない場合は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;で固定しているとずれが生じる

アンカーリンクを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対策の範囲が広がります。

本記事で紹介したポイントや注意点を確認して、最適な位置にアンカーリンクを設置するようにしましょう。

SEO対策でビジネスを加速させる「SEO Dash! byGMO」
seo-dash!bygmo

SEO対策でこんな思い込みしていませんか?

  • 大きいキーワードボリュームが取れないと売上が上がらない・・
  • コンサルに頼んでもなかなか改善しない
  • SEOはコンテンツさえ良ければ上がる

大事なのは自社にあったビジネス設計です。 御社の課題解決に直結するSEO施策をご提案します

無料資料請求はこちら

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと)大澤 健人(おおさわ けんと)のFacebook
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
   

Seminarセミナー

現在受付中のセミナーはありません。

CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。