HTMLで外部リンクを設置するとき、下記のような書き方を見たことがあるかと思います。
<a href="リンク先URL" target="_blank" rel="noopener nofollow external noreferrer">
一見すると複雑に見えますが、これらはすべて「リンクの振る舞い」をコントロールするための属性です。
特に「rel」属性に指定する内容は、セキュリティやSEO、ユーザー体験に大きく関わってきます。
rel属性とは？
リンクの関連性（relationship）を示すもので、複数の値を半角スペースで並べて指定できます。
それぞれの意味を見ていきましょう。
noopener（セキュリティ対策）
HTMLで target="_blank" を指定すると、リンク先のページが window.opener を使って、リンク元のページを操作できる状態になります。この状態では、以下のようなリスクが生じます：
リスクの例：
- リンク先がJavaScriptで元ページを書き換える（フィッシングに悪用される可能性がある）
- 元ページを勝手にリダイレクトさせられる
- リンク元のデータや状態が漏れる
このような攻撃は「tabnabbing（タブナビング）」と呼ばれ、実際に過去に確認されたことがある攻撃手法です。
rel="noopener" の役割
rel="noopener" をつけると、リンク先のページから window.opener が使えなくなります。
つまり、リンク元のページを操作できなくなるので、上記のようなリスクを防ぐことができます。
また、最近のブラウザは noopener をデフォルトにする傾向があります（特に Chrome・Firefox・Safari など）。とはいえ、明示的に書いておく方が安全です。
nofollow（SEO対策）
このリンク先を「検索エンジンに評価させたくない」ときに使います。
たとえば広告、アフィリエイト、信頼性の低い外部ページへのリンクなどが該当します。
検索エンジンのクローラーに「このリンク先を辿る必要はないよ」と伝えることができます。
external（外部リンクの明示）
このリンクが外部サイトへのものであることを明示します。
HTML5仕様ではそこまで重視されていませんが、アクセシビリティを意識した設計の一環として使うケースもあります。
noreferrer（リファラ情報の遮断）
リンク元のURL情報（リファラ）をリンク先に渡さないようにします。
たとえば、自分のサイトがどこから来たのかをリンク先に知られたくない場合に使います。
noopenerと一緒に使われることが多いです。
sponsored（広告リンクの明示）
リンクが広告や報酬を伴うもの（例：アフィリエイトリンク）の場合は、Googleのガイドラインに沿ってsponsoredを明示しましょう。
2020年以降、Googleはnofollowに加えてsponsoredやugc（ユーザー投稿）などの明示を推奨しています。
まとめ：rel属性の使い方の基本
- 通常の外部リンク：
rel="noopener noreferrer" - 評価させたくない外部リンク（参考・信頼性が低い）：
rel="noopener nofollow noreferrer" - アフィリエイトや広告リンク：
rel="noopener sponsored noreferrer" - SEOを意識しない内部リンク：
rel属性は特に不要です
SEOやセキュリティ、ユーザー体験を考えるうえで、「rel」属性の適切な設定はとても大切です。
コピーして使うだけではなく、意味を理解したうえで設定するようにしましょう。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
