リンクは、サイトのいろいろなところで使われています。日本で最も有名な「Yahoo Japan」のサイトは、リンクだらけです。それ以外にもバナー広告など挙げればキリがないですね。
これを作るのが「アンカータグ(aタグ)」の役割です。このタグは使用頻度も高く、SEO対策上重要な意味があるので、HTMLを勉強し始めた人は是非使い方をマスターしましょう。
作り方は簡単ですが、使い方は幅広いので、なんとなくしかわからないという人もいませんか？でも安心してください。全ての記事を読めば、今後もアンカータグで使う知識はほとんどわかるようになっています。
アンカータグ（aタグ）の基本
aタグの基本構文
アンカータグは、emmet機能がついたエディタを使っていれば、エディタに「a」と打ち、 次に「control + e」と打つとタグが簡単に表示されます。開始タグと終了タグが用意されており、タグ内がリンクとして認識されます。
[html]
<a href=””></a>
[/html]
アンカータグ内に書かれた文字や画像がリンクとして認識されるようになります。
そして、タグ内には「href属性(「複数の文書を相互に結びつける」という意味の「Hyper Text Reference」の略)」があり、「href=””」のダブルクォーテーション内に、繋ぎたいパスなどを書きます。「など」と書いたのは、必ずしも「imgタグ」のようなパスの形を取らない時があり、主に2つのパターンがあります。
(A)同じページのリンクに行く時
(B)別のページのリンクに行く時
[html]
<a href=”ここにリンク先のURLを書きます。”>
A. ここに文字を打てば、文字全体がリンクとなります。
B. ここに画像を入れれば、画像全体がリンクとなります。
</a>
[/html]
aタグの使い方
では、試しに文字にリンクを貼ってみましょう。以下のようにリンクのあるページと、リンクが飛ぶページの2つのファイルを用意しましょう。
「index.hmtl」側に以下のようなアンカータグを書いて、中に「これはリンクです」と書きました。さて、リンクの先ですが、「href属性」に「./sample.html」と書いてください。「./」は同じ階層のファイルに行くときに書きます。ただ、「./」がなくても問題ありません。
[html]
<a href=”./sample.hmtl”>
リンク先へ飛ぶ
</a>
[/html]
最後に、リンクが飛ぶページに何か書いておきます。
[html]
<h1>Hello World</h1>
[/html]
これで準備完了です。表示させてみましょう。以下のように、青字で下線が引かれたリンクができました。
クリックしてください。すると「Hello World」という文字が表示されました。
これは、画像でも可能です。以下のように「imgタグ」を「アンカータグ」で囲ってあげればよいです。結果、画像が表示され、それをクリックすると同じ結果が得られます。
[html]
<a href=”./sample.html”>
<img src=”./img/sample_img_1.JPG” width=”500″>
</a>
[/html]
リンク先の指定
次に、リンク先を指定しましょう。「href属性」の書き方を説明します。目的によって3つの異なる書き方ができます。
| 区分 | 対応 | |
| 同サイト内へのリンク | (A) 同じページの特定の場所へのリンク | idを使って、リンクを飛ばす。 |
| (B)異なるページ内へのリンク | ページのパスを指定し、リンクを飛ばす。 | |
| (C)異なるページの特定の場所へのリンク | ページのパスとidを指定し、リンクを飛ばす。 | |
| (D)外部サイトへのリンク | https://～」から始まるURLを指定することで、リンクを飛ばす。 | |
(A) 同じページ内へのリンク
例えば、ランディングページなど、縦に長いページなどでよく使われます。上部のnavbarのリンクをクリックすると、下の該当箇所にスクロールされるという効果がありますが、まさにそれが可能となります。
まず、同じファイル内のリンク先に「id」をつけたタグを用意しましょう。ここは必ず「id」を指定してください。「class」は同じ名前で何度も利用できますが、「id」は同じ名前で一つしか利用できません。
[html]
<div id=”jump_to_here”>
リンクはここに飛びます。
</div>
[/html]
「id」を指定したら、アンカータグに以下のように書きます。注意点は、最初に「#」をつけて、「id」の指定名をつけることです。
[html]
<a href=”#jump_to_here”>
リンク先へ飛ぶ
</a>
[/html]
これで完成です。青字の「ここへリンク」をクリックしたら、ページが下へ移動し「リンクはここへ飛びます。」へ行きます。
(B)異なるページ内へのリンク
これは「aタグの使い方」の説明と同じですね。
(C)異なるページの特定の場所へのリンク
別のファイル内のリンク先の特定の場所に「id」をつけたタグを用意します。これでリンク先の準備は終わりです。
次に、アンカータグを作りますが、ここで注意したいのは、アンカータグの書き方です。以下のように書きます。
[html]
<a href=”./リンク先のファイル名#idで指定した名前”></a>
[/html]
例えば、別ファイルである「sample.html」の中にある「id=”jump_to_here”」に行きたい時は以下のように書きます。
[html]
<a href=”./sample.html#jump_to_here”>
リンク先へ飛ぶ
</a>
[/html]
これで完成です。青字の「ここへリンク」をクリックしたら、「sample.html」内の「リンクはここへ飛びます。」へ行きます。
(D)外部サイトへのリンク
サイトの内部へのリンクが「相対パス」だったのに対して、外部サイトへのリンクを張る場合は、「絶対パス」を使います。例えば、googleへ飛ばしたい時は、以下のように、googleのURLをhref属性に設置します。これで指定したページへリンクが飛びます。
[html]
<a href=”https://www.google.co.jp/”></a>
[/html]
その他の指定
アンカータグの便利さは、パスの指定だけではない事です。実は、Emailや電話番号、「直前のページへ戻る」指定もできます。やり方も簡単です。
(A) メールの指定
アンカータグにEmailのアドレスを指定するだけです。注意点は、Emailの前に「mailto:」を置くことです。
[html]
<a href=”mailto:[email protected]”>
リンク先へ飛ぶ。
</a>
[/html]
これによって、自動的にメールが開きます。
電話番号の指定
モバイルを利用してリンクを押してもらう時に便利です。注意点は、電場番号の前に「tel:」を置き、番号を指定することです。
[html]
<a href=”tel:000-000-0000″>
リンク先へ飛ぶ
</a>
[/html]
「前のページに戻る」リンクの指定
制作をしていて、以外に便利なのが「前のページに戻る」ボタンです。フォームに記載した情報や予約情報が間違っていた場合などに使ったりします。これは「javascript」という別の言語を使うのですが、以下のコードを設置するだけなので非常に便利です。
[html]
<a href=”javascript:history.back()”>直前のページへ戻る</a>
[/html]
アンカータグを使った効果的なSEO対策のやり方
さて、次に説明するのは、タグ内にテキストを書く時の書き方についてです。幾つかの注意点を守って書くことで有効なSEO対策になります。
アンカーテキストの書き方
- 具体的であること(リンク先の内容がわかる文章であること)
以下のリンクがありますが、SEO対策で有効なリンクは下のリンクです。
下のリンクは、googleの検索エンジンが何のページに行くかを認識しやすい書き方です。
リンク先のキーワードを含める
リンク先のページの代表的なキーワードや検索されたい言葉を含めると検索がされやすくなります。よく見かける「こちらをクリック」、「こちらへ」、「クリック」などはgoogleに認識されずらいワードです。それよりも、記事のタイトルをリンクにしたり、特定の具体的ワードにリンクを貼った方が、ユーザーもgoogleもわかりやすいのです。
アンカーテキストの無効化
「リンクされる」とは「google」に評価されることです。仮に、リンク先が悪質なサイトで、注意喚起のためにリンクを貼り付けたとします。その場合でもクリックされ、ページが見られれば、それは評価されてしまいます。それを防ぐために、アンカータグ内に評価を無効にする「rel=”nofollow”」を入れましょう。
[html]
<a href=”https://www.@@@.com” rel=”nofollow”>悪質なページです。</a>
[/html]
SEOにおける内部対策のテクニックをさらに知りたい人は、「SEOを深く知るために読むべき必読本15選【内部対策からライティングまで】」で紹介している本を読むと理解しやすいでしょう。
CSSによるアンカータグのデザイン変更
下線の削除
アンカータグに現れる下線には、他のテキストとの区別、リンクの目印としてユーザーにとって有効です。しかし、中にはアンダーラインを消したい時もあるでしょう。
その際は、CSSに以下のように指定します。
[html]
a{
text-decoration: none;
}
[/html]
すると、以下のように下線は消えます。
マウスを乗せた時の色の変更
マウスを乗せた場合に色を変更する場合は、「:hover」を使います。
[html]
a:hover{
color: red;
font-size: 20px;
}
[/html]
すると、以下のようにカーソルが乗った時だけ文字の色が変わります。
訪問済みのリンクデザインの変更色の変更
既にクリックしたリンクの色が変わるのはユーザーにとって優しい行為です。その場合は、「a:visited」を使います。ただし、単体では効果が効かない場合がありますので、その際は、デフォルトの状態を示す「a:link」と一緒に使ってください。
[html]
a:link,
a:visited {
color: grey;
}
[/html]
以下のように既にクリックしたリンクは色が変わっています。
まとめ
アンカータグもHTMLでは頻繁に使うタグの一つですので確実にマスターしておきたいものです。特に、注意するポイントは、タグで囲む文字の書き方です。HTMLを学習し始めた方は、制作に集中するあまり、運用面への配慮がかけがちになります。しかし、適切なキーワード設定により、検索エンジンの回遊性が上がり、サイトが高く評価されるようになります。非常に小さな工夫ですが、おろそかにはできません。
