今回は、テキストリンクや画像リンクなどのリンク先を新しいタブ（ウィンドウ）で開く方法についてを紹介していきます。また同時に新しいタブ（ウィンドウ）で開く事の注意点も考えていきたいと思います。
ターゲットブランク
リンククリック時に新しいタブで開かせるにはHTMLのaタグ内に「target=”_blank”」を付け加えます。
下記のリンクは実際に新しいタブで開くリンクです。
例えば上記のリンクの場合だと、下記の様に記述していきます。
<p><a href="https://kt-life.net/seitekisite-doutekisite/" target="_blank">
動的サイトと静的サイトの違いは？
</a></p>「a href=”https://kt-life.net/seitekisite-doutekisite/” ここに」
上記の「ここに」の部分に「target=”_blank”」と入力します。
これだけで完了です。
aタグに関して（リンク）の付け方が分からない方はこちらを見て下さい。
WordPressの場合だと、HTMLを弄らなくてもワンクリックで可能です。
リンクテキストを選択して、右側の「^」をクリックして新しいタブで開くを押すだけで完了です。
また、ターゲットブランクと似たターゲット値にtarget=”_new”というものもあります。target=”_blank”は毎度新しいタブで開くが、target=”_new”は毎回タブを新しくしてくれます。
下記の画像二つがtarget=”_new”を付けたリンクです。
「新しいタブで開く」の注意点
target=”_blank”では、セキュリティの脆弱性が存在し、注意が必要です。
target=”_blank”で開かれたページは、元のページをwindow.openerオブジェクトとして持つので、リンク先のページからwindow.opener.location = “danger site url” のように元ページを操作することが出来てしまうようです。
対策としては rel=”noopener” という記述を先程の <a href="" target=""></a> に加えてあげると、
window.openerでopenerが参照できなくなり、操作されなくできます。
rel=”noopener”は参照元を教えませんという指示です。非通知の様な元だと思っていただければ分かりやすいかと思います。
理想的なtarget=”_blank”の使い方は
- 外部サイトへのリンクは、target=”_blank” を利用
- 内部サイトへのリンクは、target=”_blank” 不要
で運用していき、外部リンクにはrel=”noopener”を付けてあげる様にしましょう。
これは先述したWordPressでの新しいタブの開き方では、外部リンクにのみ自動「rel=”noopener”」で付くので安心して下さい。ワードプレス以外の環境だと自身で対応していかなくてはいけません。
そもそもtarget=”_blank”は必要なのか？
現状のユーザーの大半がスマホでの閲覧で、スマホファーストなサイト作りが大事だと言われてきています。
そこで、スマホでの操作で一々新しいタブが開いた場合、それはユーザーファーストな考え方なのでしょうか？
私個人的には、スマホの新規タブは意外と閉じるのがめんどくさい印象を持っています。（PC場合はCommand +Wで簡単に閉じれるので逆に新規タブの方がいいが。）
ただ、この考え方は賛否両論なので正解は出ません。
サイトによってはPDFや画像のみをtarget=”_blank”にする場合が適切な事があるかも知れないですし、自サイト以外のリンクは全てtarget=”_blank”にした方が良いサイトなどもあると思います。そこは自身が運営しているサイトのユーザーの動きを分析して考えることかとが大事になってくるかと思われます。
例）ブログサイトはページの集まりなので自サイトと別サイトは分かりやすくするためにtarget=”_blank”を付けた方が良い。
例）広告用ページや商品ページなど特化したサイトは本サイトからの流入をメインにし、違和感無くユーザーがそのサイトにたどり着ける様にしたいためtarget=”_blank”は付けない方が良い。
以上が「ユーザーがクリックしたリンク先を新しいタブで開かせる方法」でした。
target=”_blank”に関しては、ネット上でいろんな意見があると思いますが、自分はどう思うかを大事にして下さい。
