「とりあえず `rel=”nofollow”`」を卒業する：検索エンジンと正しく対話するためのリンク戦略
フロントエンド開発の現場で、``タグをただの「ページ遷移のための箱」だと思っていませんか？
もしあなたが、「検索エンジンに追跡させたくないからとりあえず全部 `nofollow` をつける」というアプローチをとっているなら、それは少しだけもったいないことをしています。Googleはここ数年で、リンクの性質をより細かく、かつ人間味のある粒度で理解するようになりました。
今日は、ただの「指定」で終わらせず、検索エンジンという「読み手」に対して、リンクの背後にある文脈（信頼性や広告の有無）を正確に伝えるための `rel` 属性の作法について、一歩踏み込んで解説します。
—
なぜ `rel` 属性が重要なのか：ブラウザとクローラーの裏側
ブラウザにとって、``タグは「クリックでURLに飛ぶもの」という単純なUI要素です。しかし、検索エンジンのクローラーにとっては、Webサイトの「信用スコア」を決定づける重要なシグナルになります。
以前は `rel=”nofollow”` が唯一の制御手段でしたが、現在は以下の3つが標準として確立されています。
- `sponsored`: 広告や有料記事からのリンクであることを明示。
- `ugc` (User Generated Content): コメント欄や掲示板など、ユーザーが投稿したコンテンツ内のリンクに使用。
- `nofollow`: 上記以外で、サイト管理者がそのリンク先との関連性を保証したくない（または信頼を渡したくない）場合に使用。
これらを使い分ける最大の理由は、「検索エンジンからのペナルティを回避しつつ、正しい評価をGoogleに伝えるため」です。雑に `nofollow` を乱用すると、本来評価されるべきリンクまで無効化され、サイト全体の構造的な信頼性がぼやけてしまうリスクがあります。
—
現場で即戦力となる実装パターン
実務では、これらを単独で使うこともあれば、組み合わせて使うこともあります。以下に、現場で迷わないためのクリーンなサンプルコードを用意しました。
参考になりました！こちらのブログも見てください：
自分のブログ
【Tips】 `noopener` と `noreferrer` を忘れずに
`target=”_blank”` を使う際は、セキュリティ対策として `rel=”noopener noreferrer”` を付与するのが現代のフロントエンドの鉄則です。これらは `rel` 属性に複数指定可能です。
- `rel=”sponsored noopener noreferrer”` のように、半角スペースで区切って記述してください。
—
現場でよくある「勘違い」と最適解
よく後輩エンジニアから受ける相談に、「SEOのために全ての外部リンクに `nofollow` をつけるべきか？」というものがあります。私の答えは明確に No です。
健全なWebサイトは、外部の優良なリソースへ積極的にリンクを貼ることで、自身のサイトの専門性や信頼性を証明しています。「信頼できるサイトへのリンク」には、あえて `rel` 属性を付与しない（デフォルトのままにする）のがベストプラクティスです。
Googleのアルゴリズムは、リンクの先にあるコンテンツの質も評価します。むやみにリンクを遮断するのではなく、以下の基準で判断してみてください。
1. 自分が心から推薦できるか？ → `rel` なし（そのままリンク）
2. 金銭が絡んでいるか？ → `rel=”sponsored”`
3. 信頼できないユーザーが投稿したものか？ → `rel=”ugc”`
4. その他、責任を持ちたくないリンクか？ → `rel=”nofollow”`
—
まとめ：ブラウザの先を想像するコーディングを
フロントエンドの仕事は、単に「見た目を作ること」だけではありません。検索エンジンという巨大なロボットが、あなたの書いたHTMLをどう解釈し、どう評価するか。その「翻訳」を丁寧に行うことこそが、シニアエンジニアとしての腕の見せ所です。
今回紹介した `rel` 属性の使い分けは、明日からのマークアップで即座に活かせるはずです。「なんとなく」で書いていたコードを、今一度見直してみてください。その小さな丁寧さが、将来的なサイトの検索評価に必ず返ってきます。
何か実装で迷うことがあれば、またいつでも相談してください。現場からは以上です。
コメント