aタグとは?意味やSEO観点での最適な使用方法を初心者向けに解説

更新日: 公開日:
aタグとは?意味やSEO観点での最適な使用方法を初心者向けに解説

検索エンジンはリンクを辿ることで様々なページを発見していきます。そのためリンクはSEOでは欠かすことのできない要素であり、そのリンクを指定するのがaタグになります。
基本的なリンクの設定であれば、多くの方が問題なくできると思いますが、target属性やhreflang属性、SEO上の注意点などいくつか押さえておきたい知識もあります。本記事ではaタグの意味や使い方、属性の種類、SEO効果について解説します。

この記事のポイント

  • aタグとはリンクを指定するHTMLタグ
  • リンク先を指定するhref属性、リンクを開く方法を指定するtarget属性など、さまざまな属性がある
  • Googleの検索エンジンはhref 属性が指定されたaタグのみ、リンクを辿ることができる

\ナイルのサイト改善提案の紹介はこちらから!/

aタグとは

aタグとは、サイト内のテキストをクリックしたら、他のページへとリンクしてくれるHTMLタグのことです。例えば、下記のようなリンクには、aタグが用いられています。

ナイルのSEO相談室

HTMLタグの記述としては、

<a href="https://www.seohacks.net/">ナイルのSEO相談室</a>

となります。aタグで囲った部分が、ページ上では青い色になって下線が引かれます。

アンカーテキストとは

アンカーテキストとは、リンクのテキスト部分のことです。下記だと、「ナイルのSEO相談室」の部分がアンカーテキストです。

<a href="https://www.seohacks.net/">ナイルのSEO相談室</a>

リンク先のページはそのままで、「ナイルのSEO相談室」というテキストを「ナイルのSEO相談室のトップページ」に変えたいなら、アンカーテキストを書き換えます。

<a href="https://www.seohacks.net/">ナイルのSEO相談室のトップページ</a>

ナイルのSEO相談室のトップページ

また、遷移先のタイトルを必ず含まないといけないというルールもないため

<a href="https://www.seohacks.net/">詳しくはこちら</a>

のようなアンカーテキストを設定することもできます。(上記はナイルのSEO相談室TOPページに遷移します。)

\サクッと分かる!GA4の資料ダウンロードはこちらから/

最低限押さえたいaタグの使い方

ここからは具体的にaタグの使い方について解説します。

aタグの基本的な使い方

もっともシンプルなaタグの使い方は、アンカーテキストをクリックすると画面は同じままで、別のWebページに切り替わるタイプのリンクを設置するために用いられます。この場合は下記のようにHTMLを記述します。

<a href="https://www.seohacks.net/">ナイルのSEO相談室</a>

<a>と</a>でアンカーテキストを囲み、前半の<a>の中にリンクしたいページのURLを記述します。このとき、リンク先のURLは「href="○○○"」この○○○の部分に記述します。

別タブで開かせる方法

aタグの使い方として、別タブで開かせる方法があります。リンクをクリックすると、別の画面(タブ)でリンク先のページを開かせたい場合は、「target="_blank"」を用いる必要があります。

<a href="https://www.seohacks.net/" target="_blank">ナイルのSEO相談室</a>

このように「target="_blank"」を指定することで、リンクを別画面で表示できます。

同じ画面(タブ)で開く場合はtarget="_self"を指定しますが、何も入れなければデフォルトで同じ画面で開かれるため、わざわざ指定する機会は少ないでしょう。

画像にリンクを張る方法

画像にリンクを張るためには、アンカーテキストの代わりに画像を指定するimgタグを<a>タグで囲うことになります。

例)ナイルのSEO相談室のロゴ画像にリンクを設定する場合

<a href="https://www.seohacks.net/"><img src="https://www.seohacks.net/common/img/seo-soudanshitu-logo.svg" alt="ナイルのSEO相談室ロゴ画像"/></a>

このように設定することで、画像をタップ・クリックするとリンク先のページへ移動できるようになります。

なお、この際はalt属性に設定したテキストがアンカーテキストとして扱われますが、わざわざ「〇〇へのリンク」「〇〇はこちら」のようにする必要はなく、その画像を表現するalt属性を設定して下さい。

絶対パスと相対パスの違い

リンク先のURLを指定する際の指定方法には「絶対パス」と「相対パス」の2種類あります。

相対パス

まず、「相対パス」から説明します。「相対パス」とは、同じWebサイトの中でページを移動する際に使用できるリンクの指定方法です。たとえば当ブログの「SEOとは?超わかりやすく解説!効果が出る11個の対策を紹介」という記事にリンクを張るとします。

この記事のURLはhttps://www.seohacks.net/blog/1066/ですが、同じブログから記事を張る場合、「https://www.seohacks.net」という部分は常に共通となります。同じ「https://www.seohacks.net」のアドレス内でしか移動しないのですから、その部分は省略しても構わないという考え方が「相対パス」となります。

相対パスで上記のリンクを張る場合の記述は下記となります。

<a href="blog/1066/">SEOとは?超わかりやすく解説!効果が出る11個の対策を紹介</a>

よって、当然ながらサブドメインを含む外部サイトへの遷移を目的としたリンクには使用することができません。

絶対パス

「絶対パス」とは、Webページに個別に与えられたURLをすべて記述してリンク先のページを指定するという方法です。先ほどと同じく当ブログの「SEOとは?超わかりやすく解説!効果が出る11個の対策を紹介」という記事にリンクを張るとします。

この記事のURLはhttps://www.seohacks.net/blog/1066/なので、絶対パスで記述すると下記のようになります。

<a href="https://www.seohacks.net/blog/1066/">SEOとは?超わかりやすく解説!効果が出る11個の対策を紹介</a>

このリンクの指定が「絶対パス」です。相対パスの説明で述べたように、同じブログ内の記事なので「https://www.seohacks.net」は省略が可能です。しかし、それを省略せず正式なURLでリンクを張ることを「絶対パス」と呼びます。

ページ内リンクの張り方

異なるページではなく、同じページ内の特定の場所にリンクを張ることもできます。本記事の冒頭に「目次」があるので、試しにタップしてみてください。同じページ内の該当箇所へ一瞬で移動するはずです。このようなリンクを「ページ内リンク」と呼びます。

このようなリンクを張るには「#」と「id」を使います。たとえば本記事の「まとめ」にリンクを張る場合、次のように記述します。

<a href="#matome">まとめ</a>

ただし、これだけではジャンプしません。ジャンプ先である「まとめ」というテキスト部分に「#matome」を指定する必要があります。

<span id="matome">まとめ</span>

このように指定することで、同じページ内で「まとめ」にリンクできます。#matomeの部分はどんな単語でも構いません。重要なのは#○○○とid="○○○"が一致していることです。

nofollow

aタグには、さまざまなrel属性を設定できますが、よく使うものは上述したtarget属性か、nofollow属性になります。

nofollwはクローラーに対して、「このリンクをたどってはならない」という指示(ヒント)を出すことができます。外部の有料サイトや、サイト内で検索エンジンにクロールされる必要が無いページ(ログイン用のページなど)に対して設定する場合などに利用されます。

UGC(User Generated Contents)で設置されたリンクや、広告のリンクにnofollowを用いられてましたが、2019年9月に、これらの用途としてはugcsponsoredというより具体的な属性値がサポートするとGoogleが発表しました。nofollowの性質や用途については、以下のGoogleが公開しているヘルプや、当ブログのエントリーにより詳述されております。

関連:Googleウェブマスターツールヘルプ『特定のリンクに対して rel="nofollow" を使用する』

関連:nofollowとは?nofollowの設定方法とugc・sponsoredの違い

SEO上の注意点

まずSEO対策としてだけでなく、ユーザーのクリックしやすさがリンクの重要なポイントです。そのためユーザーの興味が沸くようなアンカーテキストを心がけましょう。そして、「クリックしてみたらなんか違った」とならないように、過度に期待を煽ったり、説明不足になったりしないように心がけましょう。

一方で、アンカーテキストに含まれるテキスト情報は検索エンジンのページ理解に用いられるなど、SEO対策上で比較的重要な要素になります。上記「クリックしやすさ」を前提に、可能な範囲で遷移先を示すキーワードを含むテキストを記載しましょう。

参考:アンカーテキストとは

また、ぜひ覚えておいてほしいポイントとしては、検索エンジンはhref 属性が指定されたaタグのみ、リンクを辿ることができるという点です。

スクリプトで生成されるリンクなどは検索エンジンが追えず、クロールに影響するケースなどもあるため、基本的にサイト内に設定するリンクはaタグで設定しましょう。

確認方法ですが、ソースコードの確認や検証機能の他、Chromeの場合リンクにマウスカーソルを合わせ、左下にリンクの文字列が出るか確認するのがスピーディーです。

参考:リンクをクロールできるようにする(Googleヘルプ)

まとめ

この記事で基本的な使い方は理解していただけたと思います。

SEO観点ではアンカーテキストやnofollowなど押さえるポイントいくつかありますが、中でも「検索エンジンはhref 属性が指定されたaタグのみ、リンクを辿ることができる」という点は確実に覚えておいて下さい。

実際にこれが原因となり、内部リンク数がサイトのページ数に対し極端に少なくなり、クロールに悪影響が起きて、インデックス数が伸び悩むサイトは数多く見られます。

aタグの設定で困ることはないと思いますが、こうしたクロール、インデックスの課題がある場合は弊社がサポートさせていただきますので、まずはお気軽にご相談下さい!

また、SEO成功事例・法則資料をまとめた資料もご用意しております。

  • SEOの基礎知識
  • 効果的なSEO戦略の立て方
  • キーワード戦略の考え方
  • ナイルのコンサルティングサービスのご紹介

具体的な内容については、ダウンロードの上、ご確認ください。

関連記事

『HTTPSをSEOで優遇』 SSL化を推奨するアルゴリズム導入をGoogleが公式発表

IPアドレスとは?構成の種類とIP分散によるSEOへの影響

IPアドレスとは?構成の種類とIP分散によるSEOへの影響

クローラーとは?SEOにおける6つのクローラーを意識すべきポイント

クローラーとは?SEOにおける6つのクローラーを意識すべきポイント

新着記事

ホワイトペーパー ダウンロード

ホワイトペーパーのダウンロード数を伸ばす方法とは?

ホワイトペーパー 意味

ホワイトペーパーの意味は?営業資料との違いや種類を解説

リード 獲得 単価

リード獲得単価(CPL)とは?活用方法から改善のコツまで解説

サイト内検索