<a>タグとは?a要素でよく使われる3つの属性とアンカーテキストについて

SEOにおいて重要なHTMLの要素の一つであり、リンクの出発点と到達点を指定するタグである<a>タグについて解説しています。

<a>タグとは

<a>タグとはHTMLのタグの一種です。<a>は「アンカー(anchor)」の略で、リンクの出発点と到達点を指定するために使われます。

様々な属性を持ちますが、リンク先を指定するhref属性、対象となるファイルへの関係を指定するrel属性などが比較的よく使用されます。

よく使われる属性

href属性

<a href=”https://www.seohacks.net/”>SEO Hacksのトップページ</a>

指定された値のファイルにリンクを張ります。開始タグと終了タグで囲まれたテキストがアンカーテキストになります。値は相対パスでも絶対パスでも問題ありません。

rel属性

対象となるファイルへの関係を指定します。属性値としてcanonical、next、hreflang、nofollow、prev、などがあります。

canonical

ページ内容が類似もしくは重複しているURLが複数存在する場合に、検索エンジンからのページ評価が分散されないよう、正規のURLがどれなのかを検索エンジンに示すために用いる記述です。

関連:canonical(カノニカル)とは?記述方法やSEOへの効果、必要性について

nofollow

クローラーに対して、「このリンクをたどってはならない」という指示を出すことが出来ます。

外部の有料サイトや、信頼できないコンテンツに対するリンクを張る場合や、サイト内の検索エンジンに評価される必要が無いページ(ログイン用のページなど)に対して設定する場合などに利用されます。

従来、SEO上のテクニックとして「ページのリンクジュースを外部のページに譲らないためにnofollowを利用する」という手法が存在しましたが、現在のところヒューマンエラーのリスクや工数に見合うSEO上の効果は無いと考えられています。

UGC(User Generated Contents)で設置されたリンクや、広告のリンクにnofollowを用いられてましたが、2019年9月に、これらの用途としてはugcsponsoredというより具体的な属性値がサポートするとGoogleが発表しました。nofollowの性質や用途については、以下のGoogleが公開しているヘルプや、当ブログのエントリーにより詳述されております。

関連:Googleウェブマスターツールヘルプ『特定のリンクに対して rel=”nofollow” を使用する』

関連:nofollowとは?nofollowの設定方法とugc・sponsoredの違い

hreflang

複数の言語や地域で同じ内容のコンテンツを展開している場合、適した言語・地域向けのページであることをGoogleに示す必要があり、そのために必要なのが言語アノテーションである「hreflang」です。

在日米国大使館・領事館の日本向けのページでは、英語向けのページへ言語アノテーションが利用されています。

例)在日米大使館と領事館での記述

<link rel="alternate" href="https://jp.usembassy.gov/" hreflang="en" />
<link rel="alternate" href="https://jp.usembassy.gov/ja/" hreflang="ja" />

上記のように、ページには自言語を含めた多言語で対応するページへのアノテーションをすべて記述します。

関連:ページのローカライズ版について Google に知らせる – Search Console ヘルプ

関連:【多言語・多地域サイトを初めて制作する方へ】サイトの国際展開で抑えておくべきSEO要件

prev/next

追記:2019年3月現在、Googleの検索エンジンはprev/nextのサポートを終了していたことを明かしました。Google Webmastersのツイート
つきましては、下記prev/nextの記述につきましては、rel属性の1つとして読んでいただければと思います。

主にページャーなどで使用されます。複数のページを持つ一覧ページなどで、「リンク先はこの一覧の2ページ目である」といった指示を出すことができます。

これによってクローラーはページの関連を理解することができ、「1ページ目」と「2ページ目」が別々のページとして評価されるといった非効率な事態を避けることができます。

本ブログの一覧ページを例にすると、「https://www.seohacks.net/blog/」内に、

<a href=”https://www.seohacks.net/blog/page/2/” rel=”next”>2ページ目へ</a>

といった形でリンクを設定することで、検索エンジンに対して「https://www.seohacks.net/blog/page/2/https://www.seohacks.net/blog/の次のページなのだな」と認識させることが出来ます。

関連:ページネーションとは(ページ送りとは)

target属性

リンク先ページを別画面で開くか、同じ画面で開くかを設定します。

こちらの値をtarget=”_blank”にすることで、リンクを別画面で表示することが可能です。

同じ画面で開く場合はtarget=”_self”になりますが、デフォルトで設定されているため、わざわざ指定する機会は少ないでしょう。

画像でリンクを張る

画像でリンクを張るためには、アンカーテキストの代わりに画像を指定するタグを<a>タグで囲うことになります。

例)SEO HACKSのロゴ画像

<a href="https://www.seohacks.net/" class="l-header__seohacks-logo"><img src="/common/img/img_seo-hacks_logo.svg" alt="SEO HACKS" /></a>

SEO上の注意点

リンクを張る際にアンカーテキストに含まれる文言はSEO対策上で重要になります。リンク先のページの評価には「どのようなアンカーテキストで、そのページにリンクが張られているか」という要素が関わってくるためです。

内部リンク、外部リンクのどちらにおいても、リンク先の対象のページを適切に表すような内容のアンカーテキストを設定するよう気を付けて下さい。

また、SEO対策としてだけでなく、ユーザーのクリックしやすさというのもアンカーテキストの重要なポイントです。ユーザーの興味が沸くようなアンカーテキストを心がけましょう。

SEO対策の全体像、検索エンジンの仕組みをより詳しく学びたい方はこちらの記事もご覧ください。
SEOとは?SEO対策を検索エンジンの仕組みと絡めて技術要件、コンテンツ制作など詳しく解説

関連:内部リンクとは

サイト内検索

SEO・サイト運用・コンテンツマーケティングでお困りの際には ぜひお気軽にご相談ください

お問い合わせはこちら