WordPressが自動付加する【noreferrer】【 noopener】の意味とは

困ったさん

「rel=“noopener noreferrer”」ってなんだ？？ WordPressで外部リンクを設定したら自動で付加していたけどそのままでいいのかな？

基本的にそのままで大丈夫です。 気になる方のために記事にするのでお読みください！！

にぃやん

この記事を書いている僕は現在Webデザイナーの仕事をしているのでコードの内容について、どこよりも最新の情報を提供できる。

以下がこの記事の内容です↓↓↓

WordPressが自動付加する【noreferrer】【 noopener】の意味とは

まず初めに、
普段WordPressで記事を書いているとあまりコードの中を見ないかもです。

その場合、今回紹介する「rel=“noopener noreferrer”」を知らずに使っていることでしょう。

「noopener」と「noreferrer」を簡単に説明すると、
セキュリティーを上げるためにWordPressが自動で付加してくれているaタグのコードです。

WordPress 4.7.4からセキュリティ対策で実装されました。

以下のコードのように＜a＞タグの中（〜）に付加されます。

 
<a href="https://〇〇〇〇.com/" target="_blank" rel="noopener noreferrer">ブログタイトル</a>

「rel=“noopener noreferrer”」は新規タブで開くように外部サイトのリンクを記事内に貼ったときに付加されます。
（ target="_blank"としたときです。）

何も気にする必要が全くないと言えば嘘になります。
※後述します。

SEOの面では今のところ気にする必要はないです。

それではまず、２つの違いについて説明していきます。

「noopener」の意味

上でもお伝えしたように、「noopener」は外部サイトを新規タブで開くようにしたときに付加されます。

コードで説明するとaタグのtarget属性をtarget=”_blank”としたときです。

なぜ？？

自動で付加させないといけなくなったのか？

それはずばり

target=”_blank”がセキュリティ面で弱体性があるからです。

もっと詳しく説明しましょう！！

自動付加される、「noopener」を付けない場合
JavaScriptで「window.opener」というオブジェクトが操作できるようになります。

新しいタブ（外部サイト）で「window.opener.location = newURL」というコードを書くと、

新しいタブ（外部サイト）で開いたページから元タブ（自分のブログ）のページの操作ができるようになります。

ですので、「opener」は「NO！！」という意味の「noopener」なんです。

アフロ

また、補足するにゃ！！

遷移先の外部サイトと自分のサイトは処理も別々になるため、

どちらかが重い処理のJavaScriptを走らせていても影響を抑えることが可能です。

「noreferrer」の意味

WordPressは「noreferrer」も同時に自動付加します。

上で説明した、「noopener」とは意味が違います。

「noreferrer」の意味はリンク先のリソースに、リファラを送らないようにユーザーエージェントに指示するという意味です。

少し難しく聞こえますが、簡単に言うと非通知電話のような感じです。

つまりは、参照元リンク情報を渡さないので
渡したくないユーザID等の情報がURLリンクに含まれていても大丈夫になるわけです。

付加するデメリット

「noopener」と「noreferrer」の違いについては分かったと思います。

SEOにも影響はないので普通はそのまま付けていても問題ないです。

しかし、問題がある場合があります。

一部のASPはリファラが飛んでいないと成果が発生しないものがあります。

古いシステムのASPを使っている場合に起こり得ます。

なので、一部の人にとって、「noopener」と「noreferrer」はデメリットになります。

改善策としては、そのようなASPは扱わないか、

「target=“_blank"」を外し「noopener」と「noreferrer」が付加されないようにしましょう。

まとめ：【noreferrer】【 noopener】の意味とは

今回の内容は以上です。

普段コードの中は見ないかもしれないですが、
意味を知っているのと知らないのとでは面白さも変わってきます。

僕の記事をお読みいただくと、
誰にでも分かりやすく説明しているので、興味があれば他の記事もお読みください。

以下に今回の大事なポイントをまとめます。

以上です。

にぃやん

それでは！よきBlogLifeを！！