この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
aタグとは
aタグとはHTMLのアンカー要素で、Webページの文字や画像にハイパーリンクを設定できます。ハイパーリンクと呼ぶとあまり馴染みが無いかもしれませんが、いわゆる「リンク」のことです。
リンク先をhref属性で指定して、Webページ、ファイル、メールアドレス、ページ内リンク、外部サイトなどに設定可能です。
aタグの基本的な使い方
aタグでリンクを設定した文字の部分を「アンカーテキスト」といいます。リンクの設定は、リンク先のURLをaタグのhref属性で指定します。
<a href=”リンク先のURL”>これがアンカーテキストです</a>
上記の例では、aタグで囲まれた「これがアンカーテキストです」の部分がアンカーテキストとなります。アンカーテキストをクリックすると、hrefで指定した場所に移動します。
aタグの便利な使い方
aタグには便利な使い方がいくつかあります。ここではよく使用されるものを4つ紹介します。
電話番号やメールアドレスを設定する
href属性は、リンク先のURLを指定できますが、URL以外にも電話番号を示す「tel:」やメールアドレスを示す「mailto:」なども使用することができます。
href属性に電話番号を指定する場合の例：
<a href=”tel:03-xxxx-xxxx “>03-xxxx-xxxxに電話する</a>
href属性にメールアドレスを指定する場合の例：
<a href=”mailto:example@example.jp “> example@example.jp にメールを送る</a>
別タブで開く
aタグにtarget属性を使用すると、リンク先のURLを開く方法を指定することができます。
次の例では、リンクをクリックすると新しいタブで開きます。
<a href=”#” target=”_blank”>リンクを別タブで開く。</a>
このように「target=”_blank”」を指定すると、元のタブを残したまま、新しいタブでリンク先のページを開けるため、ユーザーが元のページに戻ってこれやすくなります。
ただし「target=”_blank”」は一部のブラウザにおいてセキュリティ上の脆弱性があるため、「rel=”noopener”」属性または「rel=”noreferrer”」属性を同時に設定するようにしてください。
ページ内リンク
href属性に同一ページ内の移動させたい要素のid属性を指定することで、同一ページ内の別の場所に移動することができます。
<a href=”＃（id名）”>アンカーテキスト</a>
画像リンク
imgタグをaタグで囲うことで画像にハイパーリンクを設定することができます。
<a href=”（リンク先のURL）”><img src=”（画像のURI）” alt=”（画像の説明文）”/></a>
SEO対策におけるaタグのポイント
検索エンジンはリンクを辿ってWebページを認識していくため、aタグの設定はSEOの観点からも重要です。SEOにおいて気をつけるべきポイントをいくつか紹介してきます。
アンカーテキストはわかりやすい文言にする
aタグに設定したアンカーテキストは、検索エンジンやユーザーに対してリンク先がどのような内容なのかわかりやすく伝わるテキストにしましょう。短い文章でキーワードを含めると効果的です。
逆に「ここをクリック」、「こちら」とだけ書いてあるアンカーテキストは避け、URLをアンカーテキストに使用するのも基本的には良くないとされています。
画像リンクにはalt属性を設定
画像リンクを設定する際は、imgタグのalt属性にその画像を説明するテキストを入力します。alt属性は検索エンジンにどのような画像なのかを伝える役割を果たします。
リンク先に応じてnofollow属性を使用する
aタグに外部サイトを設定する際は、リンク先のコンテンツに注意する必要があります。リンク先によっては自サイトのSEO評価にデメリットを与える可能性があるためです。
そのような影響を受けたくない場合はaタグに「rel=”nofollow」を追加します。これは検索エンジンに「このリンクをクロールしないように」とリクエストを出すためのものです。自サイトにコメント欄を設置している場合や、有料リンク、SNSへのリンクなどに使用して、自サイトのSEO評価を守ります。
まとめ
aタグには様々な使い方がありますが、SEOの観点では「どのようなアンカーテキストを設定するか」が重要となります。リンク先の内容がユーザーにも検索エンジンにも伝わりやすい文章を設定することがおすすめです。
