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"が自動付与されるようになりました。

コメントをする

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はお断りしております。