リンクはただの「道しるべ」ではない：`rel`属性で制御するSEOとセキュリティの深淵
フロントエンド開発の現場で、``タグを単なる「ページ遷移のトリガー」としか見ていないなら、少し立ち止まって考えてみましょう。僕たちが何気なく書いているその一行は、Googleのクローラーに対する「推薦状」であり、同時にサイトのセキュリティを守る「防壁」でもあるのです。
今回は、中級エンジニアなら絶対に押さえておくべき、`rel`属性によるリンクの制御術を解説します。
—
なぜ、ただの `href` では不十分なのか
現代のウェブ開発において、リンクには二つの大きなリスクと責任が伴います。
1. SEO評価の流出とスパムの連鎖: 信頼できないサイトや広告へのリンクに、自分のサイトの「評価（PageRank）」を無意識に分け与えていませんか？
2. セキュリティの脆弱性: `target=”_blank”` を使ったリンクで、別タブで開いた先のページから元のページを操作される（`window.opener` 経由の攻撃）リスクを放置していませんか？
これらを制御するために、HTML5以降の `rel` 属性が進化してきました。
—
SEO制御の「三種の神器」：nofollow, sponsored, ugc
検索エンジンのクローラーに対して、リンクの性質を明示的に伝えることは、SEOの基本中の基本です。
- `rel=”nofollow”`: 「このリンクを辿ってほしくない」「評価を渡したくない」という意思表示です。信頼できないコンテンツや、広告リンクの初期の標準でした。
- `rel=”sponsored”`: 広告や有料のリンクであることを明示します。Googleは「広告にはこれを使ってくれ」と強く推奨しています。
- `rel=”ugc”`: User Generated Content（ユーザー生成コンテンツ）用です。コメント欄や掲示板など、ユーザーが投稿したリンクにはこれを使うのがベストプラクティスです。
これらを適切に使い分けることで、検索エンジンは「あなたのサイトが何に責任を持ち、何に責任を持たないか」を正確に理解できるようになります。
—
セキュリティの鉄則：`rel=”noopener”`
実務で最もやってはいけないミスの一つが、`target=”_blank”` を単独で使うことです。
リンク先で `window.opener.location.href = …` のようなJSが実行されると、元のページが別のサイトに書き換えられてしまうフィッシング攻撃が可能になります。これを防ぐのが `rel=”noopener”` です。
現代のブラウザでは、`target=”_blank”` を指定すると暗黙的に `noopener` が働くケースも増えていますが、「明示的に書く」のがプロの流儀です。
—
実践：現場で使うべき「最強のコードパターン」
では、これらの知識を統合したサンプルコードを見てみましょう。WordPressのテンプレートや、Reactのコンポーネントを作る際にもそのまま応用できる構成です。
コードのポイント
- `noreferrer` を添える理由: `noopener` に加えて `noreferrer` を付けることで、遷移先のサーバーに `Referer` ヘッダー（どのページから来たかという情報）を送信しなくなります。プライバシー保護の観点から、外部サイトへのリンクにはセットで書くのが現在のスタンダードです。
- 複数指定のルール: `rel` 属性はスペース区切りで複数指定可能です。例えば `rel=”sponsored noopener”` と書けば、広告であることを伝えつつ、セキュリティも確保できます。
—
最後に：なぜここまでこだわるのか
フロントエンドエンジニアが「HTMLの細かい属性」にまでこだわる理由は、単に仕様を守るためではありません。「自分たちのサイトの健全性を、自分たちの手でコントロールする」ためです。
クローラーは、あなたの書いたタグの背後にある意図を読み取ろうと必死です。その意図を明確に言語化してあげることこそが、巡り巡ってサイトの評価を高め、ユーザーを安全に導くことにつながります。
次はコードを書くとき、`href` の先だけでなく、`rel` 属性に込められた「意図」を少しだけ意識してみてください。その小さなこだわりが、あなたの書くコードの価値を一段引き上げてくれるはずです。
コメント