コンテンツ制作ブログ

デジタルマーケティング、コンテンツマーケティング、
データ分析などに関するお役立ち情報を発信

HTMLのaタグ(アンカーリンク)とは?よく使う属性も解説

2021年12月23日

HTMLのaタグ(アンカーリンク)とは?よく使う属性も解説

HTMLのaタグ(アンカーリンク)は、ページ内にリンクを設置する際に使用します。本記事では、aタグを使ってテキストリンクを作る方法と、関連してよく使用される属性について解説します。

当社ではWebサイトのデータ解析を行い、費用対効果の高いWebサイト改善ならびにWeb集客をご提案いたします。データ解析に取り組みサイト改善に取り組みたいという方はこちらも合わせてご覧ください。
Googleアナリティクスやサーチコンソールによるデータ解析とWebサイト改善

目次

aタグ(アンカーリンク)とは?

aタグ(アンカーリンク)とはHTMLに記述するタグのことで、主にWebサイトのページ間にリンクを作るときに使用されます。aタグは「アンカーリンク」のほかに、「アンカータグ」や「リンクタグ」とも呼ばれることがあります。

aタグ(アンカーリンク)の使い方

aタグ(アンカーリンク)を使用してリンクを作るときは、次のように書きます。

<a href=”リンク先URL”>テキスト</a>

<a>〜</a>で囲んだテキストのことを「アンカーテキスト」と言い、リンク先ページを表す適切なテキストを設定できます。

href属性でリンク先を指定する

  1. 以下の「リンク先URL」の箇所にリンク先のURLを設定します。
  2. アンカーテキストをクリックすると、設定したリンク先に飛びます。

<a href=”リンク先URL”>テキスト</a>

次の例では「サイトエンジン」と書かれたテキストをクリックすると、指定したURL(サイトエンジンのWebサイトトップページ)に移動できます。

<a href=”https://www.siteengine.co.jp/”>サイトエンジン</a>

target属性でブラウザの新しいタブでページを開く

aタグ内にtarget属性を指定することで、リンクをクリックしたときにブラウザの新しいタブでページを開くことができます。target属性は以下のように「target=”_blank”」と書きます。

<a href=”リンク先URL” target=”_blank”>テキスト</a>

次の例では「サイトエンジン」と書かれたテキストをクリックすると、指定したURL(サイトエンジンのWebサイトトップページ)がブラウザの新しいタブで開きます。

<a href=”https://www.siteengine.co.jp/” target=”_blank”>サイトエンジン</a>

aタグ(アンカーリンク)のrel属性

aタグにはrel(レル)属性を指定できます。rel属性は現在のページとリンク先のページの関係を検索エンジンに伝えることができます。ここでは、rel属性の中でもよく使用されるnofollow(ノーフォロー)属性を紹介します。nofollow属性は次のような場合に使用します。

  • そのリンクとサイトを関連付けたくない場合
  • リンク先のページをサイトからクロールさせないようにする場合

リンク先のページにリンク評価を渡したくない場合に有効です。信頼できないページに対してリンクを設定する場合に使用しましょう。aタグ内には次のようにnofollow属性を指定します。

<a href=”リンク先URL” rel=”nofollow”>テキスト</a>

まとめ

aタグを使ってテキストリンクを作る方法と、関連してよく使用される属性について解説しました。記事を作成してリンクを設置する際は、ここで紹介したtarget属性やnofollow属性を使用してみてください。

当社ではWebサイトのデータ解析を行い、費用対効果の高いWebサイト改善ならびにWeb集客をご提案いたします。データ解析に取り組みサイト改善に取り組みたいという方はこちらも合わせてご覧ください。
Googleアナリティクスやサーチコンソールによるデータ解析とWebサイト改善

関連記事

ページ内リンク(アンカー)の設定方法!WordPressでスクロールさせるには?

pタグとは?しっかり使いこなしてWeb制作に生かそう

神谷 祐貴

この記事を書いた人

神谷 祐貴

Web制作・広告物制作のディレクター、オウンドメディア運用などの経験を経て、サイトエンジンにWebマーケターとして入社。現在は自社オウンドメディアやSNSの運用、Twitter・Facebook広告やセミナー運用を担当している。

CONTACT

お問い合わせ