「a要素」の正しい使い方と効果的な使い方

未分類
shutterstock_1016763658_0000

Webサイトで使用することができるHTMLタグは沢山存在しますが、その中でも「a要素」は、検索エンジンにコンテンツの内容を伝える時の指標として使われ、SEO的にも非常に重要度が高いタグだといえます。
検索エンジンにもユーザーにもわかりやすいページ作りを目指すには「a要素」を正しく使う必要があります。

今回は「a要素」について効果的な使い方や、正確な使い方について解説します。もくじ

  1. a要素とは
  2. a要素に付与出来る属性
  3. SEOを意識したa要素の使い方
  4. まとめ

◆a要素とは

a要素とは、HTMLで記述できるタグの1つで、他のページへのリンクを貼る時に利用され、「aタグ(アンカータグ)」と呼ばれます。
基本的な使用方法は、href属性でリンク先のURLを指定し、開始タグと終了タグの間にアンカーテキストを指定し、リンクを作成します。
また、画像にリンクを設定することもできます。

◆a要素に付与出来る属性

a要素(<a>アンカータグ)は属性と組み合わせて使用します。

・href属性
href属性は最も使用頻度が高く、認知度も高い属性です。
Hypertext REFerenceの略で、ハイパーリンクを設置します。
<基本記述例>

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

・title属性
リンクの上にマウスをオーバーした際に、title属性に記述されたテキストが表示されます。
テキストには、リンクに対する説明を記述します。
<基本記述例>

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

・target属性
target属性は、リンク先ページをどのウィンドウ(窓)に表示するか指定できます。
・「_self」:現在表示しているウィンドウで開く(デフォルト)
・「_blank」:別のウィンドウで開く
<基本記述例>

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

・name属性
name属性は、ページ内の指定した位置に移動することができます。
しかし、現在ではname属性はid属性に置き換える事が推奨されています。
<基本記述例>

<a href=”#test”>ここに飛ぶ</a>
~~文章~~
<a name=”test”>ここまで</a>

「ここに飛ぶ」というハイパーリンクをクリックすると、name属性をつけた「ここまで」 の位置まで移動します。

・rel属性
rel属性は、リンク先の位置づけを記載することができます。
・「me」:リンク先は自分の作った別サイトですと伝えることができます。
・「author」:著者情報を表します。
・「nofollow」:リンク先を評価しないという意味で、重要でない、信頼できない有料リンクを指定します。
<基本記述例>

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

◆SEOを意識したa要素の使い方

検索エンジンからの評価において「サイトに対しての被リンク」は、非常に重要視されていて、SEOにおいてa要素の扱いは非常に重要な要素となります。
そのため、アンカーテキストにはリンク先が分かるような文字列を指定しましょう。
「ここ」「こちら」「HOME」などといったアンカーテキストでは、リンク先ページが何に関してのページなのかを検索エンジンは認識できません。

また、キーワードの詰め込みは、検索エンジンにスパムと認識される可能性がありますのでやめたほうがいいでしょう。

◆まとめ

SEO的にも非常に重要性の高い「a要素」。
正しく使えばよりわかりやすいWebページを作ることができます。

「a要素」について理解を深めて、ぜひ有効的に使っていきましょう。