HTMLのaタグ(リンク)はどう使う？SEO的な観点からも解説！

HTMLとCSSの基礎を学んでいくシリーズ、今回はaタグ(リンク)について解説していきます！

解説すること

リンクの書き方
リンクのデザインを変える方法
リンクがページの評価に及ぼす影響

リンクを作成することは基本中の基本ですが、今回はより詳細に解説していこうと思います！

前回のステップ:デベロッパーツールの使い方

よりよいデザインを目指すためにchromeの検証機能―デベロッパーツールの使い方について紹介します。この便利機能なしではデザインをいじるのは難しく、私も多用しています。レスポンシブ対応できているか見る方法もあり、「デザインが崩れていて読みにくいor読めない」という理由だけで読者を逃がすことが無いようにします。

1.HTMLでaタグ(リンク)を書くには

基本的な書き方は以下のようになります。

分かりやすい例を用意しました。

例:トップページに戻ります

HTML

<a href="URL">リンクの文字</a>

このような書き方をするだけでリンクは簡単に作れます。

別タブで開くリンクを作成する

先ほどのリンクはクリックしても、同じタブで遷移します。

しかしながら、別タブで開いてほしい場面も多々あります。

例えば、ブログの途中で「参考記事はこちら～」といった場合、参考にした後に戻ってきてほしいはずです。

そういった場合には、以下のように書きます。

例:トップページを別タブで開きます

HTML

<a href="URL" target="_blank">リンクの文字</a>

このように、target="_blank"とつけることで、別タブで開くリンクを作れるというわけです。

画像のリンクを作るには？

画像でリンクを作ってみましょう。

例えば、以下の画像をクリックすると、カテゴリーページに飛ぶようにしています。

作り方は簡単で、画像のimgタグをaタグで囲ってあげるだけです。

HTML

<a href="URL"><img src="画像のURL" /></a>

画像についてわからなければ、以下の記事でチェック

【初心者向けHTML入門】学習のための基本まとめ

Webページを自分で作るときに欠かせないのがHTML。これから始めるHTML入門のページになっています。今回は、そんなHTMLについて図やイラストなどを多く使用して基本的な部分を解説していきたいと思います！前半ではHTMLについてとコードの練習方法、後半ではよく使うタグについて紹介していきます。

2.aタグ(リンク)のデザインについて

リンクのデザインについて少しずつ見ていきましょう！

リンクのデザインを整えることで、頑張ればボタンのように見せることも可能ですが、今回は基本の部分にフォーカスして解説します。

リンクの下線を引く

リンクには、どのWebサイトにも大抵下線がひかれています。

これは昔からの暗黙のルールみたいなもので、下線があるほうが「リンクなんだ」と認識されやすいです。

下線あり:トップページへ
下線無し:トップページへ

CSS

.underline-link{/*下線あり*/
  text-decoration: underline;
}

.none-underline-link{/*下線なし*/
  text-decoration: none;
}

このように、text-decorationというプロパティを使用して下線の有無を操作することができます。

といっても、大抵のサイトはなにもせずともaタグを使えばデフォルトで下線が引っ張られていることがほとんどです。

リンクの色を変えたい

リンクの色を変える方法は簡単です。

文字の色を変える際にすることと一緒で、colorプロパティを使用するだけ。

トップページに戻るリンク

CSS

a{
  color: #f48fb1;
}

上記のように、a{ ... }とすることでサイト全体のリンクの色を変えることができます。

必ず統一させたいところです。

また、リンクは青色だとリンクだと認識されやすいので、押される可能性が高まります。

今回は説明のためにこのサイトのイメージカラーにしてみました。
わざと青色以外で、イメージカラーを使うのもおしゃれでしょう。

ホバーしたときの色や下線を変える

これまで紹介してきたリンクは、マウスカーソルを合わせることで下線がつきました。

このようにするためには、:hoverというものを使用します。

今回は、リンクにホバーしたときに色を変える方法、下線の有無についてのみさらっと紹介します。

ちなみに、画像のリンクなどは、マウスホバーで半透明にならなければ分かりにくいので、工夫が必要です。
やり方は以下の記事を参考にしてください。

hoverについて、詳しくは以下の記事でチェック

CSSのhover(ホバー)の使い方とサンプルまとめ

トップページに戻ります（ホバーで色を変化)
トップページに戻ります(ホバーで下線を付ける)

CSS

.color-link{/*もともとの色*/
  color: #4f96f6;
}

.color-link:hover{/*ホバーしたとき色を変える*/
  color: #ff8a65;
}

.underline-link:hover{/*ホバーしたとき下線をつける*/
  text-decoration: underline;
}

できる限り、読み手がリンクだと認識しやすいようなデザインを心がけましょう。

訪問済みリンクの色

先ほどのhoverと使い方は同じなのですが、:visitedを使用すれば、訪問済みのリンクのデザインを変化させることができます。

イメージが湧きにくいかもしれませんが、Google検索しているときに、昔検索してクリックしたページは検索結果のタイトルの色が変わっている・・・そんな感じです。

CSS

.visited-link:visited{/*訪問済みのリンクはオレンジ色に*/
  color: #ff8a65;
}

3.SEO的な観点からaタグ(リンク)を見てみる

リンクの役割についても少し紹介しておきます。

まず、SEOとはなにかという話をさらっとしておきます。

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。

リンクも使い方次第で、そのページの価値が上下するということです。（ページの価値が高ければ検索結果の上位にいける！）

ページの価値を上げるような使い方をするにはどうしたらいいか、解説していきます。

リンクにはキーワードを入れるようにしよう

やりがちなのは、「こちら」というリンクの付け方です。(デザインだけリンクっぽくしてます)

この状態だと、記事の順位を決める検索エンジンがリンクをきちんと把握してくれません。

きちんと遷移先の記事のタイトルを入れ込んだり、「〇〇のやりかたはこちら」のような使い方をするようにしましょう。

こうすることで検索エンジンは「〇〇のやりかた」のリンクだと判断してくれますので、ページの評価も上がりやすいです。

画像でのリンクの場合は、画像の説明文を表すalt="画像の説明"を使って、同じように検索エンジンのことを考えた文章を付けてあげましょう。

rel=”nofollow”の使いかた

rel="nofollow"と書くことで、リンク先のページを評価しません。

HTML

<a href="URL" rel="nofollow">リンクの文字</a>

こんな使い方をしますが、「リンク先のページを評価しない」ことでどんな違いが起きるのでしょうか。

リンクを設置すると、検索エンジンはリンク先のページまで見るようになっています。

例えば、リンク先のページが良いサイトだと、リンクを貼りつけた自分のサイトも評価が上がります。

しかしながら、リンク先のページが悪いサイトだと、リンクを貼りつけた自分のサイトは評価が下がってしまいます。

そのため、以下のような状況でしかrel="nofollow"は使わないでしょう。

こんな悪質サイトがあるよ！
みんなにも気を付けてほしいから紹介したい
でも、自分のページの評価が下がるのは嫌
rel=”nofollow”を使えば気にせず紹介できる！

使う場面はないに等しいので、そういうこともあるんだなぁと覚えておけばOKです！

4.まとめ

今回は、リンクについて詳しく解説しました！

ページの価値を上げる上でも重要な役割を果たしていますし、良いサイトからリンクを貼られることでページの評価もあがります。（やりすぎはアウトですが）

リンクのデザインも大事ですが、リンクの役割もしっかり覚えておくことをオススメします！