Webページ同士を繋ぐリンクを配置するためには、a要素を使わなければいけません。他の要素と同様に、a要素も正確な使い方をする必要があります。

今回はa要素の正しい使い方、そして効果的な使い方について解説します。

a要素とは

a01.png
a要素とは、Webページ同士を繋ぐリンクを配置できるもので、非常に重要です。

リンクを作るためには、href属性でリンク先のURLを指定し、開始タグと終了タグの間にアンカーテキストを指定することでリンクを作成できます。
また、a要素にはURL以外にも様々なリンク先の情報を付与できます。(後述

a要素の効果的な使い方

SEOを正しく意識してa要素を設定するにはどうすればいいのでしょう。

クローラーリンク先のページを知るために、aタグに囲まれたアンカーテキストの文章を認識します。そして、リンク先のURLアンカーテキストの文章に関連すると認識します。面白い事例があります。

a02.jpg
Googleで「出口」と検索するとYahoo! Japanが表示されます。一見するとまるで関連がありません。これは、アダルトサイトなどで「出口」というアンカーテキストリンク先がYahoo! Japanになっていることが理由です。

このように、アンカーテキストSEOに密接に関連しています。このことを意識して、アンカーテキストにはリンク先が分かるようにする必要があります。また、当然のことながら対策キーワードの詰め込みはスパムと認識されてしまいます。気をつけましょう。

良い設定例

▼リンク先の内容がアンカーテキストから分かる
 <a href="/mbp">MacBook Pro製品ページはこちら</a>

悪い設定例

▼リンク先の内容がアンカーテキストから分かりにくい
 <a href="/top">トップページ</a>
 <a href="https://ferret-plus.com">https://ferret-plus.com</a>

▼アンカーテキストに対策キーワードを詰め込んでいる
 <a href="/top">SEO・リスティング広告・広告効果測定・Web集客</a>

href以外にa要素に付与できる属性

hreflang属性

hreflangはリンク先の言語情報を記載できます。例えば、英語ページリンクする場合、

<a href="/english" hreflang="en">英語版ページはこちら</a>

このように設定することで、検索エンジンに英語版ページリンクしていると伝えられます。

rel属性

rel属性はリンク先の位置づけを記載できます。指定できる位置づけとしては以下のようなものがあります。

属性 意味 使い方
alternate 代替文書(別言語版、別フォーマット版など)を指定します。
author 著者情報を指定します。
bookmark 文書の固定リンクを指定します。
nofollow 重要ではない・信頼できない・有料リンクを指定します。
noreferrer リンク先にリファラを送信しない旨を指定します。
prefetch 事前にリンク先のページ情報を取得します。
prev ページネーションにおける現在の前のページを指定します。
next ページネーションにおける現在の後のページを指定します。
help ヘルプへのリンクを指定します。
icon アイコンをインポートします。
license ライセンス文書を指定します。
search 検索機能へのリンクを指定します。
tag 現在のページタグページを指定します。

target属性

target属性は、リンクページをどこに表示するか指定できます。

属性 意味 使い方
_blank 新たなウィンドウを開いてリンクページを表示
_self 現在のウィンドウにリンクページを表示
_parent 1つ上にフレームにリンクページを表示
_top 最上位のフレームにリンクページを表示

まとめ:a属性を使ってわかりやすいページを作ろう

a属性はSEOにおいて大切な要素の一つです。正しく使い、検索エンジンにもユーザーにもわかりやすいページ作りを目指しましょう。