aタグ(アンカータグ)

aタグ(アンカータグ)とは?aタグを使ってリンクを貼る手順をまとめてみた

aタグ(アンカータグ)とは・・・「HTML」で記述できるタグの1つで、他のページへのリンクを貼る時に利用されます。

「HTML」とは、当ページのように、Webページを作成するために用いられる言語(技術)になります。

インターネット上に公開されているWebサイト(ページ)は、この「HTML」で作成されているのがほとんどです。
また、“ < ” と “ > ” で記述する「タグ」と呼ばれる特殊な記号で、記述されているのが特徴です。

「aタグ」とは、この「タグ」の一種で下記のように記述することができます。

<a href=”https://viral-community.com/” >当サイトのトップページへ</a>

上記を、ブラウザ上で表示(実行)してみると、下記になります。

上記の「当サイトのトップページへ」をクリックすると、当サイトのトップページが表示されると思います。

「aタグ」の説明

このように、他のページを表示するために利用されるのが「aタグ(アンカータグ)」になります。

当記事では、この「aタグ」について、基本から応用までの使い方を順に解説していきます。

また最後に、SEO的に「aタグ」の利用で注意すべき点についてもまとめています。

以下、目次になります。

  • aタグ(アンカータグ)の基本:リンクを貼る手順について
  • aタグの基本:画像にリンクを貼る手順について
  • aタグ(アンカータグ)の応用:target属性を設定してみる
  • aタグの応用:name属性を設定してみる
  • 「最後に」:SEOを意識した「aタグ」の利用について

aタグ(アンカータグ)の基本1:リンクを貼る手順について

a(アンカータグ)の利用手順

「aタグ」の最も基本的な使い方になります。

最初に例を見せましたが、当章ではもうちょっと詳しく解説していきましょう。

まず、以下が記述例になります。

<a href=”https://viral-community.com/” >当サイトのトップページへ</a>

上記で言うと、「当サイトのトップページへ」がリンクが設定されている文字列になります。
このように、<a>タグで挟まれた文字列が該当します。

また、「href=」で設定されているURL(上記だと「https://viral-community.com/」)が、リンク先のページになります。
このように、URLで指定するのが一般的です。

例えば、ここを「http://www.yahoo.co.jp/」に変更すると、Yahooのトップページへリンクを貼る事ができます。

では、上記の記述をブラウザ上で表示してみます(下記)

ちゃんと、上記「当サイトのトップページへ」をクリックすると、トップページが表示されると思います。

以上が、「aタグ」の基本形になります。

aタグ(アンカータグ)の基本2:画像にリンクを貼る手順について

aタグ(アンカータグ)の利用手順2

前章では、文字列にリンクを設定していましたが、当章では「画像」にリンクを設定してみたいと思います。

手順としては、先ほどと同様で非常に簡単です。

以下が、記述例になります。

<a href=”https://viral-community.com/” >
<img src=”image.png” >
</a>

上記のように、画像を表示するタグ「imgタグ」を、「aタグ」で挟んでやるだけでOK!です。
「imgタグ」については、こちらで解説しています→img(画像)タグとは?imgタグの使い方と、SEOにおいて画像利用時の注意点をまとめてみた

では、上記をブラウザ上で表示してみましょう。

上記の画像をクリックすると、ちゃんと当サイトのトップページへ遷移したと思います。

「aタグ」では、このように画像にリンクを設定することもできるのです。

aタグ(アンカータグ)の応用1:target属性を設定してみる

aタグ(アンカータグ)の設定手順3

「aタグ」には、「target属性」というものがあり、これを設定することで「リンク先ページ」を別画面で表示できたりします。

以下に、例を見せましょう。

上の「別画面で開きます」をクリックしたら、「当サイトのトップページ」が別画面で開き、下の「同画面で開きます」をクリックしたら、同画面で開くことを確認できると思います。

このように、別画面でリンク先ページを開くかを指定できるのが、「target属性」になります。

では、下記に記述例を示します。

・<a href=”https://viral-community.com/” target=”_blank”>「別画面で開きます」</a>
・<a href=”https://viral-community.com/” target=”_self”>「同画面で開きます」</a>

上記の、上と下の違いは、「target=」の設定値のみです。

「target=”_blank”」が、別画面表示で、「target=”_self”」が、同画面表示を指定する値になります。
デフォルト設定は、同画面表示になっているので「target=”_self”」は、わざわざ明示的に指定しなくても良いでしょう。

target属性を利用するのは、基本的に「target=”_blank”」を利用したい時のみかと思います。

利用用途としては、例えば「別ドメインのページ」ヘリンクを貼っている場合は、「target=”_blank”」を指定するのが一般的です。

  • 同ドメインのページヘのリンク:同画面で表示
  • 別ドメインのページヘのリンク:別画面で表示

といった、使い分けをすれば良いと思います。

ドメインに関しては、こちらで解説しています→ドメインとは?2分で「ドメイン」を理解するためのまとめ記事

以上です。

aタグ(アンカータグ)の応用2:name属性を設定してみる

aタグ(アンカータグ) 利用手順

「aタグ」に、「name属性」を指定する事で、ページ内の特定の場所へリンクさせることができます。

例を挙げて説明したほうが分かりやすいでしょう。

以下、リンクをクリックしてみてください。

上記をクリックしたら、当ページの「1章」へ戻ってしまいましたよね。

このように、ページ内の特定の場所へリンクできるのが、「name属性」になります。

では、以下に記述例を示します。

・・・とその前に
まず、「name属性」を設定して、リンクするには、「出発点と到達点」が設定されている必要があります。

今までは、「出発点」のみ意識すれば良かったですが、「name属性」に関しては、”ページ内の特定箇所を指定する” ため、到達点も設定する必要があります。

では、以下に「出発点と到達点」それぞれの記述例を示します。

出発点・・・<a href=”#ex-1″>「リンク元」</a>
到達点・・・<a name=”ex-1″>「リンク先」</a>

上記のように、「name属性」を指定するのは「到達点」の「aタグ」のみです。
また、「出発点」の「aタグ」には、到達点を指定するために「href=”#●●●”」と設定する必要があります。
「●●●」には、到達点の「name属性」に指定した値を設定してください。

また、別ページの「到達点」を指定してリンクするには、下記のようにページURLの最後に、「#●●●」を指定してやれば良いです。もちろん「●●●」は、到達点の「name属性」に設定されている値になります。

<a href=”https://viral-community.com/html/a-tag-2748#●●●“>「到達点指定リンク」</a>

以上です。

「最後に」:SEOを意識した「aタグ」の利用について

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タグ」を利用していきましょう。

コメントを残す

メールアドレスが公開されることはありません。