今回はHTMLの基礎であるアンカータグについて学んでいきます。目次が作れたり、ランディングページやブログなどでページ一番下まで読んで、もう1度最初から読みたいと思った時に、何回もスクロールさせずにワンクリックで戻れたら便利ですよね。
アンカータグが理解できるようになると
- 目次が作れるようになります
- 同じページ内でリンクを作り、ワンクリックで移動できるようになります
- サイト内でカテゴリ分ができるようになります
目次
アンカーの由来は錨!?
早速アンカーについて学んでいきますが、そもそもなぜアンカーというのでしょうか。アンカー（anchor）を辞書で調べると「船の錨」とでてきます。錨は船がどこかへ行ってしまうのを防ぐために海底に爪を刺して抵抗力を作ります。
つまりアンカーを使用したところが拠点（ポイント）となります。これをイメージしておくと内容の理解が深まりますので頭に入れておいてください。
htmlでアンカータグを使う方法
アンカータグは、<a>~</a> というコードの書き方をします。 アンカータグを使うことでリンクを貼ることができます。例えば以下のように <a>リンク<a/>というコード書きます。
【HTML】
|
1 |
<a>リンク</a> |
すると文字が青くなりました。これでリンクが貼れている状態になり、クリックできるようになりました。しかしこのままだとどこに飛ばすのかまだ設定できていないのでクリックしても反応しません。次にリンクの飛ばし先の方法を解説します。
飛ばし方は以下の2通りのパターンがあります。
- 別サイトへ移動する方法(外部リンク)
- ページ内で移動する方法（ページ内リンク、内部リンク）
それぞれ解説していきます。
別サイトへ移動する方法
まずはアンカータグを使って別サイトへページを飛ばす方法を解説します。別サイトに飛ばしたい場合、href属性を使用します。<a href=”~~~”>〜</a>というように最初の a の後ろに href=”~~~” と記述し、~~~の中には移動先のURLを記述します。以下は~~~の中にグーグルのURLを記述した例です。
【HTML】
|
1 |
<a href="https://www.google.com/">グーグルへ</a> |
上の「グーグルへ」をクリックするとグーグルのサイトへ飛びます。それでは同じページ内で移動させたい場合はどうなるのでしょうか。次はページ内で移動する方法を解説していきます。
ページ内で移動する方法
同じページ内でリンクを飛ばしたい場合は、id属性を使います。まずはリンクをつけたいテキストにhref属性を使ってリンクを貼ります。その際 href の中は #〜と記述します。
【HTML】
|
1 |
<a href="#top">トップへ戻る</a> |
リンクの飛び先には id 属性を使います。
【HTML】
|
1 |
<p id="top">今回はHTMLの基礎であるアンカータグについて学んでいきます。ランディングページやブログなどでページ一番下まで読んで、もう1度最初から読みたいと思った時何回もスクロールさせずにワンクリックで戻れたら便利ですよね。</p> |
今回の場合、pタグの中に id 属性を使って top という id 名を付けます。下記の「トップへ戻る」をクリックしてみてください。すると、トップまで戻ることが確認できたと思います。
以上でアンカータグの使い方の解説は終了ですが、注意点がありますので次にアンカータグの注意点について解説していきます。
id 名は重複してはいけない
アンカータグの注意点は id 名を重複してはいけないことです。Webサイトやブログ記事を作成する際、id 名は何度も使用することになります。安易に id 名を付けてしまい重複してしまうと、正常に表示されない可能性があります。
カテゴリページでは特に引用文などで同じ id 名をつけている可能性が高いので注意が必要です。ここでの重複を避ける方法としてa href=”（表示するwebページのアドレス/移動先のid名）”のように表示するページのアドレスを入れることによって重複をなくす方法もあります。
アンカータグでSEO対策をしよう
アンカータグを使用する際にできるSEO対策を紹介します。
ターゲット属性を使用して別ウインドウでリンクを開く
アンカーリンクを設定した際、デフォルトでは同じ現在使用しているタグに上書きしてリンク先に移動します。ターゲット属性を指定して別ウインドウでリンクを開かないとせっかくきていた読者を逃してしまいます。次に別ウインドウでリンクを開く方法を解説します。
別ウインドウでリンクを開く方法はアンカータグのターゲット属性の値に_blank を指定すること。以下コードのサンプルです。
【HTML】
|
1 |
<a href="https://www.google.com/" target="blank">グーグルへ</a> |
上記グーグルへをクリックすると別ウインドウでリンク先に移動することが分かります。外部リンクを貼る際には、読者がもう1度自分の Webサイトに戻ってきやすいように必ずターゲット属性を指定してください。
他にターゲット属性の値には「self」、「parent」、「top」があります。それぞれ解説すると
「self」・・・現在表示しているタブで表示する
「parent」・・・親フレームで表示する
「top」・・・フレームを解除して表示する
画像にアンカータグを使用する際は alt 属性を記述しよう
もう一つアンカータグを使用する際にするべきSEO対策があります。それは画像にアンカータグを使用するときにalt属性を記述することです。alt属性とは代替テキストのことで、以下alt属性をなぜ設定するべきなのか紹介します。
まず絶対に抑えておくべきことは検索エンジンのクローラーは画像情報を読み込めないということです。だからalt属性を設定しなけらばいけないのです。
alt属性を設定することでクローラーが画像の内容を理解し、いいサイトだと判断される可能性が上がります。さらに画像検索からの流入も期待できるようになりSEO強化に繋がります。
では実際にalt属性を設定したコードをみていきましょう。
【HTML】
|
1 |
<img src="https://www.udekumi.co.jp.jpg" alt="腕組みしているサラリーマン"> |
alt属性の中に「腕組みしているサラリーマン」と記述しました。このように画像の説明をすることがポイントです。キーワードだけを並べたり、単語だけではいいサイトとは判断されないので注意しましょう。
【ダメな例】
|
1 |
<img src="~~~" alt="サラリーマン 男 ビジネス"> |
また、装飾アイコンや装飾のための画像の場合は画像に意味を持たないのでalt属性は空にします。
【画像に意味を持たない場合のalt属性の設定方法】
|
1 |
<img src ="~~~" alt=""> |
まとめ
いかがでしたか？今回は
HTMLのアンカータグについて
みてきました。アンカータグを理解した上でしっかり使うことでより使いやすいサイトを作ることができますし、SEO対策にもなります。
ぜひ、今回の記事で学んだことを活かして、よりいいサイトを作ってくださいね。
