「rel=”noopener noreferrer”」はなぜつけるのか？

HTMLリンクと属性の重要性

ホームページやブログを作成する際、外部リンクは訪問者に追加情報を提供したり、別のサイトへ誘導するために欠かせない要素です。多くの場合、ユーザーがリンクをクリックすると、新しいタブでページが開かれるように設定されています。しかし、このときセキュリティの観点から重要な対策が必要になります。その対策として注目されるのが、「rel=“noopener noreferrer”」という属性です。この属性はなぜ必要なのか、どのような効果があるのか、詳しく解説していきます。

新しいタブでリンクを開く際のリスク

新しいタブやウィンドウでリンクを開くことは、ユーザーが現在閲覧しているページを維持したまま、別のページにアクセスできるという利便性を提供します。これは特に、外部リンクや関連ページを閲覧する際に役立ちます。たとえば、ブログ記事を読んでいて、参考リンクを新しいタブで開くことで、記事を読み続けることができるといった具合です。

しかし、この便利な機能にはセキュリティ上のリスクが潜んでいます。新しいタブで開かれたリンク先のページは、リンク元のページに対して特定の操作を行うことが可能です。これには、リンク元のページ内容の書き換えや、ユーザーをフィッシング詐欺にかけるなどの危険性が含まれます。このような攻撃は、特にリンク先が信頼できない場合に大きな問題となります。

このようなリスクを回避するために「noopener」という属性が登場しました。リンク先のページがリンク元のページに影響を与えるのを防ぐことで、セキュリティを強化します。

「noopener」と「noreferrer」の役割

「noopener」は、リンク元のページがリンク先からの不正な操作を受けないようにするための属性です。これにより、外部リンクをクリックして新しいタブで開かれる場合でも、リンク元のページが悪意のあるコードや操作から守られます。特に、オンラインショッピングやフォームの送信など、ユーザーが個人情報を入力するページでは、このような対策が欠かせません。

一方、「noreferrer」は、プライバシー保護に焦点を当てた属性です。通常、リンク先のページは、どのページからユーザーが遷移してきたかを示す「リファラー情報」を受け取ります。これは、マーケティングやトラフィック分析のために多くのウェブサイトで利用されています。しかし、ユーザーの閲覧履歴や個人情報が含まれる場合、リファラー情報を送信することはプライバシーの侵害となる可能性があります。そこで「noreferrer」を使用することで、リンク元の情報をリンク先に渡さないようにし、ユーザーのプライバシーを守ることができます。

「noopener」と「noreferrer」の併用

「noopener」と「noreferrer」はそれぞれ異なる役割を持ちながら、併用することで二重のセキュリティ対策を講じることができます。具体的には、「noopener」によってリンク先のページがリンク元に影響を与えないようにし、「noreferrer」によってリンク元の情報がリンク先に渡るのを防ぎます。これにより、セキュリティとプライバシーの両方が守られることになります。

特に、外部リンクを扱うサイトでは、この2つの属性を併用することが推奨されています。なぜなら、外部サイトは必ずしも信頼できるとは限らず、ユーザーのプライバシーやセキュリティが脅かされる可能性があるからです。したがって、セキュリティリスクを最小限に抑え、ユーザー体験を守るためには「noopener」と「noreferrer」の併用が有効な手段となります。

使用すべき場面

「rel=“noopener noreferrer”」は、特に外部リンクを設置する際に利用すべきです。外部サイトは、リンク元のページと異なるドメインで運営されているため、その信頼性はリンク元の運営者が完全に把握できない場合が多いです。信頼性の低い外部サイトにリンクを設定する際は、セキュリティリスクを回避するために必ず「noopener」と「noreferrer」を使用しましょう。

たとえば、ブログでの外部参照リンクや、広告リンク、アフィリエイトリンクを使用する場合がその典型です。これらは、外部のサービスやサイトにユーザーを誘導するため、リンク先がどのようなセキュリティ状態にあるかを常に保証できるわけではありません。そのため、これらのリンクには特に「noopener noreferrer」を設定し、リンク先がリンク元に悪影響を与えるリスクを排除する必要があります。

内部リンクとの違い

一方で、同じサイト内でのリンク（内部リンク）に対しては、これらの属性は必ずしも必要ではありません。同一ドメイン内でのリンクは、サイト運営者自身が管理しているため、リンク元とリンク先の安全性を確保できるからです。したがって、同じウェブサイト内で別のページに移動させる場合には、「noopener」や「noreferrer」を使用する必要はありません。

ただし、ユーザーが新しいタブで開くことを想定したリンクについては、たとえ内部リンクであってもセキュリティを意識して対策を講じることが推奨されます。特に、ユーザーが個人情報を入力するページなどでは、過剰なセキュリティ対策を講じることでリスクを回避することができます。

SEOへの影響は？

「noopener」や「noreferrer」といった属性がSEO（検索エンジン最適化）に与える影響についても、多くの人が気にするポイントです。結論から言えば、これらの属性がSEOに直接的な影響を与えることはありません。なぜなら、これらは主にセキュリティやプライバシー保護を目的とした属性であり、検索エンジンのアルゴリズムに影響を与えるものではないからです。

しかし、Googleなどの検索エンジンは、ユーザー体験やセキュリティを重要視しています。そのため、適切なセキュリティ対策を講じているサイトは、間接的に評価が向上する可能性があります。例えば、フィッシング詐欺や不正アクセスのリスクが低いサイトは、ユーザーにとって信頼性が高く、安全に閲覧できるサイトとみなされるため、長期的にはSEOにもプラスの影響をもたらすことが期待できます。

まとめ

「rel=“noopener noreferrer”」は、外部リンクを新しいタブで開く際に必須のセキュリティ対策です。特に、外部リンクを多く使用するウェブサイトにおいては、セキュリティとプライバシーを保護するために不可欠な要素となります。リンク先からの不正な操作を防ぎ、ユーザーのプライバシーを守ることで、より安全なウェブ体験を提供できるようになります。

適切なセキュリティ対策を講じることは、ユーザーの信頼を得るための基本であり、サイト全体の評価にも影響を与える重要な要素です。ウェブ運営者は、外部リンクを扱う際に必ず「noopener」と「noreferrer」を設定し、安全で快適なウェブ体験を提供することが求められます。