HTML rel =noopener属性の使用方法（セキュリティにとって重要）

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

target="_blank" リンクを新しいブラウザタブで開きます。

rel="noopener"へのリンクの例を次に示します。 属性：

<a href="https://www.youtube.com" rel="noopener" target="_blank"
  >Link to youtube.com</a
>

rel="noopener"の仕組み

rel="noopener"を追加する場合 ウェブサイトの外部リンクへ（target="_blankを使用） ）、リンク先のウェブサイトがあなたのページにアクセスできないようにします ウィンドウオブジェクト経由（window.opener経由） プロパティ）。

翻訳： 参照しているページに悪意のあるコードが含まれている場合、バックドア（window.opener）を使用する可能性があります ）ユーザーのブラウザを乗っ取るためにウェブサイトにアクセスします。たとえば、情報を盗んだり、コンピュータにマルウェアをインストールしたりする危険なフィッシングウェブサイトにユーザーをリダイレクトします。

これが、WordPressが自動的にrel="noopener"を追加する理由です。 新しいブラウザタブで開くすべての外部リンクの属性（target="_blank"を使用） 属性）—セキュリティ上の理由からです。

使用することにはマイナス面よりもプラス面が多いので、どのような種類のWebサイトを使用していても、同じことを行うことをお勧めします。

rel="noopener"とSEO

朗報、rel="noopener" SEOに影響はありません。

noopenerを使用することの欠点

私が知っている唯一の欠点は、rel="noopener"ということです。 InternetExplorer11はサポートされていません。

私はそれについてあまり心配していません：

1. IE11はまもなく歴史になります（Microsoftはそれを捨てています）。
2. サイト訪問者がIE11を使用している場合でも、リンクをクリックできます。rel="noopener" 属性は有効になりません。

また、レスポンシブウェブサイトの所有者として とにかく、外部から誰にリンクするかについて注意する必要があります。信頼できないWebサイトをユーザーに紹介しないでください。そうすると、このセキュリティの問題はほとんど存在しなくなります。

代替1：「noreferrer」を使用

Internet Explorerのユーザーが心配な場合は、noreferrerを追加できます。 次のようなアンカーリンクへの属性値（サポートされています）：

<a href="https://www.youtube.com" rel="noopener noreferrer" target="_blank"
  >Link to youtube.com</a
>

"noreferrer" 属性は、HTTPヘッダーからリファラー情報を削除することにより、リファラー（あなた）が（リンク先の）ターゲットWebサイトに情報を送信するのを防ぎます。

rel="noreferrer" リンク先のウェブサイトはリンク先を認識しないため、ウェブサイトの分析に影響を与えます。これにより、ウェブサイトとの特定のビジネス契約が損なわれる可能性があります。

したがって、これは自分の裁量で行ってください。

rel="noreferrer"とSEO

多くの人が信じていることに反して、rel="noreferrer" SEOに直接影響を与えることはありませんが、少なくともその証拠はありません。ただし、前述のように、データの収集/分析に干渉し、特定の状況に応じて、他の/間接的な方法であなたを傷つける可能性があります。

noreferrerを混同しないでください またはnoopener nofollowを使用 属性（100％がSEOに影響します）。

代替2：target ="_blank"を使用しないでください"

target="_blank"の使用を停止することもできます アンカーリンクの属性を設定すれば、これについて心配する必要はありません。

target="_blank"なし Webサイト上のすべてのリンクは、ユーザーがWebサイトをクリックするとすぐに、ユーザーをWebサイトからリンク先のWebサイトに移動します。

ただし、target="_blank"を使用しないように注意してください SEO、特にバウンス率に悪影響を与える可能性があります。

私の意見では、これはチュートリアル内で行うのは特に悪い考えです。チュートリアルでは、ユーザーが参照しているWebサイトの何かに気を取られて、サイトのことを忘れてしまう可能性があります。

読者にあなたのコンテンツを忘れさせるために外部リンクだけが必要な場合、そもそもそれはおそらくそれほど良くないと主張することができます。これは真実かもしれませんが、一般的に、人々が気が散りやすい場合もあり、多くの場合、彼らの利益にはなりません。

これは白黒のトピックではなく、私は別の視点を受け入れています。

リソース

外部リンクのセキュリティ問題についてもっと読む