aタグ（アンカータグ）とは・・・「HTML」で記述できるタグの１つで、他のページへのリンクを貼る時に利用されます。
「HTML」とは、当ページのように、Webページを作成するために用いられる言語（技術）になります。
インターネット上に公開されているWebサイト（ページ）は、この「HTML」で作成されているのがほとんどです。
また、“ < ” と “ > ” で記述する「タグ」と呼ばれる特殊な記号で、記述されているのが特徴です。
「aタグ」とは、この「タグ」の一種で下記のように記述することができます。
上記を、ブラウザ上で表示（実行）してみると、下記になります。
上記の「当サイトのトップページへ」をクリックすると、当サイトのトップページが表示されると思います。
このように、他のページを表示するために利用されるのが「aタグ（アンカータグ）」になります。
当記事では、この「aタグ」について、基本から応用までの使い方を順に解説していきます。
また最後に、SEO的に「aタグ」の利用で注意すべき点についてもまとめています。
以下、目次になります。
- aタグ（アンカータグ）の基本：リンクを貼る手順について
- aタグの基本：画像にリンクを貼る手順について
- aタグ（アンカータグ）の応用：target属性を設定してみる
- aタグの応用：name属性を設定してみる
- 「最後に」：SEOを意識した「aタグ」の利用について
aタグ（アンカータグ）の基本１：リンクを貼る手順について
「aタグ」の最も基本的な使い方になります。
最初に例を見せましたが、当章ではもうちょっと詳しく解説していきましょう。
まず、以下が記述例になります。
上記で言うと、「当サイトのトップページへ」がリンクが設定されている文字列になります。
このように、<a>タグで挟まれた文字列が該当します。
また、「href=」で設定されているURL（上記だと「https://viral-community.com/」）が、リンク先のページになります。
このように、URLで指定するのが一般的です。
例えば、ここを「http://www.yahoo.co.jp/」に変更すると、Yahooのトップページへリンクを貼る事ができます。
では、上記の記述をブラウザ上で表示してみます（下記）
ちゃんと、上記「当サイトのトップページへ」をクリックすると、トップページが表示されると思います。
以上が、「aタグ」の基本形になります。
aタグ（アンカータグ）の基本２：画像にリンクを貼る手順について
前章では、文字列にリンクを設定していましたが、当章では「画像」にリンクを設定してみたいと思います。
手順としては、先ほどと同様で非常に簡単です。
以下が、記述例になります。
<img src=”image.png” >
</a>
上記のように、画像を表示するタグ「imgタグ」を、「aタグ」で挟んでやるだけでOK!です。
「imgタグ」については、こちらで解説しています→img（画像）タグとは？imgタグの使い方と、SEOにおいて画像利用時の注意点をまとめてみた
では、上記をブラウザ上で表示してみましょう。
上記の画像をクリックすると、ちゃんと当サイトのトップページへ遷移したと思います。
「aタグ」では、このように画像にリンクを設定することもできるのです。
aタグ（アンカータグ）の応用１：target属性を設定してみる
「aタグ」には、「target属性」というものがあり、これを設定することで「リンク先ページ」を別画面で表示できたりします。
以下に、例を見せましょう。
上の「別画面で開きます」をクリックしたら、「当サイトのトップページ」が別画面で開き、下の「同画面で開きます」をクリックしたら、同画面で開くことを確認できると思います。
このように、別画面でリンク先ページを開くかを指定できるのが、「target属性」になります。
では、下記に記述例を示します。
・<a href=”https://viral-community.com/” target=”_self”>「同画面で開きます」</a>
上記の、上と下の違いは、「target=」の設定値のみです。
「target=”_blank”」が、別画面表示で、「target=”_self”」が、同画面表示を指定する値になります。
デフォルト設定は、同画面表示になっているので「target=”_self”」は、わざわざ明示的に指定しなくても良いでしょう。
target属性を利用するのは、基本的に「target=”_blank”」を利用したい時のみかと思います。
利用用途としては、例えば「別ドメインのページ」ヘリンクを貼っている場合は、「target=”_blank”」を指定するのが一般的です。
- 同ドメインのページヘのリンク：同画面で表示
- 別ドメインのページヘのリンク：別画面で表示
といった、使い分けをすれば良いと思います。
ドメインに関しては、こちらで解説しています→ドメインとは？２分で「ドメイン」を理解するためのまとめ記事
以上です。
aタグ（アンカータグ）の応用２：name属性を設定してみる
「aタグ」に、「name属性」を指定する事で、ページ内の特定の場所へリンクさせることができます。
例を挙げて説明したほうが分かりやすいでしょう。
以下、リンクをクリックしてみてください。
上記をクリックしたら、当ページの「１章」へ戻ってしまいましたよね。
このように、ページ内の特定の場所へリンクできるのが、「name属性」になります。
では、以下に記述例を示します。
・・・とその前に
まず、「name属性」を設定して、リンクするには、「出発点と到達点」が設定されている必要があります。
今までは、「出発点」のみ意識すれば良かったですが、「name属性」に関しては、”ページ内の特定箇所を指定する” ため、到達点も設定する必要があります。
では、以下に「出発点と到達点」それぞれの記述例を示します。
到達点・・・<a name=”ex-1″>「リンク先」</a>
上記のように、「name属性」を指定するのは「到達点」の「aタグ」のみです。
また、「出発点」の「aタグ」には、到達点を指定するために「href=”#●●●”」と設定する必要があります。
「●●●」には、到達点の「name属性」に指定した値を設定してください。
また、別ページの「到達点」を指定してリンクするには、下記のようにページURLの最後に、「#●●●」を指定してやれば良いです。もちろん「●●●」は、到達点の「name属性」に設定されている値になります。
以上です。
「最後に」：SEOを意識した「aタグ」の利用について
当章では、SEO的に「aタグ」の有効な利用について解説していきます。
ですので、「SEO」に興味のない方は、飛ばしてください。
「SEO」とは、検索エンジンに自分のサイトを上位表示させるために、自分のサイトを検索エンジン用に最適化する事を指します。
この「SEO」において、「aタグ」の扱いは非常に重要な要素となります。
なぜなら、検索エンジンからの評価において「サイトに対しての被リンク」は、非常に重きをおいている要素だからです。
基本的には、「サイトに対しての被リンク数」が多ければ多いほど、検索エンジンからの評価は高くなるのですが、検索エンジンは、「どこから被リンクを受けているのか」だったり、「どのようなアンカーテキストで被リンクを受けているのか」といった詳細な部分もチェックしています。
なので、「aタグ」の扱いに関しても注意しておくことが必要です。
※アンカーテキストとは、「aタグ」で挟まれた文字列の事を指します。
具体的には、下記二点を注意するようにしてください。
-
【アンカーテキストには、リンク先ページを端的に表す文字列を設定する】
当項目は、主に「内部リンク（同じドメイン内のページヘのリンク）」に関して注意すべき事ですが、検索エンジンはサイト内で巡っているリンク（内部リンク）もチェックして「評価」に加えています。
なので、内部リンクを設定する場合は、「リンク先ページを端的に表した文字列」を設定してあげる必要があります。
これによって、検索エンジン（クローラー）は、リンク先のページを正しく認識することができます。※「クローラー」については、こちらで解説しています→【クローラー（Googlebot）とは？】
逆に、「HOME」 だったり 「こちら」 といったアンカーテキストでは、検索エンジンは、リンク先ページが何に関してのページなのかを認識できません。
なので、アンカーテキストにはちゃんと「リンク先ページ」を表した文字列を指定するようにしてください。
-
【他のドメインに関してのリンクには、「rel=”nofollow”」を指定する】
以下、「rel=”nofollow”」を指定した「aタグ」の記載例です。
<a href=”https://viral-community.com/” rel=”nofollow”>記載例 </a>上記のように、「rel=”nofollow”」を指定することで、検索エンジンのクローラーは「リンク先ページ」をチェックしにいきません。
要は、「リンク先ページ」を無視するんですね。では、なぜ「SEO」的に、他のドメインへのリンクに、この「rel=”nofollow”」を指定した方が良いのか？
簡単に言うと、自分のサイトのページの価値（検索エンジンからの評価）を、他のサイトへ分散しないために、この「rel=”nofollow”」を利用します。
厳密に言うと、「PR（ページランク）」といって、「PR（ページランク）」とは、検索エンジンからの評価の指標となるもので、ページランクが高いサイトほど、検索エンジンからの評価が高くなります。
この「ページランク」が、デフォルトでは「リンク先ページ」に分散されてしまうのです。
「内部リンク」の場合は、自分のサイトなので、分散されても良いと思いますが、他人のサイトへ「ページランク」が分散されてしまうのは、それだけ「自分のサイトのページ」の評価が下がってしまうので、よろしくありません。
そこで、その対策としているのが「rel=”nofollow”」なのです。
なので、SEO的にページの価値を上げていきたい人は、他ドメインへのリンクには「rel=”nofollow”」を設定しておくことをオススメします。
以上、二点について注意して「aタグ」を利用していきましょう。