Next.js : 外部リンクのnoopener noreferrer について

要約
外部リンクには、セキュリティ対策として`noopener noreferrer` 属性を設定しても問題ない
意見はこのエリアに表示されます

結論

セキュリティ対策としてnoopener noreferrer 属性を設定しても問題ないかなと思います。ユーザー投稿型アプリケーションのエディターには、nofollowを追加してもいいでしょう。

noopener, noreferrer, nofollow の説明

  • noopener: リンク先ページが元のページの JavaScript を制御することを防ぎ、セキュリティを向上させます。
  • noreferrer: リファラー情報をリンク先に送らないようにします。これにより、リンク元のプライバシーが保たれます。
  • nofollow: 検索エンジンにリンク先を信用しないよう伝えるための属性です。リンクの SEO 効果を回避する場合に使います。

a タグが非推奨な理由

Next.js では、Link コンポーネントを使うことで、クライアントサイドのナビゲーションが有効になり、ページ遷移が速くなります。通常の <a> タグを使うと、サーバーサイドのリロードが発生するため、UX の観点から非推奨です。

知っておくべきこと: a タグの属性（例えば className や target="_blank"）は、Link コンポーネントに props として追加すると、基底の a 要素に渡されます。

以下は、Link コンポーネントの主要なプロパティです。

プロパティ例型必須
replacereplace={false}Boolean-
scrollscroll={false}Boolean-
prefetchprefetch={false}Boolean or null-

詳細は公式ドキュメントを参照してください。

まとめ

Next.js の Link コンポーネントを使用することで、外部リンクを安全かつ最適に実装できます。適切な属性を追加することで、セキュリティと SEO を両立させたリンクを作成しましょう。

Explore More
関連記事はありません。
Trends