名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

<a>タグってなんだろう？と疑問に思う方も多いのではないでしょうか？
HTMLを使用したホームページやワードプレスなどでのブログ記事の作成を行ったことがある方は見かけたことがあるかもしれませんが、<a>タグを正しいルールで設定することで、ユーザーの利便性向上だけでなく、SEO対策としても効果的なことは、実はあまり知られていません。
そこで今回は、SEOにおいて重要なHTMLの要素の一つであり、ホームページやブログ記事を作成する上では欠かせない<a>タグの意味と正しい設定方法についてお伝えしていきます。

1.そもそも<a>タグって何？

<a>タグとは、「アンカー(anchor)」の略で、HTMLのタグの一種です。ホームページ内で他のページへのリンクを貼る際に、リンクの開始位置と終了位置を指定するために使用します。つまり、ホームページ上でリンクを貼る際に使用するタグを<a>タグといいます。
ホームページやブログ記事の更新などに携わったことのある方は、ソースコード内で次の様な記述を見かけたことがあるのではないでしょうか。

このソースコードは、実際に公開されたホームページ上では、以下のように表示されます。このリンク表示は、HTMLを全く知らない方でも、見かけたことがあると思います。

この様に、ホームページ制作やブログ記事の投稿には欠かせない<a>タグ。
この<a>タグを上手く活用して、コンテンツの質を高めることが大切です。
続いては、そんなよく使用される<a>タグの種類について詳しく解説していきます。

2.<a>タグの種類と正しい設定方法

ここまでは、<a>タグがどんなものなのかをお伝えしてきましたが、<a>タグには様々な属性があるため、その中でも特によく使われているものをいくつかお伝えしていきます。

href属性の<a>タグ

前項の「1.そもそも<a>タグって何？」で例に挙げた<a>タグの中には「href」という言葉が入っています。これは、「ハイパーテキストリファレンス (hypertext reference)」の略で「エイチレフ」と読みます。そして「href」と書かれた<a>タグのことをhref属性の<a>タグと呼びます。
このhref属性の<a>タグをホームページ内で使用することで、開始タグと終了タグで囲まれたテキストがアンカーテキスト(リンクされている部分のテキスト)となり、ユーザーがクリックすることで、他のページへリンクさせることができます。

title属性の<a>タグ

次は、<a>タグの中に、titleという言葉が書かれたtitle属性の<a>タグです。このtitle属性の<a>タグは、上述のhref属性の<a>タグを補完するもので、リンク先のページを説明する役割を果たします。ユーザーに対してリンク先のページはどんなページなのかを伝えることができます。
ホームページ内に以下の記述を行うことで、カーソルをリンク部分に合わせた際に、title属性に記述した説明が表示される様になります。

なお、title属性を記述することによって得られるSEO効果はないと言われていますが、ユーザビリティの向上といった面では大いに役立ちます。

id属性の<a>タグ

次は、<a>タグの中に、先ほど解説したhrefやidという言葉が書かれたid属性の<a>タグです。このid属性の<a>タグは、同一のページ内で、目的の箇所にジャンプさせたい場合に使用される<a>タグです。
一つの例として、本記事の【目次】にも使用していますので、ぜひご覧ください。なお、Id属性の<a>タグは以下の様に記述します。

なお、ジャンプさせたい目的の箇所が、別のページにある場合は、以下の様な記述になります。

target属性の<a>タグ

次は、<a>タグの中に、target(ターゲット)という言葉が書かれたid属性の<a>タグです。target属性の<a>タグを活用することで、リンク先のページを別画面で開くか、同じ画面で開くかを設定することができます。
ホームページ内に、以下の様に「target=”_blank”」と記述することで、リンク先ページを別画面で表示することが可能になります。

なお、同じ画面で開く場面は「target=”_self”」という記述をしますが、同じ画面で開く動作はデフォルトで設定されているため、わざわざ指定する必要はありません。

rel属性の<a>タグ

次は、<a>タグの中に、relという言葉が書かれたrel属性の<a>タグです。relとは、「関係」を意味する「relation(リレーション)」の略で「レル」と読みます。このrel属性の<a>タグは、リンク先のページがどういうページなのかを検索エンジンに伝えるために使用される<a>タグです。
なお、rel属性の<a>タグは、次の様に記述します。

この記述をすることにより、リンク先がホームページのトップページであることが明確になり、検索エンジンがページの理解をしやすくなります。そのため、Googleからの評価も向上し、SEO対策にもつながります。
そんなrel属性にもさらに細かな種類があるため、ここからはその中でも使用する機会の多い２つの属性について詳しく解説していきます。

prev/next

次は、<a>タグの中に、prevまたはnextという言葉が書かれたrel属性の<a>タグです。prev(プレブ)とは「Previous(プリビュース)」の略で「以前の」という意味であり、next(ネクスト)とは、皆さんもご存知のとおり「以降の」といった意味があります。
このrel属性の<a>タグは、投稿された日付順に記事を読んだり、遡って過去の記事を読みやすくするために使用される<a>タグです。
この２つが頻繁に使用されるシーンは皆さんもよく見る、以下の様なブログ記事などの一覧ページ下部にある、ページ数の表示です。

弊社のコラム一覧ページを例にすると、「http://onca.co.jp/column/」内に、 < a href=”http://onca.co.jp/column/page/2/”rel=”next” > 2 </a>
といった形でリンクを設定することで、検索エンジンに対して、該当ページは「http://onca.co.jp/column/page/2/ は http://onca.co.jp/column/ の2ページ目だ」と認識させることができています。

nofollow

次は、<a>タグの中に、nofollowという言葉が書かれたrel属性の<a>タグです。このrel属性の<a>タグは、検索結果に表示させたくないページのリンクに記述することによって、リンク先ページを検索エンジンに知らせない様にすることができる<a>タグです。
nofollow(ノーフォロー)とは、スパム対策を主な目的とし、「このリンクを辿ってはならない」という指示を、検索エンジン(クローラー)に指示することができます。
Googleからのページ評価が低いページをリンクとして張ってしまうと、ページ評価の低いサイトと自社のページが同一とみなされてしまい、自社のページ評価に影響を与える危険性があります。
そのため、Googleからのページ評価が低いサイトのリンクを止むを得ず張る場合は、このnofollowを記述することが、SEO対策として重要です。
外部の有料サイトや信頼できないコンテンツに対するリンクを貼る場合や、ログイン用のページなど、リンク先ページを検索結果に表示させたくない場合に、次の様に正しく記述することで、検索エンジン(クローラー)をリンク先のページへ遷移させない様にします。

nofollowの性質や詳しい用途については、Googleが公開しているヘルプにてさらに詳しく解説されていますのでご参照ください。

３.<a>タグがもたらすSEO対策への影響

本記事では、<a>タグに付随する属性の種類や設定方法について解説しました。
基本的に<a>タグは、ユーザーの利便性のために活用するものですが、正しい方法で<a>タグを設定することによって、SEO効果も期待できます。逆に不適切な<a>タグの記述を行うと、ホームページの評価を下げる要因となりますので、十分な注意が必要です。
先述したとおり、<a>タグを正しく設定することで、ユーザーがホームページを見やすくなるのはもちろんのこと、Googleにとっても、ホームページの構成を理解しやすくなり、SEO対策としての効果を発揮します。
リンク先のページ評価には「どのようなアンカーテキストで、そのページにリンクが貼られているか」という要素が関わってくるため、リンクを貼る際に、アンカーテキストに含まれる文章は、SEO対策上でも重要とされています。
そのため、内部リンク・外部リンクのどちらにおいても、リンク先の対象のページを適切に表すような内容のアンカーテキストを設定するように心がけましょう。

 4.今回のまとめ

<a>タグとは、ホームページ上でリンクを貼る際に使用するHTMLのタグの一種で、ユーザーの利便性向上やSEO対策をする上において必要不可欠なタグです。
今回は、その中でもさらに、他のページへリンクさせることのできるhref属性やリンク先のページを説明する役割を果たすtitle属性など、ユーザビリティの向上やSEO対策を行う上でも役立つ<a>タグについて解説してきました。
今回お伝えした<a>タグの正しい設定方法を活用して、適切なSEO対策を行い、ユーザーの利便性向上とともに、ホームページの価値を高めていきましょう。