WordPressでリンクタグに自動付与されるrel=”noopener noreferrer”とは

WordPressでは、<a>タグでtaeget="_blank"を設定した場合にrel=”noopener noreferrer”が自動付与されます。
この記事ではrel="noopener noreferrer"とは一体どういったものなのかを解説していきます。

rel=”noopener noreferrer”とは

noopenerとは

noopenerは、セキュリティとパフォーマンスの2つの観点から設定する必要があります。

セキュリティ対策

通常、taeget=”_blank”を使って新しいタブを開くと、JavaScriptのプロセススレッドが元タブと共通になります。これにより新しいタブから元タブへの操作をおこなうことができてしまいます。
noopenerは、このプロセススレッドを分割して新しいタブを開くことができるようになるコードなのです。

パフォーマンス対策

そしてもうひとつも同様ですが、JavaScriptのプロセススレッドが共有になるということは、仮に新しいタブに負荷の高いスクリプトが存在していたりすると、元タブのパフォーマンスにも影響してしまいます。
noopenerを記述することで、タブ間でパフォーマンスへの影響が発生しないようにすることができます。

noreferrerとは

noreferrerは、参照先に対して参照元のリンクを渡さないようにすることができるようになります。
電話でいうところの非通知電話みたいなところです。

Googleアナリティクスなどの分析ツールを利用すると、参照元を調べたりすることもできますが、なぜ参照元が分かるのかというと、リンク時には参照元の情報が参照先に渡されているからなのです。

WordPressでのrel=”noopener noreferrer”の仕様

rel=”noopener noreferrer”が付与される条件は、target=”_blank”時

WordPressで、<a>タグにrel="noopener noreferrer"が自動付与されるのは、［新しいタブで開く］にチェックをした場合になります。

［新しいタブで開く］にチェックをしない場合

<a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a>

［新しいタブで開く］にチェックをした場合

<a href="https://www.yahoo.co.jp/" target="_blank" rel="noreferrer noopener" aria-label="Yahoo! JAPAN (新しいタブで開く)">Yahoo! JAPAN</a>

rel=”noopener noreferrer”導入はバージョン4.7.4以降

WordPressでは、2017年4月20日に公開されたバージョン4.7.4以降に、<a>タグでtaeget="_blank"を設定した場合にrel="noopener noreferrer"が自動付与されるようになりました。