HTMLのaタグとは?基本の使い方・属性・SEO対策について解説

  • スキルアップ
公開日:

Webページを制作していると、ページ内にハイパーリンクを設定する機会が多くあるかと思います。HTMLを使ってコーディングを行なうとき、リンク設定に用いるのが「aタグ」です。aタグはコーディングの際に頻出のタグであり、さまざまな属性を有しています。

実はHTML のaタグはSEO対策にも深く関わる重要なタグ。aタグをしっかり理解し活用することがWebページ制作では大切になります。

この記事では、HTMLのaタグの基本的な使い方や属性、SEO対策としての活用方法について触れていきます。

HTMLのaタグとは

aタグのaとは「anchor(アンカー)」を省略したものです。aタグは、ハイパーリンクの出発点と到達点を指定する役割を持っています。出発点とはWebページの画像や文字、到達点とはリンク先となる他のWebページやファイルのことを指します。

またaタグはhref(エイチレフ)属性やtarget属性など多くの属性を有していることも特徴です。そのためリンクを設定する際に、さまざまな性質を付加させることが可能となります。

なお、Webページ作成で使用されるHTMLについて詳しく知りたい方は、別の記事「HTMLとは?CSSとの違いや代表的なタグも紹介」もぜひご覧ください。

HTMLのaタグの基本的な使い方

HTMLのaタグでリンクを設定した文字の部分を「アンカーテキスト」といいます。

例えば、次のように記述すると、aタグで囲まれた文字列「アンカーテキスト」がアンカーテキスト、ダブルクォーテーションで括られた「https://www.△△△.jp/」がリンク先となります。

<a href="https://www.△△△.jp/">アンカーテキスト</a>

HTMLのaタグの属性

HTMLのaタグには、情報を付加するための属性を指定することができます。ここでは使用する機会の多い5種類の属性を紹介します。

href属性

aタグのhref属性では、ハイパーリンク先のURLを指定することができます。先ほどの例では、「https://www.△△△.jp/」の部分がハイパーリンク先のURLにあたります。つまり、aタグとして設定された文字列「アンカーテキスト」をクリックすると、「https://www.△△△.jp/」に画面遷移することになります。

target属性

target属性では、リンクを開く方法を指定することができます。例えば、次のタグをクリックした場合は「リンク先のWebページを別タブで開く」という動作を行ないます。

<a href="https://www.△△△.jp/" target="_blank">アンカーテキスト</a>

「target="_blank"」を指定すると、元のWebページを表示しているタブを残したまま、別タブでページを開くことができます。そのため、リンク先に移動したユーザーにまたサイトに戻ってきてほしい場合や、複数のWebページを表示したい場合などに有効な表示方法となります。

なお、新しいタブではなく、今表示中のタブに表示したい場合は、空欄にするか、次のように 「_self」 と入力します。

<a href="https://www.△△△.jp/" target="_self">アンカーテキスト</a>

charset属性

charset属性では、リンク先の文字コードを指定することができます。次の例では「UTF-8」の部分が指定された文字コードとなります。UTF-8以外にも、「Shift_JIS」や「EUC-JP」などの文字コードを設定することも可能です。

なお、charset属性はhtml5では廃止されています。

<a charset="UTF-8" href="https://www.△△△.jp/">アンカーテキスト</a>

type属性

type属性では、リンク先のMIMEタイプ(マイムタイプ=ファイルの種類を表す情報)を指定することができます。

以下の例では、「type="text/html"」でファイルがHTMLであることを表しています。

<a type="text/html" href="https://www.△△△.jp/">アンカーテキスト</a>

同じWebページ内にリンクを張る方法

ここまでは、別ドメインのページに向けてリンクを張っていましたが、aタグでは、同じWebページ内にある特定の場所へもリンクを張ることができます。この手法はWebページの「目次」などに使われることが多く、ハイパーリンクをクリックすることでページの特定の見出しまで簡単に移動することが可能です。

「調べたい内容が決まっている」「特定の情報を表示したい」といった、ユーザーの検索意図がはっきりしている場合に、ページ内リンクが役立ちます。

Webページ内へのリンクを設定する際には、aタグのhref属性に「#」と「id」を使用します。まず、以下のように「a href="#●●"」のかたちでハイパーリンクを設定します。

<a href="#link_1">リンク先</a>

次に、同じページ内の遷移する場所を「id=」を使って指定します。

<h3 id="link_1">見出し名</h3>

これで、「<a href="#link_1">」から「<h3 id="link_1">」に遷移するタグを設定することが可能です。

なお、例にある「link_1」は、任意の分かりやすい文字列(例:h3_1, h3_2 など)を設定することができます。

HTMLのaタグの「絶対パス」と「相対パス」

「絶対パス」と「相対パス」は、リンク先のURLを指定する方法です。ここでは、HTMLのaタグの「絶対パス」と「相対パス」について解説していきます。

絶対パスとは

絶対パスは、WebページのURLをすべて記述し、リンク先のページを指定する方法です。

<a href="https://www.△△△.jp/staffing/55/">アンカーテキスト</a>

上の例では「https://www.△△△.jp/staffing/55/」がリンク先として指定されたURLです。URLを省略せずにhttpsから記述するため、aタグ内の文字列が長くなるのが特徴です。

一方で、サイトのどのページから見ても必ず「https://www.△△△.jp/staffing/55/」に遷移することができます。

相対パス

相対パスは、リンクを設定する際に、URLの一部を省略する設定方法です。遷移先のURLを、パスを記述した地点からの「相対的な位置」として記述するため相対パスと呼びます。

例えば、先ほどの例では、相対パスは以下のように省略することができます。

<a href="staffing/55/">アンカーテキスト</a>

この場合、該当リンクの記述ページが「https://www.△△△.jp/」であれば、href属性に記述しているパス「staffing/55/」に、「https://www.△△△.jp/」を付加するため、「https://www.△△△.jp/staffing/55/」がhref属性として認識されるURLになります。しかし、記述ページが「https://www.△△△.jp/test/」の場合、「staffing/55/」に「https://www.△△△.jp/test/」を付加してしまうため、遷移先URLは「https://www.△△△.jp/test/staffing/55/」と変わってしまいます。

本来「https://www.△△△.jp/staffing/55/」とする部分を「staffing/55/」と記述することができるので、コードがシンプルになるものの、記述されているページが変わると同じ記述でも遷移先が変わってしまう可能性があるため注意が必要です。

SEO対策aタグの設置のポイント

HTMLのaタグは、SEO対策にも影響があります。実際に、HTMLのaタグを設定するうえで、SEO観点で気をつけるべきポイントについて見ていきましょう。

アンカーテキストに対策キーワードを反映

HTMLのaタグに設定したアンカーテキストは、検索エンジンがWebページの内容を把握する手段の一つです。そのためアンカーテキストにSEOの対策キーワードを反映すると、検索エンジンに「このWebページはどのような内容なのか」ということを伝えることができるといわれています。

例えば、遷移先のページが「キャリア相談を受け付けているページ」の場合は、アンカーテキストを「キャリア相談についてはこちらへ」と設定します。

よくアンカーテキストに「こちら」だけが設定されていることがありますが、これではaタグでのSEO対策にはなりません。しっかりキーワードをアンカーテキストに指定するよう注意しましょう。

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

検索エンジンは画像の内容を把握することが難しいといわれています。そのため、画像リンクを設定する場合は、alt(オルト)属性にリンク先を示すキーワードを入れて、画像の説明をするとよいでしょう。

<a href="https://www.△△△.jp"><img src="画像.jpg" alt="画像の説明"></a>

上の例では、画像(<img で始まる部分)のリンクに対して「画像の説明」というalt属性による説明が付け加えられています。このalt属性により、検索エンジンにどのような画像なのかを伝えることができるのです。SEO対策としては、この画像の説明部分を「キーワードも含めて記述する」ということになります。

HTMLのaタグを活用してSEO対策を!

Webページ制作では多くのハイパーリンク設定を行ないますが、その際に用いるのがHTMLのaタグです。

HTMLのaタグはただリンク先を設定するだけではなく、「リンク先はどこなのか」「どのように指定のWebページを表示するのか」などの、ハイパーリンクに関わるさまざまな設定を行なうことができます。

またHTMLのaタグはSEO対策に活用することもできます。アンカーテキストには、上位表示を狙いたいキーワードを反映するように心がけるとよいでしょう。

Modisでは、HTML知識を活かしてWebデザイナーやエンジニアとして活躍できる求人を多数取りそろえています。Webページのコーディングを勉強中の方や、転職を検討されている方は、ぜひお気軽にお問い合わせください。

(2021年4月現在)

Modisで探す、HTMLの仕事

IT・エンジニア派遣に特化したModisでは、HTMLの知識を生かしてシステムエンジニアとして活躍できる求人を多数ご紹介しています。

HTMLに関連するコラム