aタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「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”」属性を同時に設定するようにしてください。

参考:リンク種別: noopener(MDN Web Docs)

ページ内リンク

href属性に同一ページ内の移動させたい要素のid属性を指定することで、同一ページ内の別の場所に移動することができます。

<a href=”#(id名)”>アンカーテキスト</a>

画像リンク

imgタグをaタグで囲うことで画像にハイパーリンクを設定することができます。

<a href=”(リンク先のURL)”><img src=”(画像のURI)” alt=”(画像の説明文)”/></a>

SEO対策におけるaタグのポイント

検索エンジンはリンクを辿ってWebページを認識していくため、aタグの設定はSEOの観点からも重要です。SEOにおいて気をつけるべきポイントをいくつか紹介してきます。

アンカーテキストはわかりやすい文言にする

aタグに設定したアンカーテキストは、検索エンジンやユーザーに対してリンク先がどのような内容なのかわかりやすく伝わるテキストにしましょう。短い文章でキーワードを含めると効果的です。

逆に「ここをクリック」、「こちら」とだけ書いてあるアンカーテキストは避け、URLをアンカーテキストに使用するのも基本的には良くないとされています。

参考:リンクを上手に使う|SEOスターターガイド(Google検索セントラル)

画像リンクにはalt属性を設定

画像リンクを設定する際は、imgタグのalt属性にその画像を説明するテキストを入力します。alt属性は検索エンジンにどのような画像なのかを伝える役割を果たします。

リンク先に応じてnofollow属性を使用する

aタグに外部サイトを設定する際は、リンク先のコンテンツに注意する必要があります。リンク先によっては自サイトのSEO評価にデメリットを与える可能性があるためです。

そのような影響を受けたくない場合はaタグに「rel=”nofollow」を追加します。これは検索エンジンに「このリンクをクロールしないように」とリクエストを出すためのものです。自サイトにコメント欄を設置している場合や、有料リンク、SNSへのリンクなどに使用して、自サイトのSEO評価を守ります。

まとめ

aタグには様々な使い方がありますが、SEOの観点では「どのようなアンカーテキストを設定するか」が重要となります。リンク先の内容がユーザーにも検索エンジンにも伝わりやすい文章を設定することがおすすめです。

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

肩書:Webエンジニア兼Webライター
名前:さのくん
経歴:大学在学中にオペレーションズリサーチ分野を学ぶ過程でプログラミングを習得。
その後は不動産業界に従事しつつ、サイドビジネスとしてWebエンジニアを兼業。フロントエンド開発を得意とする。
Webライティング歴:1年超で執筆数は累計30記事を超える
使用言語:C言語, HTML/CSS/Sass, Javascript, Typescript, PHP, Shopify(Liquid HTML)

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次