HTMLのrel="noopener"属性の使い方（セキュリティ上とても重要）

rel="noopener"属性は、target="_blank"属性を使ったアンカーリンクにおける外部リンクのセキュリティに直接関わるため、知っておくべき最も重要なHTML属性のひとつです。

target="_blank"を指定すると、リンク先が新しいブラウザタブで開きます。

以下はrel="noopener"属性を付けたリンクの例です。

<a href="https://www.youtube.com" rel="noopener" target="_blank">youtube.comへのリンク</a>

rel="noopener"の仕組み

ウェブサイトの外部リンク（target="_blank"付き）にrel="noopener"を追加すると、リンク先のサイトがwindow.openerプロパティを通じて、あなたのページ（windowオブジェクト経由）にアクセスすることを防げます。

つまり、リンク先のページに悪意のあるコードが仕込まれていた場合、そのコードはwindow.openerというバックドアを通じてあなたのサイトを操作し、ユーザーのブラウザを乗っ取って、個人情報を盗んだりマルウェアをインストールしたりする危険なフィッシングサイトへリダイレクトする可能性があるのです。

こうした理由から、WordPressでは新しいタブで開くすべての外部リンク（target="_blank"属性を使用するもの）に、セキュリティ対策として自動的にrel="noopener"属性が追加されるようになっています。

メリットがデメリットを大きく上回るため、サイトの種類を問わず、同じ対策を講じることをおすすめします。

rel="noopener"とSEO

朗報です。rel="noopener"はSEOに一切影響を与えません。

noopenerを使うデメリット

唯一知られているデメリットは、rel="noopener"がInternet Explorer 11に対応していないことです。

とはいえ、それほど心配する必要はありません。その理由は以下の通りです。

1. IE11はまもなく歴史に幕を下ろす（Microsoftがサポートを終了するため）。
2. IE11でアクセスした訪問者でも、リンク自体はクリックできる。ただしrel="noopener"の効果が働かないだけ。

さらに言えば、責任あるサイト運営者であれば、そもそも外部リンク先の選定には注意を払うはずです。信頼できないサイトへユーザーを誘導しなければ、このセキュリティ問題はほぼ気にする必要がなくなります。

代替案1：「noreferrer」を使う

Internet Explorerユーザーのことが気になる場合は、以下のようにアンカーリンクにnoreferrer（IE11でもサポートされている値）を追加しましょう。

<a href="https://www.youtube.com" rel="noopener noreferrer" target="_blank">youtube.comへのリンク</a>

noreferrerは、HTTPヘッダーからリファラー情報を除去することで、リンク元（あなた）からリンク先のサイトへ情報が送られるのを防ぎます。

ただし、rel="noreferrer"はサイトのアナリティクスに影響します。リンク先のサイトはあなたがリンクしていることを検知できなくなるため、リンク先との提携契約などがある場合には支障が出る可能性があります。

そのため、この方法を使うかどうかは自己判断で行ってください。

rel="noreferrer"とSEO

多くの人が信じているのとは逆に、rel="noreferrer"がSEOに直接影響を与えるという証拠は、少なくとも現時点では存在しません。ただし前述の通り、データ収集やアナリティクスに干渉するため、状況によっては間接的に不利益を被る可能性はあります。

なお、noreferrerやnoopenerを、nofollow属性（こちらはSEOに確実に影響します）と混同しないようにしましょう。

代替案2：target="_blank"を使わない

アンカーリンクからtarget="_blank"属性を外してしまえば、これらの問題をすべて回避できます。

target="_blank"がない場合、サイト上のすべてのリンクは、クリックした瞬間にユーザーをあなたのサイトからリンク先のサイトへ移動させます。

ただし、target="_blank"を使わないことは、SEO、特に直帰率に悪影響を及ぼす可能性がある点には注意が必要です。

特にチュートリアル記事の中では、ユーザーがリンク先のサイトの何かに気を取られて、あなたのサイトのことを忘れてしまう恐れがあるため、この方法は避けたほうがよいと考えます。

「読者が外部リンク1つであなたのコンテンツを忘れるなら、そもそもコンテンツの質が低いのではないか」と反論する人もいるかもしれません。一理ありますが、人はもともと注意散漫になりやすく、それが多くの場合自分にとって不利益につながるという事実もあります。

このテーマは単純な白黒で語れるものではなく、別の見解にも柔軟に耳を傾ける姿勢が大切です。

参考リソース

外部リンクに関するセキュリティ問題については、以下も併せてご覧ください。