rel=”noopener”属性を別タブで外部リンクを開く時に設定するべき理由

あなたのwebサイトに貼ってある外部リンクがあなたのサイトを破壊する…そんな可能性があるって知ってました？今回の記事はちょっと難しい内容になっていますが、セキュリティが気になる方は続けて記事をお読みください…

Webサイトに貼ってある外部リンクを別タブで開く時、HTMLではリンク（aタグ）にtarget=”_blank”属性を指定します。でも、これだけだとセキュリティとパフォーマンスの両方の面から問題が生じるとGoogleが指摘しています。

なんでもtarget=”_blank”属性だけで外部リンクを開くと、相手ページのJavaScriptがwindow.openerというオブジェクトを使ってあなたのページを操作できてしまうようなんです。もしリンク先に悪意あるJavaScriptが記載されていたら、下手したらあなたのサイトが改ざんされてしまう…なんてことも起こりえます。

また、そんな悪意はなくても、相手のJavaScriptが重たいとこちらのページがつられてパフォーマンスを落とす可能性もあるそうです。僕もHTMLのプロではないので難しいことはわかりませんが、とりあえず対策をしておく方が良さそうだということはわかります。

幸いなことに、もしあなたがWordPressでサイトを作っているなら、WordPressが自動で対策をしてくれているので心配ありません。WordPress以外でwebサイトを作っているのなら、あなたの貼っている外部リンクのソースコードを1つ1つ確認することをおすすめします。

rel=”noopener”属性であなたのサイトを守ろう！

別タブで外部リンクを開くときのこれらの問題から、あなたのサイトを守ってくれるのがrel=”noopener”属性です。この属性をつけることで、元タブ（あなたのページ）と新タブ（外部リンク先）が別扱いになり、リンク先のJavaScriptによる影響を受けなくなります。

やり方は下の例のように…

<a href=”https://◯◯◯.com” target=”_blank” rel=”noopener”>アンカーテキスト </a>

と、aタグの中にtarget=”_blank”属性とrel=”noopener”をセットで使うだけです。そんなに難しいことではないので、ぜひ設定をしておきましょう。

rel=”noopener”属性だけでもいいですが、どうせならrel=”noreferrer”属性もセットで設定！

ついでにもう1つ、セキュリティ対策として重要なものにrel=”noreferrer”属性があります。これは「リンク元の情報をリンク先に渡さない」ための属性タグで、よく非通知電話に例えられています。

この属性をつけることで、リンク元ページのURLにユーザーIDのような情報が含まれていたとしても、相手にその情報が伝わることがなくなるので安心です。一方アフィリエイトをやっている場合は、あなたのサイト情報が相手に伝わらないと料金が発生しないので、この属性をアフィリエイトリンクにつけてはいけません。

rel=”noopener”属性と一緒に使う場合のコード例を下に書いておきます。

<a href=”https://◯◯◯.com” target=”_blank” rel=”noopener noreferrer”>アンカーテキスト </a>

https://◯◯◯.comとアンカーテキストの部分を適宜書き換えて、コピペして使ってください。

ついでに、SEO対策で出てくるnofollow属性を併用する場合のHTMLコードも書いておきます。

<a href=”https://◯◯◯.com” target=”_blank” rel=”nofollow noopener noreferrer”>アンカーテキスト </a>

rel=”noopener”属性についてのまとめ

別タブで外部リンクを開くとき、target=”_blank”属性だけではセキュリティとパフォーマンスの面であなたのサイトが不利益を被る可能性があります。この不利益からあなたのサイトを保護するために、別タブで外部リンクを開く時にはrel=”noopener”属性をつけることをお勧めします。

同じくセキュリティ面で考慮に値するものにrel=”noreferrer”属性があります。この属性をセットで設定するとさらに安心ですが、アフィリエイトをやっている場合にはつけてはいけません。

これらの属性は、WordPressサイトなら外部リンクに自動で付加されます。WordPress以外の方法でwebサイトを管理している場合には、面倒ですが1つ1つ外部リンクをチェックしてみてください。