ブログ運用

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

2020年2月19日

困った人
「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の面では今のところ気にする必要はないです。

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

「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】の意味とは

今回の内容は以上です。

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

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

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

まとめ

  • 「noopener」と「noreferrer」は弱体性をカバーする
  • 「noopener」と「noreferrer」は意味が違う
  • SEOに影響しない
  • 一部のASPでは成果が発生しなくなる

以上です。

にいやん
それでは!よきBlogLifeを!!

スポンサーリンク




  • この記事を書いた人
つちだ

つちだ ろい

現役のエンジニアです。日々Web制作に勤しみつつ、ブログ更新していきます。ポートフォリオ兼仕事依頼ページも同時に作成中ですのでご期待ください。/東京在住/30歳/フロントエンド/スノボ/バイク/オムライス

-ブログ運用

Copyright© 2019-2021 そろりかく。 All Rights Reserved.