HTML
rel=”noopener noreferrer”とは？使うとき・使わないときまでわかりやすく解説！
【初心者向け】rel=”noopener noreferrer”とは？本当に必要？使うとき・使わないときまでわかりやすく解説！
この記事でわかること
- rel=”noopener noreferrer”って何？
- なんで必要なの？
- サイト内リンクや大手サイトへリンクするときはどうする？
- すぐ使えるコード例
rel=”noopener noreferrer”とは？
HTMLでリンクを作るときに使う属性です。
特に、リンクを「新しいタブで開く」とき（target=”_blank”）に一緒に使うのが大事です。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Exampleサイトへ</a>
これを付けることで、セキュリティとプライバシー保護が強化されます。
なんで必要なの？
理由1：セキュリティ上の危険を防ぐため（noopener）
もし target=”_blank” だけ使った場合、
リンク先のページが、あなたのページを自由に操作できてしまう可能性がある
これを悪用すると、
- 元ページの内容を書き換えられる
- フィッシングサイトに誘導される
- 個人情報を盗まれる
という怖いことが起こるかもしれません。
ここで rel=”noopener” を付けると、
リンク先からあなたのページを操作できなくなるので、安心です。
理由2：プライバシーを守るため（noreferrer）
通常、リンクをクリックすると、どこのサイトから来たか（リファラー情報）がリンク先に送信されます。
例えば、あなたのサイトが
https://mysite.com/blog/post1
だった場合、リンク先のサイトに「この人はmysite.comから来た」とバレる仕組みです。
rel=”noreferrer”を付けると、どこから来たかを教えないようにできます。
特に、個人ブログや匿名サイトではプライバシーを守るためにも重要です。
じゃあ、いつ使う？いつ使わない？
使うべき場面
- 外部サイトに飛ばすリンク
- 特に知らないサイト、一般のサイト、個人のサイトなど
- 新しいタブで開かせる場合（target=”_blank”あり）
基本的に、外部リンクを新規タブで開くなら、絶対に付けると覚えてOKです。
逆に「付けない方がいい」場合
サイト内リンク（同じドメイン内）
自分のサイト内のページへリンクする場合（内部リンク）は、
rel=”noopener noreferrer”を付けないほうがSEOに良いと言われています。
理由
noreferrerを付けると、リンクの評価（PageRank伝達）が失われる可能性があるため。
つまり、内部リンクには基本的に不要です！
信頼できる大手サービス（Google、Instagramなど）へのリンク
これも場合によってはnoreferrerを付けない選択をすることがあります。
理由
GoogleやInstagramなどは自社のサービス運営がしっかりしているため、セキュリティリスクが非常に低い。
また、リファラー情報が送られることを前提に動くシステムもあるため。
とはいえ、安全第一なら付けても問題ありません。
（ただし細かい仕様を気にする場合は調整する、くらいでOKです）
まとめ
| 外部リンク （知らないサイト） |
付ける |
|---|---|
| 外部リンク （大手サービス） |
できれば付ける（ケースバイケース） |
| 内部リンク （自分のサイト） |
基本付けない |
【すぐ使えるコピペ用】安全なリンクコード
<!-- 外部リンク（安全版） --> <a href="https://example.com" target="_blank" rel="noopener noreferrer">Exampleサイトへ</a> <!-- 内部リンク（サイト内） --> <a href="/about" target="_blank">サイトについて</a>
最後にひとこと
ブログやWebサイトを運営する上で、
rel=”noopener noreferrer”は「読者を守るための小さなマナー」みたいなものです。
あなた自身も、あなたのサイトに訪れる人も、
安心してリンクをクリックできるように、ぜひ意識して付けていきましょう！
