リンク先は「信頼できる場所」ですか？意外と見落としがちな `a` タグのセキュリティと `rel` 属性の話
Webサイトを作っていると、必ずと言っていいほど使う ``（アンカー）タグ。他のページへ飛んだり、外部のSNSへ誘導したりと、Webの「繋がり」を作る欠かせない存在ですよね。
でも、皆さんはリンクを貼るときに、「rel（レル）属性」のことを意識したことはありますか？
「なんだか難しそうなアルファベットが出てきた…」と身構える必要はありません。実はこれ、Webサイトを「悪意ある攻撃」から守り、Google先生にも正しくサイトを評価してもらうための、とっても大切な「お守り」のようなものなんです。
今日は、初心者の方がつまずきやすいこの `rel` 属性について、身近な例えを交えながら優しく解説していきますね。
—
1. なぜ「外部へのリンク」が危ないの？（Tabnabbing対策）
まずは、一番怖いお話から。新しいタブでリンクを開くとき、`target=”_blank”` を使いますよね。実はこれだけだと、思わぬセキュリティリスクがあるんです。
例えるなら、「自分の家の鍵をかけたまま、見知らぬ誰かに家の合鍵を渡してしまう」ような状態です。
悪意のあるページにリンクを飛ばすと、新しいページ側から「元のページ（あなたのサイト）」を勝手に書き換えたり、別のページに飛ばしたりすることができてしまうんです。これを「Tabnabbing（タブナビング）」と呼びます。
解決策：`rel=”noopener”` を添える
これを防ぐのが `rel=”noopener”` です。これをつけると、「リンク先からは元のページを操作させない」というバリアを張ることができます。
「あれ？`noreferrer` も聞いたことあるけど？」と思ったあなた、鋭いですね！ `noreferrer` は、リンク先に「どこから来たか」という情報（リファラー）すら送らない設定です。プライバシーをより重視したい場合はこちらを使いますが、基本的には `noopener` だけで今のブラウザなら十分安全ですよ。
—
2. SEOに影響する？ `rel=”nofollow”` の役割
次に、SEO（検索エンジン最適化）に関わるお話です。
Webの世界では、リンクは「おすすめの紹介状」のようなもの。リンクを貼ることは、Googleに対して「このサイトはいいサイトだよ！」と推薦していることになります。
でも、例えば「掲示板の書き込み」や「広告」など、「自分がおすすめしたわけじゃないけれど、リンクを置かなきゃいけない場所」ってありますよね。
そんなとき、`rel=”nofollow”` を使います。「このリンク先に評価（パワー）を渡さないでね」という意思表示です。
- `rel=”nofollow”`：検索エンジンに「このリンクは評価の対象外にして！」と伝える合図。
これで、信頼度が低いサイトや、お金をもらって貼っている広告リンクに、あなたのサイトの評価が流れてしまうのを防ぐことができるんです。
—
3. 実践！ rel属性を使いこなそう
ここまでのお話をまとめると、リンクのパターンはこうなります。
組み合わせることもできるんです！
実は、`rel` 属性はスペースで区切って複数書くこともできます。
例えば、「外部サイトに飛ばすから `noopener` が必要だし、さらに広告だから `nofollow` も付けたい！」という場合はこんな感じです。
—
最後に：あまり難しく考えすぎないで
いかがでしたか？「ただリンクを貼る」という作業一つとっても、裏側ではこうした細かい配慮が積み重なっています。
「全部覚えなきゃ…」と焦らなくて大丈夫ですよ。まずは「新しいタブで開くときは `rel=”noopener”` を付ける」という癖を付けるだけで、あなたのWebサイトはグッとプロフェッショナルで安全なものになります。
Web制作は、こうした「誰かを守るための小さな工夫」の連続です。その一つひとつを大切にできるあなたは、きっと素晴らしいエンジニアになれるはずです。
もし分からなくなったら、いつでもこのページに戻ってきてくださいね。一緒に少しずつ、強くて優しいWebサイトを作っていきましょう！
コメント