「別タブで開く（target="_blank"）」リンクのヤバさの復習

HTML手打ちライターには、外部向けリンクを別ウィンドウで開くために、リンク（a 要素）に target="_blank" 属性を指定するのは基礎的な知識です。
ここでは便宜フレームやタブのことをウィンドウと表現していますが、気になる方はフレームと読み替えてください。

リンク先ページの表示フレーム（ウィンドウ）を指定する

 
<a href="sample.html" target="_blank">新しいウィンドウで表示します</a>
<a href="sample.html" target="_self">現在のウィンドウに表示します</a>
<a href="sample.html" target="_parent">親ウィンドウに表示します</a>
<a href="sample.html" target="_top">ウィンドウ分割を解除してウィンドウ全体に表示します</a>

target="_blank" を指定すると、ユーザーの環境（ブラウザ設定やそのプラグイン）によってはポップアップブロックが機能してしまう場合があります。

target="_blank" の何がヤバいの？

"_blank"指定されたページが新しく手前に新ウインドウで開かれ、そのページを開く元になったページは新ウインドウの裏に残ります。つまり元のウインドウは残っています。
ここで、新ウィンドウからJavaScriptで

 
window.opener.location="somewhere.html"

を実行すると、元のウインドウをコントロール（"somewhere.html" に飛ばすことが）できてしまいます。window.opener は、別ウインドウで開かれたページ"を開いた元ウィンドウへの参照が返ります。

target="_blank" で何を狙っている？

わざわざ悪意を持つ作成者は、元のウインドウをイケないページに遷移させることを考えますが、多くの人は「元々のウインドウを閉じないでほしい」、「新しいウインドウで別のページを見せるけど、見終わったら帰ってきてね」的な意図が大半です。新しいウインドウを閲覧中も元々のウィンドウが開き続けているので、Googleとしては元々のページの閲覧時間も長いと判断してくれることがあります。結果的に、滞在時間の長い価値のあるページとしてSEO的にも有利になるという意図です。

【対策】 noopener と noreferrer で元ウインドウを参照させない

 
<a href="sample.html"
target="_blank" rel="noopener noreferrer">新しいウィンドウで表示します</a>

noopener の意味は？

元のウインドウの target="_blank" に対して rel="noopener" をつければ、新しく開かれたウィンドウから、元々のウィンドウを window.opener で参照できなくなります。元のウィンドウの location での変更などができなくなります（これで、別ウィンドウでは、JavaScriptのエラーになります。）ただし、IE11以前のブラウザや Opera Mini などは対応しないので、完全には新しく開かれたウィンドウからのコントロールを阻止できません。

noreferrer の意味は？

rel="noreferrer" は、上の noopener の代替です。具体的には noopener は依然利用者がそこそこある IE11 が対応しないので、IE11 利用者のために noreferrer を付け足しておくということです。Opera Mini についてははじめから対応していませんので、この対策をしても効果がありません。利用者が少ないので切り捨てるという感じにはなります。