target="_blank" は意見が割れるから何が対応の正解なのかわからない

target="_blank" の活用を考えてみました。

現在僕はマーケティング担当として自社サイトなどの改善を進めているのですが、ふとtarget="_blank" についてそれほど知らなかったので考えてみました。

target="_blank" とは

target="_blank" とは、記事内にあるリンクをクリックしたときにブラウザの別タブが開いて表示されるあれです。

こんなやつです。 → 新卒IT文系セールスのBLOG

使い方としては、

<a href="https://xxxxxxx.com" target="値">リンクテキスト</a>

こんな感じで使います。

target=""の値に　_blank を指定すると、新規のウィンドウに表示させるという指示になります。

どういうときに使えばいいのか

外部リンクの指定をするときに使うといいようです。
というのも、ユーザーが外部リンクを開いている間は、その多くが自分の記事の流れで気になって外部に飛んでいるだけなので、自分の記事については開いておくことが多いと思います。
すると、その間も自分の記事について滞在時間ということになるので有用な記事であるとGoogleの評価にも影響するというものです。
ユーザーからしても、タブを変えるだけで元の記事に戻れるわけですからユーザービリティもいいですね。

同じタブで遷移した場合、外部に飛ぶと自分のサイトから離脱ということになるので、その対策をとっているわけです。

気をつけること

セキュリティについては気をつけることがあります。

どうやらこのtarget="_blank"で開かれたページは、元のページをwindow.openerオブジェクトとして持つために、リンク先のページから
window.opener.location = "http://悪いURL"
のように操作することが出来るそうです。 リンクの遷移先のページのJavaScriptによって、遷移元（自社サイト）のページを操作することができてしまうようなのです。
すると、Tabnabbingとよばれるフィッシングの被害に遭う可能性がでてきます。

これはヤバい。

　対策

そこで、対策としては rel="noopener" という記述を先程の <a href="" target=""></a> に加えてあげると、
window.openerでopenerが参照できなくなり、操作されなくできます。

ざっくり、

• 外部サイトへのリンクは、target="_blank" を利用
• 内部サイトへのリンクは、target="_blank" 不要

で進めようかと思っていましたが、事はもう少し複雑なようでした。

今後は、マーケ的な話もできればと思っています！

私、穂苅智哉の情報は、以下のFacebookページTwitterアカウントを御覧ください！
※友達申請をいただける方は、お手数ですがメッセージを添えておねがいいたします。

Facebook
▶https://www.facebook.com/tomoya.hokari.79

Twitter
▶https://twitter.com/tomoyanhokarin