どうも、べ〜やんです。
今回は、HTMLでリンクを貼る方法をざっくり紹介します。
テキストや画像をクリックしたら、別のページに移動できるあれです。
<a href=""></a>
目次
aタグ
<a>タグのaはAnchor(アンカー)の略です。
<a></a>href属性
aタグの開始タグの中に、href属性を書きます。
href=””の中にリンク先のURLを書きます。
<a href="ここにURL"></a>
<a href="https://beeyanblog.com"></a>テキストor画像
開始タグと終了タグの間にテキストを書きます。このテキストをクリックしてもらうことになります。このテキストのことをアンカーテキストと呼びます。
<a href="https://beeyanblog.com">ここをクリック</a><br>
<a href="https://beeyanblog.com">こちら</a>
<!-- <br>で改行しています。-->↓
アンカーテキストの代わりに画像を配置することで画像をクリックするリンクになります。
<a href="https://beeyanblog.com"><img src="" alt=""></a>外窓でリンク
リンクを新しい画面で開くようにするには、開始タグにtarget=”_blank”を追加します。
セキュリティー上の理由でtarget=”_blank”を使用する場合はrel=”noopener”も追加することが推奨されています。
<a href="https://beeyanblog.com" target="_blank" rel="noopener">別窓リンク</a>↓
SEOとアンカーテキスト
アンカーテキストの部分にどんな言葉を書くかは、リンク先の検索結果にも影響があります。
検索エンジンはリンク先のページ内容を、アンカーテキストで表現されている内容とみなす傾向が強いようです。
リンク先の内容がHTMLについてのページだったらアンカーテキストは「HTML」にするなど、アンカーテキストはリンク先の内容と合致するようにする必要があります。
ですが、全てのアンカーテキストをそのようにするのは難しいですよね。
そんな時は、開始タグにrel=”nofollow”を追加するとアンカーテキストを無効にできます。
<!-- アンカーテキスト無効 -->
<a href="https://beeyanblog.com" rel="nofollow">アンカーテキスト無効</a>
<!-- 別窓で開いてアンカーテキスト無効 -->
<a href="https://beeyanblog.com" target="_blank" rel="noopener nofollow">別窓で開いてアンカーテキスト無効</a>↓
おわりに
HTMLでリンクを貼る方法をざっくり紹介しました。
この他にもリンクにはさまざまな設定ができますので、リファレンスなどで確認してみてください。
