HTMLファイルにリンクをつける＜a href=""＞＜/a＞の読み方は、アンカー・エイチレフと読みます。
または、エー・エイチレフという呼ばれている場合もあります。
一般的には、リンクタグといえば通じる事が多いです。
＜a href=""＞＜/a＞の使い方
リンクタグの使い方は、リンクしたいテキストを（開始タグ）＜a href=""＞と（終了タグ）＜/a＞で挟み込みます。
リンクタグで挟まれた言葉のことを、アンカーテキストと言います。
上の例だと、「トップページ・料金ページ・利用の流れ・コンタクトフォーム」がアンカーテキストとなります。
上記のHTMLファイルを、ブラウザ上で表示をすると、下記のように表示されます。
クリックすれば、どこか別のところにリンクされるというイメージができるかと思います。
画像へリンクを付ける方法
なお、リンクタグでは、画像にリンクをつけることもできます。
画像にリンクを付ける方法は、テキストとまったくおなじで、リンクをつけたい画像を、リンクタグで挟むだけです。
HTMLでのソースコードは下記の通りです。
画像にリンクをつけても、画像自体に変化はありません。
必要に応じて、スタイルシートなどを調整することで、画像表示に変化をつけることもできます。
また、画像にリンクを付ける際のポイントですが、SEO対策の面から考えると、検索エンジンは画像の内容を正確に識別できません。
従って、画像ファイルのパスには、必ずaltタグを設置して、画像の内容をテキストで説明することを忘れないようにしましょう。
ユーザー側の環境要因などで、通信速度が遅かったり、なんらかの事情で画像が取得されない場合には、altタグに設置されたテキストが優先的に表示されて、画像の内容を示してくれます。
ユーザーに対しても、検索エンジンに対しても、配慮が行き届いたページとなります。
altタグを設定しておくことは、検索エンジン対策だけではなく、ユーザーにとってもメリットが大きいです。
リンクを別ウインドウで開く方法
設定したリンクは、通常は今開いているウインドウ内で、表示内容が切り替わる形で表示されます。
必然的に、リンク先に遷移すると今開いているページが閉じられてしまいます。
もし、今開いているページを閉じずに、リンク先のページも開きたい場合、今開いているリンクタグ内＜a href=""＞＜/a＞にtarget="_blnak"を付与しましょう。
HTMLファイルに記述する場合の、ソースコードは下記の通りです。
実際に、taraget="_blank"を付けた場合と、つけていないリンクを設置してみました。
リンク先は、いずれもこの記事のURLとなっていますので、どういう挙動するか、確認してみてください。
・taraget="_blank"をつけて別窓で開くリンク
・通常のリンク
それでは、リンクを付ける時はどちらにしたらいいのか？と疑問に思う方も多いと思いますが、特に目的などがなければ、通常リンクが望ましいです。
例えば、こういった教材のテストリンクや、商品説明などでブラウザ毎に比較してほしい場合などは、別窓で開く形でも良いかと思います。
どちらの方法が、ユーザーに利便性があるか・快適にユーザーがサイトを利用できるかを検討したうえで、taraget="_blank"を付与するかどうかかを検討してみましょう。
target="_blnak"利用時の注意点
リンクを別ウインドウで使用する際には、セキュリティ対策として、必ずnoopenerもセットで設置してください。
これは、開く予定の新しいウインドウの遷移先が書き換えられて、悪質なサイトに誘導するなどの手口を予防できるコードとなります。
自分のサイトを訪問してくれたユーザーが、被害を受けるのをを防ぐためにも、必ず設定しておきましょう。
リンク先との関係性を伝える、nofollow
次に、誤ったリンク設定をすることで、自分のサイトの検索順位が下がってしまうリスクがあるケースがあるので、ご紹介していきます。
まず、他サイトへの外部リンクを設置する場合、検索エンジン側では、コンテンツ内容に関係があるサイト・同類のサイトという判断がされます。
「リンクタグを使って紹介までしているんだから、仲良しだよね？」ということです。
ここで注意が必要なのは、リンクを設定すると、こちらの信用度・信頼度をリンク先に付与してしまうということです。
例えば、「迷惑サイトからメールがあった」という注意喚起をするページをつくる場合を想定してみます。
注意喚起するページ内において、迷惑サイトのURLを記述して、リンクをつけたとします。
しかし、上述の通り、検索エンジンは、リンク先は仲間とみなしてしまう性質から、迷惑サイトと同類と誤った判断をされてしまう要因となります。
結果的に、サイトの信頼度が急落して、サイトの検索順位が急落・急降下してしまう危険性があります。
その場合には、有効な対策があります。
どうしても自分と関係のないサイト・同類にしてほしくないサイトのリンクを掲載する必要がある場合は、rel="nofollow"を付与するようにしましょう。
rel属性を設置することで、リンク先とのリレーション＝関係性を示すことができます。
そして、nofollow（ノーフォロー）というのは、リンク先とはなにも関係ありませんと伝えることができるサインです。
もし、同類にしてほしくないサイトのリンクを設置しなければいけない時は、必ず、関係性を示すrelを設置して、nofollwを付けておきましょう。