皆さんはHTMLタグの一つである「aタグ」の使い方について正しく理解して使えていますか？
aタグの使い方はWeb制作に関わる方や、ブログ運営をされている方にとっては必須の知識になります。
aタグと聞くと、ページ同士でリンクを張るイメージが強いかもしれませんが、それだけではありません。
もしもaタグを正しく理解して使うことができると、SEOで上位表示しやすくなったり、ユーザビリティーの向上に繋がり、直帰率を抑えてサイトを隅々まで徘徊してくれるようにも出来ます。
そこで今回はaタグの基本的な使い方からSEOなども考えた、実践的な使い方について解説していきます。
aタグで何ができるのか
aタグとはAnchor (アンカー) の略であり、ページからページへリンクを張るハイパーリンクと言う文書ファイル同士を結びつける仕組みを使いページ間の行き来を行う際に使われるHTMLタグです。
例えば、Wikipediaを参照するリンクを張る際は、このようにすることでページ同士をaタグによって繋げることが出来ます。
もっと具体的に言うとaタグはHTMLのタグですので「<a href="https://ja.wikipedia.org/wiki/">テキストリンク</a>」の形でコーディングすることによって上の文章と同じ結果を得ることが出来ます。
ポイントは「href」と呼ばれる属性を使っている点でして、ここに書き込まれたURLにリンクが張られる仕組みになっています。
また、aタグには「href」以外にも様々な属性を持たせることができるようになっていて、ページにリンクを張る方法を細かく指定したりすることも可能です。
そして、リンクを張る時にaタグを正しく扱うことができれば、GoogleやBingなどの検索エンジンからの評価を受けやすくなりSEOに良い影響をもたらすこともあります。
aタグでリンクを張る際の主な属性や使われ方については下記解説をご覧ください。
リファラ
リファラとは簡単に言うと、ユーザーがリンクを踏んだ際に遷移するページ先で、その人がどのようなURLからアクセスしてきたかの情報を得られる仕組みです。
aタグには、このリファラを制御する仕組みがあり、「ref」属性を用いてこれらを操作します。
<a href="https://ja.wikipedia.org/wiki/" ref="noreferrer">リファラを情報を送信しない</a>
| ref="noreferrer" | リファラ情報を送信しない |
|---|
フォロー
フォローとはリンクしたページ同士で関連させたい場合や、クローラーにリンクをたどらないようにコントロールする機能があります。フォローの指定は「ref」属性を用いて行います。
<a href="https://ja.wikipedia.org/wiki/" ref="nofollow">クロールさせない</a> <a href="https://ja.wikipedia.org/wiki/" ref="follow">クロールさせる</a>
| ref="nofollow" | リンク先のサイトをクロールしない |
|---|---|
| ref="follow" | リンク先のサイトをクロールする |
内部リンク
内部リンクとは自サイト内に張り巡らせるリンクのことを言います。
内部リンクを上手く活用することによって、クローラーがページの重要性を判断してくれるようになるので適切に張ることが重要です。
例えば、「HTMLとは」と書いたページから「aタグとは」と書いたページに内部リンクを張ることでページ間の関連性がハッキリとしてクローラビリティの向上に繋がり、SEO上優位にはたらく場合があります。
具体的にコードに表すと以下のような記述になります。
<!-- 「HTMLとは」のページから「aタグとは」のページに内部リンクを張ったと想定する --> <a href="https://hoge.com/aタグとは">aタグとは</a>
外部リンク
外部リンクとは、自サイトから他の外部サイトに張るリンクのことを言います。
例えば、「https://news.yahoo.co.jp/categories/it」などの自サイトとは別のドメインに属している下層ページにリンクを張るこも外部リンクにあたります。
具体的にコードに表すと以下のように記述できます。
<a href="https://news.yahoo.co.jp/categories/it">リンクテキスト (外部リンク)</a>
aタグの基本的な使い方と応用方法
ここまでaタグのリンクの指定方法について解説してきましたが、ここからはユーザビリティを向上させるための仕組みやコーディングする際に役立つaタグの実践的な使い方について解説していきます。
具体的にはaタグを使いユーザーにリンクの状態を伝えるための手法や、aタグに指定できるCSSのプロパティについての解説です。詳しくは下記説明をご覧ください。
aタグに下線を引く (underline)
aタグはデフォルトで下線が引かれている状態になっていますが、リセットCSSなどでデフォルトのスタイルが打ち消されている場合などにはCSSでaタグのスタイルを上書きする必要があります。
リンクに下線が引いてあるとリンクテキストであることが分かるので、サイトの使いやすさが向上します。
具体的には以下のようにCSSの「text-decoration」プロパティを指定して下線を引く形になります。
HTML
<a class="underline-anchor" href="#">リンクテキスト</a>
CSS
.underline-anchor {
text-decoration: underline;
}
aタグのリンクを別タブで開く (target)
aタグではリンクを踏んだ際に遷移先のページを別タブで開くように指定できる属性があります。
例えば、「https://ja.wikipedia.org/wiki/」のリンクをページを別タブで開きたい場合aタグの属性に「target="_blank"」と指定することで実現することができます。
リンクを別タブで開く事によって、ユーザーは別のページを開きながらリンク元のページも見ている状態になるので、元いたページを離脱することなく最後までコンテンツを見てくれる確率が高まります。
具体的には以下のようにHTMLを記述します。
<a href="#" target="_blank">リンクテキスト</a>
aタグでクリックイベントが発生した時にJavaScriptを実行する (onclick)
HTMLにはクリックイベントが発生した時に何かの処理を実行させる仕組みが備わっています。
例えば、aタグがクリックされた時にアラートを表示したい場合は属性に「onclick="alert('aタグ');"」とすることでリンクテキストがクリックされた時にダイアログが表示されます。
onclick属性の利用シーンとしてはURLに遷移する前に何らかの処理を挟みたい場合などに使われます。
具体的にコードに起こすと以下のようなHTMLになります。
<a href="#" onclick="alert('aタグ');">リンクテキスト</a>
aタグを無効化する
aタグにリンクを張っている場合でもクリックされても遷移させない方法があります。
例えば、リンク先のサイトが未完成であったり改装中だった場合に、ひとまずhref属性にURLを書き込みますが、ユーザーには遷移させたくない場合などに使われることが多いです。
具体的には以下のようにHTMLとCSSを書くことで実現できます。
HTML
<a class="disable-anchor" href="#">リンクテキスト</a>
CSS
.disable-anchor {
text-decoration: none;
pointer-events: none;
}
img要素にaタグでリンクを張る
img要素にaタグでリンクを張ることも可能です。
やり方はimg要素を包含する形でaタグをコーディングすることで、実現することができます。
画像をaタグでクリックできるようにすることで、テキストリンクよりも目だ立たせることができるので、ユーザーにクリックされる確率が高くなる場合があります。
具体的なコーディング方法については下記HTMLのサンプルコードをご覧ください。
<a href="#">
<img src="hoge.jpg" alt="画像にリンクを張る">
</a>
aタグにCSSで色をつける
aタグに色を付ける場合、昔はcolor属性が使われていましたが、今はCSSで色を付けるのが一般的です。
例えば、テキストリンクに任意の色を付けることができれば、自サイトのデザインを生かしながらリンクを張ることができるのでサイト全体で統一感のある仕上がりになります。
具体的には下記のコードのようにHTML・CSSを記述します。
HTML
<a class="color-anchor" href="#">リンクテキスト</a>
CSS
.color-anchor {
color: #ff5500;
}
aタグのhover時にCSSで下線の位置をズラす
a要素にホバーした時にHTML要素の挙動を変更したい場合は、CSSでセレクタに対して「:hover」と書く必要があります。
ホバーした時の挙動を変えることによって、ユーザーに要素がクリックできることを知らせることができるので、「:hover」の使い方は必ず覚えておきましょう。
ポイントは「:hover {}」の中にhover時の状態を指定している点です。
具体的には以下のようにHTMLとCSSを記述することで、実現することが可能です。
HTML
<a class="hover-anchor" href="#">リンクテキスト</a>
CSS
.hover-anchor {
text-decoration: none;
color: #0055ff;
border-bottom: solid 1px #0055ff;
}
.hover-anchor:hover {
padding-bottom: 0.1em;
}
まとめ
今回はaタグの使い方と実践的な応用方法について解説してきましたが、いかがでしたでしょうか？
aタグはHTMLの中でも最も重要なタグの一つですので、必ず正しい使い方を覚えておきましょう。
特にコーディングを仕事としている方は品質の高いWebサイトを作る必要があるので必須知識になります。
それでは皆さん、良いコーディングライフを！