aタグ（アンカータグ）とは、「HTML」で記述できるタグのひとつで、他のページへのリンクを貼る時に利用される。
検索エンジンはリンクをたどって別ページを発見するため、aタグの設定はSEOの観点からも重要な要素となる。
この記事では、aタグの意味や、知っておくべき使い方をわかりやすく解説していく。
この記事でわかること |
・aタグとは |
インターネットの最大の特徴ともいえる「リンク」設定。
普段あたり前のように使っているが、リンクはその設定方法によってさまざまな意図に対応し、ユーザービリティに大きな影響を与える。
ユーザーの行動心理を考えた、ストレスなく見れるWEBサイト作成のために、aタグについての理解を深めていこう。
目次
1.aタグとは｜検索エンジンはaタグ以外のリンクはたどれない
aタグとはどんなタグなのか？、くわしく解説していこう。
1-1.aタグとは
aタグ（アンカータグ）とはHTML（※）で記述できるタグの１つで、他のページへのリンクを貼る時に利用される。
（※）HTML：Webページを作成するために用いられる言語（技術）。HTMLの記述によって、検索エンジンがWEBページの構造を把握する
aタグの設定は、下記のように行う。
<a href=”（リンク先のURL）”>テキストサンプル</a> |
このように記述することで、「<a href=”（リンク先のURL）”>」と「</a>」に囲まれた「テキストサンプル」の部分がリンクになる。
サイト記事を読んでいる際に、「青い色+下線が引かれた状態」のリンク表示を目にすることがあると思うが、それがこの記述の「テキストサンプル」の部分にあたる。
チェック！ HTMLのaタグでリンクを設定した文字の部分（上記の「テキストサンプル」の部分）を「アンカーテキスト」という。 アンカーテキストはサイトの内部リンクを整理してユーザーや検索エンジンにとって、より使いやすい形を作り上げるためになくてはならないテキストだ。 この記事の「5.aタグ設定ではSEOに効果的な「アンカーテキスト」の記述が重要！」でも触れていくが、関連記事『アンカーテキスト最適化でSEO効果を高める３つのポイント』も合わせて確認しておこう。 |
1-2.リンクの設定で有効なのは「aタグ」だけ
リンクの設定で有効なのは、基本的に「aタグ」を使う方法だけだといえる。
なぜなら、Googleの公式ページでも記載されているように、検索エンジンがたどることができるのは、aタグが使用されたリンクのみだからだ。
「Google のクローラがたどれるリンクは、解決可能な URL が指定された適切な <a> タグが使用されているリンクのみです。」
引用元：Google検索セントラル｜リンクをクロールできるようにする
サイト内のリンクは、クロールへの影響を考慮し、適切なaタグを使って設定しよう。
2.【一覧】よく使われる「aタグ」7種類の属性
aタグでは、情報を付加するためのさまざまな属性を指定することができる。
ここでは、使用する機会の多い7種類の属性を一覧で紹介しておこう。
【aタグの属性】 | 【概要】 |
href | リンク先のURLの指定を行う。 |
id | タグに固有の識別名を付ける。 |
charset | リンク先の文字コードを指定する。 |
hreflang | リンク先の言語コードを指定する。 |
rel | 現在の文書からみた、リンク先となるリソースの位置づけを表す。 |
type | リンク先のMIMEタイプ（マイムタイプ=ファイルの種類を表す情報）を指定する |
target | リンク先の表示方法を指定する |
3.基本編｜押さえておくべき「aタブ」の3つの使い方
数多くの種類があるaタブだが、ここでは最低限押さえておくべき基本的なaタブの使い方を解説する。
・「href」｜リンク先を指定する
・target属性の「blank」｜別タブでリンク先のページを開く
・画像にリンクを貼る
しっかり把握していこう。
3-1.「href」｜リンク先を指定する
href属性（※）は、リンク先のURLを指定する際に使用する。
（※）hrefは「ハイパーテキストリファレンス」の略で「エイチレフ」と読む
書き方は1章でも示したが、下記の通りだ。
【書き方】
<a href=”（リンク先のURL）“>アンカーテキスト</a> |
3-2.target属性の「blank」｜別タブでリンク先のページを開く
target属性はリンク先ページを表示する方法を指定する。
target属性のblank値を設定すると、そのリンクをクリックした時に別のタブが開き、そこでページが表示される。
【書き方】
<a href=”（リンク先のURL）“target=”_blank”>アンカーテキスト</a> |
チェック！ aタブの基本として、覚えておくべき「target=”_blank”」だが、セキュリティ上に脆弱性がある。 なので、「target=”_blank”」を使う際には、「rel=”noopener”」または「rel=”noreferrer”」をセットでつけることをおすすめしたい。 2020年にはGoogleの技術者が、「他のサイトへのリンクのtarget = “_ blank”は、サイトをパフォーマンスとセキュリティの問題にさらす可能性がある。修正するには、これらのリンクにrel = “noopener”またはrel = “noreferrer”を追加してください」という内容を下記のようにツイートしている。
すると、リンク先のページに悪意のあるJavaScript（※）が書かれていたらリンク元である貴社ホームページが改ざんされてしまう可能性がある。 （※）JavaScript（ジャバスクリプト）：Webサイトやシステムの開発に使われているプログラミング言語 これを防ぐ手段として、「target=”_blank” にrel=”noopener” 、または rel=”noreferrer” を追加してください」、と注意喚起しているのだ。 要は、下記のように付け加えればいいだけなので、セキュリティ上の脆弱性を補うために忘れず使用していこう。 （例） |
ちなみに、「target=”_blank”」の部分を「target=”_self”」とすると同じタブでリンク先が開かれる。ただ、何も記述しなければ同じタブで開かれるため、基本的には設定する必要はない。
3-3.画像にリンクを貼る
img要素（※）を包含する形でaタグをコーディングすることで、画像にリンクを貼ることができる。
（※）img要素：「image」の略で、文書内に画像を表示するためのタグ
【書き方】
<a href=”（リンク先のURL）“><img src=”（画像の保存場所）” alt=”（画像の説明）“/></a> |
「alt」の部分は検索エンジンが画像の内容を把握するためのヒントにするため、その画像を説明するテキストを入力する。
たとえば、「画像にリンクを貼る方法ロゴ画像」というようなわかりやすい記述がいいだろう。
4.応用編｜「aタグ」の知っていると便利な3つの使い方
基本をしっかりマスターした人向けの応用編として、知っていると便利なaタグの3つの使い方を紹介しよう。
・同一ページ内の他の場所にリンクする
・電話がかかるようにする
・ダミーリンクを貼る
aタグを上手く活用して、サイト構築を進めていこう。
4-1.同一ページ内の他の場所にリンクする
id属性を使い、リンク先の名前を指定することで、同一ページ内の任意の場所に飛ばすことができる。
記事などでよく目にする「目次」は、多くの場合これを利用して設定されている。
【書き方】
<a href=”＃（リンク先のid名）“>アンカーテキスト</a> |
4-2.電話がかかるようにする
aタグでは、電話番号を掲載し、その番号をクリックすると電話がかかるようにすることができる。
※ただし、スマートフォンからしかクリックして電話をかけることはできない
【書き方】
<a href=”tel:電話番号“>アンカーテキスト</a> |
4-3.ダミーリンクを貼る
ダミーリンクは、リンク先がまだ準備中で、ページが完成したらリンクを追加する予定である場合に用いられる。
ダミーリンクを貼ると、クリックはできるがクリックしても何も起きない。
書き方はいくつかあるが、ここでは一番シンプルな方法を紹介する。
【書き方】
<a>aタグとは｜使い方をくわしく解説（公開予定）</a> |
ダミーリンクは、リンク先のページがまだないが、準備中であることを知らせておきたいといった場合に有効だ。
5.aタグ設定ではSEOに効果的な「アンカーテキスト」の記述が重要！
aタグを設定する際には、具体的で理解しやすい「アンカーテキスト」の記述が何より重要だ。
<a href=”（リンク先のURL）”>アンカーテキスト</a> |
アンカーテキストに含まれるテキスト情報は、下記に示したGoogle公式サイトの説明にもある通り、検索エンジンのページ理解に用いられるなど、SEOに関わる要素になる。
「リンクテキストとは、リンク内に表示されるテキストです。このテキストはユーザーや Google に対して、リンク先のページについての情報を伝えます。ページ上のリンクには内部的なリンク（サイト上の他のページを参照しているもの）もあれば、外部的なリンク（他のサイトのコンテンツにつながるもの）もあります。どちらの場合も、アンカーテキストが効果的であればあるほど、ユーザーはナビゲートしやすくなり、Google はリンク先のページを理解しやすくなります。」
引用元：検索エンジン最適化（SEO）スターター ガイド（Google検索セントラル）
アンカーテキストはそれだけ見ればどのようなページヘのリンクであるのかが理解できるような、具体的でわかりやすい記述が望ましい。
たとえば… リンク先が「天然酵母パン」のページなら、「天然酵母パンの〇〇〇」「冷凍できる天然酵母パン〇〇〇」というような具体的な記述をいれると良い。 悪い例としては、「冷凍できる天然酵母パンならこちら」と記載して、その中の「こちら」をアンカーテキストにしてしまうことだ。 こうしたリンクの貼り方をする人は案外多く、悪いアンカーテキストの例として他に、 ・ココ などがある。 こうしたアンカーテキストでは、検索エンジンはリンク先が、「こちら」や「ココ」についてのページだと把握してしまい、何を表しているかが伝わらない。 |
アンカーテキストが最適化されていれば、検索エンジンが、そのサイトが何について扱っているサイトなのか、そのサイトの階層構造はどのようになっているのかを理解する手助けになる。
その上で、可能な範囲で対策キーワードを含めるなどの工夫をすることで、さらにSEO上の効果が期待できる。
関連記事 |
6.まとめ
aタグ（アンカータグ）とは、WEBサイトでリンクを貼るときに使う「HTML」タグのこと。
検索エンジンはリンクをたどって別ページを発見する。
よって、aタグの設定はSEOの観点からも重要な要素といえる。
aタグ設定の際、特に留意すべきなのが「アンカーテキスト」の記述だ。
アンカーテキストは、リンク先の内容が分かる具体的で簡潔なフレーズにすることで、検索エンジンに正確な評価を促せる。
記事を参考に、aタグの特性を十分に理解し、これからのサイト構築に活かしていこう。
