aタグにはhrefでリンク先のURLを入れるのは皆さんよくご存知ですよね。
ジャンプする先のURL以外にも、電話やメールに繋がるようにしたり、
リンクの開き方を指定することもできます。
今回はメインどころの設定値をまとめましたので、基本として覚えていきましょう。
aタグの設定値まとめ
今回は基本的によく使うもので、意味を分かっておくべきものを４～５個程度紹介します。
新しいウィンドウで開く
新しいウィンドウで開く場合は
<a href="リンク先" target="_blank">略</a>のようにtarget="_blank"を使うことで新しいウィンドウで開くことができます。
外部サイトを開くとき
外部サイトを開くときは
<a href="リンク先" target="_blank" rel="noopener external">略</a>のようにtarget="_blank"と合わせてrel="external"を指定するといいでしょう。
rel="external"は「リンク先は外部サイトですよ」ということを明示的に示すものです。
そしてnoopenerは新しいウィンドウで開くときに使用するもので、主な役割は２つあります。
noopenerの役割①：target=”_blank”の脆弱性対策
target=”_blank”を使って新しいウィンドウを開くとき、
新しいタブからはwindow.openerというものを使ってリンク元を操作することができてしまいます。
万が一リンク先が悪意あるサイトであったりした場合に、リンク元ページにアクセスし操作される危険性があるため、
noをつけたopener、つまりnoopenerを使うことで元ページの操作を防いでいます。
外部サイトに飛ばす場合は基本的に書いていた方がいいでしょう。
noopenerの役割②：ページのパフォーマンス維持
target=”_blank”で開かれたページとリンク元は同じJavaScriptを使用します。
rel=”noopener”とすることで、リンク先で重たいJavaScriptの処理が行われたとしても、
リンク元が受ける影響を減らすことができるわけです。
補足：noreferrerについて
よくnoreferrerも付けろって聞くんだけど、要らないの？
noreferrerはnoopenerと似た効果を持つのですが、
一昔前はIEなどの古いブラウザがnoopenerに対応しておらず、noreferrerも必要な場合がありました。
現在は主要なモダンブラウザは基本的にnoopenerに対応しているため両方書く必要はありません。
また、むやみにnoreferrerを書いてはいけないもう一つの理由として、
noreferrerは参照先に参照元リンクを渡さない(referさせない)ようにするものなので、
アフィリエイトでの追跡やアナリティクスでの内部リンクの分析などを阻害してしまう原因となります。
使いどころを正しく理解して適切な指定を行いましょう。
relの設定は目的やリスクをよく考えて設定しよう！
電話をかけられるようにする
リンクをクリック(もしくはタップ)ですぐに電話を掛けられるようにするには、
<a href="tel:0120-123-456">略</a>とすることで電話のリンクにすることができます。
メールソフトが開けるようにする
リンクをクリック(もしくはタップ)ですぐにメールを開くようにするには、
<a href="mailto:sample@sample.com">略</a>とすることで、メールのリンクにすることができます。
ファイルのダウンロード
ファイルがダウンロードできるようにするには
<a href="abc/file.pdf" download="file.pdf">略</a>とすることで、特定のファイルをダウンロード可能にできます。
download属性にはダウンロード時のファイル名を指定しておくといいでしょう。
おわりに
以上基本的なaタグの設定値でした！
コピペも可能なので是非ブックマークしておいて何度も見返してくださいね
あざした
