a href=""（リンクタグ）の使い方の解説とSEOで重要度が高い理由

<a>タグはアンカー（船の錨）の略で、リンク場所を指定する時に使われます。

メインとして使われるのは<a href=”https://whitehatseo.jp”>SEOのホワイトハットジャパン</a>といった形式の、リンクタグです。

ウェブサイトで使うことができるHTMLタグは沢山存在しますが、リンクタグ（アンカータグ）は、検索エンジンにコンテンツの内容を伝える時の指標として使われますので、非常に重要度が高いタグだといえます。

今回はリンクタグの使い方と、SEOで<a>タグが重要になる理由を解説します。

<a href=”URL”>（リンクタグ、アンカータグ）

アンカータグ
アンカーテキストが重要な理由

リンクタグの使い方

<a>（アンカータグ）は属性と組み合わせて使います。

複数の属性を記述する際の順序はどのような順序でも構いません。

<a href=”http://example.jp” title=”テスト用のリンクですよ”>test</a>
<a title=”テスト用のリンクですよ” href=”http://example.jp”>test</a>
上記は同じものとして扱われます。

必ず最初にhref属性を指定しなければならないわけではありませんので、複数の属性を記述する場合は、お好きな順番で構いません。

当記事では、わかりやすいように各種属性の最初はhref属性を記述して解説致します。

href属性

最も良く使われていて知られている属性は、href（エッチレフ）属性で、Hypertext REFerenceの略になります。

ハイパーリンクを設置します。

記述方法

<a href=”http://example.jp”>エグザンプルジェーピー</a>

<a href=””>と</a>の間に記述されたアンカーテキストに対して、ハイパーリンクを設置します。

上記の例ですと、エグザンプルジェーピーがアンカーテキストとなります。

title属性

リンクに対する説明を記述します。

マウスのカーソルをリンクに合わせた際に、title属性に記述されたコメントが表示されるようになります。

記述例

<a href=”http://example.jp” title=”テスト用のリンクですよ”>エグザンプルジェーピー</a>

target属性

リンクしたページをクリックした際に、どの窓（ウィンドウ）で開くかを指定します。

_self：表示している窓で開く（デフォルトですので記述しなければ_selfと同じ意味になります）
_blank：別の窓で開く
_top：フレームを解除して表示
_parent：複数フレームを利用したサイトでフレームを１つ減らして表示

_topと_parentは、20世紀ごろに流行っていたフレームを利用したサイトで、どのフレームにコンテンツを表示させるか指定する時に使うものです。

現在一般的なサイトはほとんどの場合、フレームは使われておりませんので、_topや_parentを記述しても、_selfと同じ挙動になります。

なお、target属性を省略した際も_selfを記述した場合と同じ意味になります。

別窓で開く記述例

<a href=”http://example.jp” target=”_blank”>エグザンプルジェーピー</a>

name属性

ページの中の任意の位置に移動する設定ができます。

しかし、後述しますがこのname属性はid属性に置き換える事が推奨されています。

記述例

～～文章～～

上記の例では、「飛ぶよ」というハイパーリンクをクリックすれば、name属性をつけた「ここまで」の位置まで移動します。

id属性での設定方法

id属性を推奨されていますが、古いブラウザでは未対応です。

とはいってもInternetExplorer4以前の古いブラウザが未対応というだけのお話ですので、name属性ではなくid属性で記述しておくといいでしょう。

～～文章～～

<h2 id=”test”>テスト用の見出しです。ここに飛んできます</a>

上記の記述ですと、「飛ぶよ」をクリックすると、「テスト用の見出しです。ここに飛んできます」まで移動します。

なお、別のページで指定されているポイントまで移動したい場合は、

という記述になります。

rel属性

リンク先との関連性を伝えるための属性です。

me：リンク先は自分の作った別サイトですと伝えるために使います
author：著者を表す。Google+と紐付けしてSERPsに著者を表示させる時に使われています。
詳細記事：検索結果に著者情報のリッチスニペットを載せる方法
nofollow：リンク先を評価しないという意味です。クローラーはそのリンク先を辿りませんし、ページランクを渡しません。
詳細記事：rel=”nofollow” 属性の解説とその使い方

記述例

<a href=”http://example.jp” rel=”me nofollow”>太郎のほめぱげ♪</a>

rel=”me” と rel=”nofollow” を同時に記述しています。

リンク先は私のページですが、クローラーは辿らないでください。という意味合いになります。

アンカーテキストが重要な理由

<a href=”http://example.jp”>焼きたてパンの店</a>

ピンク文字の焼きたてパンの店　という文章が、アンカーテキストです。

ユーザーはリンクを見ただけで、「焼きたてのパンの店へのリンクなんだ」とすぐに理解できます。

検索エンジンも同じで、リンク先のURLはパン屋のサイトであることを理解しますし、焼きたてパンとして評価されていると判断します。

良くないアンカーテキストの例

ココ
こちら
クリック
詳細

上記のようなリンクを張りかたをされる人は少なくありません。

外部から獲得する自然リンクの場合、紹介して頂いた「ココ」や「こちら」といったアンカーテキストをコントロールすることはできませんが、ナビゲーション部分等の内部リンクでは、具体的なアンカーテキストを記述するようにしましょう。

具体的なアンカーテキストに変更

<a href=”URL”>ココ</a>→<a href=”URL”>ラーメン一太郎</a>
<a href=”URL”>こちら</a>→<a href=”URL”>株式会社白式へのアクセス</a>
<a href=”URL”>ここをクリック</a>→<a href=”URL”>ノートパソコン大特価キャンペーン</a>
生地へのこだわりの<a href=”URL”>詳細→<a href=”URL”>パンの生地へのこだわり</a>

アンカーテキストだけ見てもどのようなページヘのリンクであるのか理解できるような、具体的なテキストを記述しましょう。

robots.txtファイルの使い方や記述方法を解説します
 引用タグ（blockquote,q,cite）の解説と使い方
 強調タグ(strong,em)の解説と使い方と注意点
 <link rel=”canonical”>（カノニカルタグ）の使い方
 リストタグ(ul,ol,li)の使い方と解説。箇条書きを正しく設定し構造を伝えよう
 robots metaタグ(noindex,nofollow,noarchive)の使い方
 METAタグ(keywords description)の使い方
 rel=”nofollow” 属性の解説とその使い方
 【ロングテールSEO入門5】ロングテールSEOまとめ
 【ホワイトハットSEO入門その1】サイトを作成するまでに決めておくべき項目

a href=””（リンクタグ）の使い方の解説とSEOで重要度が高い理由