HTML リンク 別ウィンドウの設定と注意点

HTML リンク 別ウィンドウの設定と注意点：詳細な解説

ウェブサイトを構築する上で、リンクは不可欠な要素です。ユーザーを別のページや外部のサイトへ誘導する際に使用されます。通常、HTMLのリンク（<a>タグ）をクリックすると、ユーザーは現在閲覧しているタブやウィンドウでリンク先のページに移動します。これは、ユーザーの「戻る」ボタンによるナビゲーションを妨げない、自然な挙動として広く受け入れられています。

しかし、特定の状況下では、リンクを新しいタブまたはウィンドウで開きたいというニーズが出てきます。例えば、外部サイトへのリンクをクリックした際に、元のサイトのページを閉じずに残しておきたい、あるいは特定のファイル（PDFなど）を別タブで開いて確認してもらいたい、といった場合です。このような場合に利用されるのが、<a>タグの target 属性です。中でも最も頻繁に使用されるのが、target="_blank" という設定です。

この設定は非常に便利である一方で、ユーザー体験やセキュリティの観点から無視できない様々な注意点やリスクを伴います。本稿では、HTMLリンクの基本的な仕組みから始め、target="_blank" の詳細な設定方法、メリット・デメリット、そして特に重要なセキュリティ上の注意点とその対策、さらにはアクセシビリティやユーザビリティへの影響、代替手段に至るまで、網羅的かつ詳細に解説します。約5000語にわたる本稿を通じて、読者の皆様が target="_blank" を適切に使用するための知識と判断力を養うことを目指します。

1. はじめに：なぜリンクの開き方を制御する必要があるのか？

ウェブサイトを訪れるユーザーは、様々な目的を持ってアクセスします。情報収集、オンラインショッピング、サービス利用など、その行動は多岐にわたります。サイト運営者は、ユーザーが快適に目的を達成できるよう、ナビゲーションやコンテンツ配置を最適化する必要があります。

リンクは、ユーザーをサイト内の他のページや、関連する外部の情報源へと導くための重要な手段です。リンクをクリックした後の挙動は、ユーザーのサイト内での行動フローに大きな影響を与えます。

• 標準的な挙動（同じタブで開く）： ユーザーがリンクをクリックすると、現在見ているページがリンク先のページに置き換わります。ユーザーは「戻る」ボタンを使って前のページに戻ることができます。これは直感的で、多くのユーザーが慣れている挙動です。サイト内の移動にはこの挙動が適しています。
• 新しいタブ/ウィンドウで開く挙動（target="_blank"）： ユーザーがリンクをクリックすると、新しいタブまたはウィンドウが開かれ、そこにリンク先のページが表示されます。元のページは閉じられずに残ります。これは、ユーザーに元のページを参照させながら新しい情報を見てもらいたい場合や、外部サイトへの離脱を防ぎたい場合に有効だと考えられることがあります。

この「新しいタブ/ウィンドウで開く」という設定は、一見便利に思えますが、安易に使用すると様々な問題を引き起こす可能性があります。そのメリットとデメリットを十分に理解し、適切な状況でのみ使用することが極めて重要です。

2. HTMLリンクの基本：<a> タグと href 属性

HTMLにおけるリンクは、<a>（アンカー）タグを使用して作成されます。このタグは、他のウェブページ、ファイルのダウンロード、または同じページ内の特定の位置へのハイパーリンクを作成します。

基本的な構文は以下の通りです。

html
<a href="リンク先のURL">リンクテキストまたは画像</a>

• <a>：アンカータグの開始タグ。
• href：Hypertext REFerence の略で、リンク先のURLを指定する属性です。ウェブページ（例: https://www.example.com/page.html）、ファイルパス（例: /files/document.pdf）、メールアドレス（例: mailto:[email protected]）、電話番号（例: tel:+811234567890）など、様々な形式のURLを指定できます。
• リンク先のURL：実際に移動または参照するリソースの場所です。
• リンクテキストまたは画像：ユーザーがクリックする要素です。通常はテキストですが、<img>タグを内包させることで画像をリンクにすることも可能です。
• </a>：アンカータグの終了タグ。

ユーザーがこのリンクをクリックすると、特別な指定がない限り、ブラウザは現在のウィンドウまたはタブで href 属性に指定されたURLを開きます。これが、リンクのデフォルトの挙動です。

3. target 属性によるリンク先の制御

HTMLの <a> タグには、target という属性を指定することができます。この属性を使用することで、リンク先をどこに表示するかを制御できます。target 属性に指定できる代表的な値は以下の通りです。

• _self: リンク先を現在のウィンドウまたはタブに開きます。これは target 属性を指定しない場合のデフォルトの挙動です。通常はこの値を明示的に指定する必要はありませんが、他の target 値が設定されている状況で明示的にデフォルトの挙動に戻したい場合などに使用できます。
  html
<a href="https://www.example.com/page.html" target="_self">同じウィンドウで開く（デフォルト）</a>
• _blank: リンク先を新しいウィンドウまたはタブに開きます。これが本稿の主題となる設定です。
  html
<a href="https://www.example.com/external-site.html" target="_blank">新しいタブで開く</a>
• _parent: リンクがフレームセット内に含まれている場合、リンク先を親フレームセットに開きます。フレームセットを使用することは現在では非推奨であり、この値が使用される機会はほとんどありません。
• _top: リンクがフレームセット内に含まれている場合、リンク先をウィンドウ全体（フレームセットを解除して）に開きます。これもフレームセットの使用減少に伴い、ほとんど使用されません。
• framename: リンク先を指定した名前のフレームに開きます。これもフレームセットを使用しない現代のウェブデザインでは使用されません。

これらの値の中で、現代のウェブサイトで実際に使用される可能性のあるのは _self と _blank のみです。特に _blank は、外部サイトへのリンクや、特定の種類のコンテンツ（PDFなど）へのリンクに対して使用されることがあります。

target="_blank" の具体的な記述方法と例

target="_blank" を設定するには、<a> タグの属性として target="_blank" を追加するだけです。

例1：外部サイトへのリンク

“`html

より詳しい情報はこちらをご覧ください。
外部リソースサイトへ

``
このリンクをクリックすると、ユーザーは現在のページをそのままにしたまま、新しいタブでhttps://external-resource.com/` を開きます。

例2：PDFファイルへのリンク

“`html

レポートの全文は以下からダウンロードできます。
年間レポート (PDF)

``
多くのブラウザでは、PDFファイルへのリンクは通常ダウンロードとして扱われますが、target=”_blank”` を指定することで、新しいタブでブラウザ組み込みのPDFビューアを使用して開かせることができます（ユーザーの設定によります）。これにより、ユーザーはPDFを閲覧しながら、元のページに戻って他の情報を確認することができます。

4. target="_blank" を使うメリット

target="_blank" は、使い方によっては有効な手段となり得ます。主なメリットは以下の通りです。

• 元のページにユーザーを留めておける: 外部リンクをクリックしても現在のページが閉じられないため、ユーザーは後で簡単に元のページに戻ることができます。これは、参照資料として元のページを残しておきたい場合や、ユーザーが複数の情報を並行して確認したい場合に役立ちます。特に、サイト内で重要なタスクを実行している最中に外部リソースを参照する必要がある場合などに有効です。
• 参照元として元のページが残りやすい: アフィリエイトサイトや情報キュレーションサイトなどでは、ユーザーが紹介している商品ページや情報源に遷移した後も、元の紹介ページに戻ってきやすいように target="_blank" を使用することがあります。これにより、ユーザーが他の関連情報を引き続き閲覧したり、別のリンクをクリックしたりする可能性が高まります。
• アフィリエイトリンクや外部サイトへの誘導に利用される理由: サイト運営者としては、ユーザーに外部サイトへ移動してもらいたいが、同時に自分のサイトにも滞在してもらいたいという場合があります。アフィリエイトリンクの場合、ユーザーが紹介元のページに戻ってこないとその後の行動（例：別の商品の比較検討）が期待できません。そのため、target="_blank" を使うことで、ユーザーが紹介元のページとアフィリエイト先のページを同時に開いて比較検討しやすくしたり、アフィリエイト先のページで目的を達成した後、すぐに紹介元のページに戻ってこれるようにしたりする意図で使用されます。
• 特定のコンテンツを新しい形式で開く: PDFファイルや大きな画像、動画などを新しいタブで開くことで、ユーザーはそれらのコンテンツを専用のビューアや領域で確認できます。これにより、現在のページのレイアウトを崩さずにコンテンツを提供できます。例えば、製品の詳細画像を高解像度で確認してもらいたい場合などに有効です。

これらのメリットは、サイト運営者の意図としては理解できます。しかし、これらのメリットを追求するあまり、ユーザー体験やセキュリティを犠牲にしてしまうことがないように、後述するデメリットや注意点を十分に考慮する必要があります。

5. target="_blank" を使うデメリットと注意点

target="_blank" は多くの問題を引き起こす可能性があり、使用には細心の注意が必要です。特に重要なデメリットと注意点は以下の通りです。

ユーザー体験の低下

• 不要なタブ/ウィンドウの増加: リンクをクリックするたびに新しいタブが開くと、ユーザーのブラウザには多数のタブが蓄積されていきます。これは特に多くのリンクをクリックするユーザーにとって煩雑であり、目的のタブを見つけにくくなる原因となります。ユーザーは手動で不要なタブを閉じる必要が生じ、操作の手間が増えます。
• 「戻る」ボタンが使えなくなる: ユーザーは通常、ウェブサイト内を移動する際にブラウザの「戻る」ボタンを頻繁に使用します。しかし、新しいタブで開かれたリンクから元のページに戻るには、元のタブに切り替える必要があり、「戻る」ボタンの直感的なナビゲーションが使えません。これは多くのユーザーにとって混乱の原因となります。
• PCリソースの消費: 開いているタブやウィンドウが多いほど、ブラウザやPCはより多くのメモリやCPUリソースを消費します。これにより、特にスペックの低いデバイスを使用しているユーザーにとっては、ブラウザの動作が重くなったり、フリーズしたりする可能性があります。
• モバイルデバイスでの挙動の違い: スマートフォンやタブレットなどのモバイルデバイスでは、新しいタブやウィンドウの扱いがPCとは異なる場合があります。多くのモバイルブラウザでは新しいタブとして開かれますが、アプリ内ブラウザなどで開かれる場合は、別のアプリとして新しいインスタンスが起動されるように見えることもあります。タブ切り替えの操作もPCほどスムーズでない場合が多く、ユーザー体験を損なう可能性があります。
• アクセシビリティの問題: 障害を持つユーザー、特にスクリーンリーダーを使用しているユーザーにとって、リンクが新しいタブで開かれることは予期しない挙動となり、混乱を招く可能性があります。スクリーンリーダーは通常、同じタブ内でのナビゲーションを想定しています。新しいタブが開かれたことをユーザーに適切に伝える仕組みがない場合、ユーザーは自分がどこにいるのか分からなくなってしまうことがあります。また、認知障害のあるユーザーにとっては、予期しない新しいウィンドウ/タブの出現は認知負荷を高めます。

セキュリティ上の脆弱性（opener APIの問題）

これが target="_blank" を使用する上で最も深刻かつ見落とされがちな問題です。target="_blank" を使用して新しいタブでリンクを開いた場合、元のページ（リンク元）は開かれた新しいタブのJavaScriptから window.opener オブジェクトを通じてアクセス可能な状態になります。

• window.opener オブジェクトとは？
  window.opener は、window.open() メソッドや <a> タグの target="_blank" によって開かれた新しいウィンドウ/タブから、元のウィンドウ/タブ（開き元）を参照するためのJavaScriptプロパティです。つまり、新しいタブのJavaScriptから window.opener を通じて、開き元のウィンドウオブジェクトにアクセスできるのです。

• セキュリティリスク:
  この window.opener を悪用することで、新しいタブで開かれた悪意のあるページから、元のページを制御できてしまう可能性があります。具体的には、以下のような攻撃が考えられます。

  • フィッシング攻撃: 悪意のあるサイトは window.opener.location.href を変更することで、元のページのURLを偽のログインページなどにリダイレクトさせることができます。ユーザーは元のページに戻ったつもりで、偽のログインページに認証情報を入力してしまう可能性があります。これは「タブナビング（Tabnabbing）」と呼ばれる攻撃手法の一つです。
  • ページ改ざん: window.opener を通じて元のページのDOM（Document Object Model）にアクセスし、ページの内容を改ざんすることが理論的には可能です。ただし、クロスオリジンセキュリティポリシーにより、異なるオリジンのページ間ではDOMへの直接的なアクセスは制限されることが多いです。しかし、location プロパティの変更など、限られた操作は可能です。

• 対策：rel="noopener" の重要性
  このセキュリティリスクを防ぐためには、target="_blank" を使用する際に必ず rel="noopener" 属性を同時に指定する必要があります。

  html
<a href="https://external-resource.com/" target="_blank" rel="noopener">新しいタブで開く（安全対策済み）</a>
rel="noopener" を指定すると、新しいタブで開かれたページから window.opener オブジェクトへの参照が無効になります。つまり、新しいタブのJavaScriptから元のページを制御できなくなるため、上記のフィッシング攻撃などを防ぐことができます。

• rel="noreferrer" の効果
  もう一つ関連する属性として rel="noreferrer" があります。これも rel="noopener" と一緒に指定されることがあります。
  html
<a href="https://external-resource.com/" target="_blank" rel="noopener noreferrer">新しいタブで開く（安全対策とリファラー非送信）</a>
rel="noreferrer" を指定すると、リンクをクリックした際に、新しいタブで開かれたページに対して、どのページから来たかという情報（HTTPリファラーヘッダー）が送信されなくなります。プライバシー保護の観点から使用されることがあります。
  重要な点として、rel="noreferrer" を指定した場合、多くのブラウザで自動的に rel="noopener" の効果も得られます（つまり、window.opener が null になります）。しかし、古いブラウザや一部の環境では noopener の効果が得られない可能性があるため、セキュリティを確保するには noopener と noreferrer の両方を指定するのが最も安全な方法とされています。

• ブラウザによる noopener のデフォルト化の状況
  近年の主要なブラウザ（Chrome 88+, Firefox 84+, Edge 88+ など）では、target="_blank" が指定された <a> タグに対して、rel="noopener" が指定されていなくても、自動的に noopener と同様のセキュリティ対策が適用されるようになっています。つまり、新しいタブから元のページの window.opener へのアクセスはデフォルトでブロックされる傾向にあります。
  しかし、この挙動はブラウザの実装に依存するため、すべてのユーザーの環境で保証されるわけではありません。特に古いバージョンのブラウザを使用しているユーザーや、WebViewのような特殊な環境では、デフォルトで安全策が適用されない可能性があります。
  したがって、現在でも target="_blank" を使用する際は、明示的に rel="noopener" （または rel="noopener noreferrer"）を指定することが、セキュリティ上のベストプラクティスとされています。 念のため noreferrer も加えておくことで、ブラウザによっては古いバージョンでも noopener と同様の効果が得られる可能性があり、またリファラー情報が不要であればプライバシー保護にもつながるため推奨されます。

• WordPressなどCMSでの自動付与機能
  多くのモダンなCMS（コンテンツ管理システム）やウェブサイトビルダーでは、エディタ上で外部リンクに target="_blank" を設定すると、自動的に rel="noopener noreferrer" もしくは rel="noopener" を付与するようになっています。例えば、WordPressのブロックエディタ（Gutenberg）では、外部サイトへのリンクに「新しいタブで開く」を設定すると、デフォルトで rel="noopener noreferrer" が追加されます。
  ただし、古いバージョンのCMSを使用している場合や、手書きでHTMLを記述する場合には、自分でこの属性を追加する必要があります。

SEOへの影響（間接的）

target="_blank" が直接的に検索エンジンのランキングに影響を与えることはありません。Googleなどの検索エンジンは、リンクが新しいタブで開かれるかどうかをランキング要因としては使用していません。

しかし、間接的な影響は考えられます。

• ユーザー体験の低下による影響: 前述したように、不要なタブの増加やナビゲーションの混乱はユーザー体験を損ないます。ユーザーがサイトを使いにくいと感じれば、滞在時間が短くなったり、直帰率が高まったりする可能性があります。これらのユーザー行動に関する指標は、間接的にサイトの品質評価に影響を与える可能性が指摘されています。
• リンクジュース（PageRank）: target="_blank" を指定しても、指定しなくても、リンク自体が持つPageRank（リンクジュース）の受け渡しに違いはありません。rel="noopener" や rel="noreferrer" も、PageRankの受け渡しには影響しません。ただし、rel="nofollow" を指定した場合は、PageRankは受け渡されません。
  html
<a href="https://external-resource.com/" target="_blank" rel="noopener noreferrer nofollow">新しいタブで開く（安全対策+リファラー非送信+PageRank非受け渡し）</a>
  アフィリエイトリンクなど、必ずしも推薦を意味しない外部リンクには nofollow を追加することが推奨される場合があります。

実装上の考慮事項

• すべての外部リンクに一律で適用すべきか？
  多くのウェブサイトでは、外部リンクに一律で target="_blank" を設定していることがあります。しかし、これは前述のユーザー体験の問題を引き起こしやすいため、推奨されません。ユーザーは外部リンクをクリックするとサイトを離れることを予期しており、必要であれば自分で新しいタブで開く（右クリックメニューやCtrl/Cmd+クリックなど）ことができます。
  一律適用は避け、特定の種類のリンク（例: PDFファイル、非常に重要な参照資料など）に限定して使用を検討するのが望ましいです。
• 内部リンクへの適用:
  サイト内の他のページへのリンクに target="_blank" を使用することは、ほとんどの場合避けるべきです。サイト内のナビゲーションは、ユーザーが自然にページ間を移動し、「戻る」ボタンで戻ってこれるように設計されるべきです。サイト内のリンクを新しいタブで開く設定にすると、ユーザーは自分がサイト内のどこにいるのか混乱しやすくなります。
• ユーザーへの明示:
  リンクが新しいタブで開かれることをユーザーに事前に知らせることは、ユーザビリティの観点から重要です。リンクテキストの横にアイコン（例: ↗️ や 新しいウィンドウアイコン）を追加したり、リンクテキストに「（新しいタブで開きます）」のような注釈を加えたりすることが考えられます。これは、特にアクセシビリティの観点からも推奨されます。

6. rel="noopener" と rel="noreferrer" の詳細

前述の通り、rel="noopener" と rel="noreferrer" は target="_blank" とセットで理解すべき非常に重要な属性です。

rel="noopener"

• 役割: 新しいウィンドウ/タブで開かれたページから、元のページ（開き元）の window.opener オブジェクトへの参照を無効にします。
• 効果: 開き元のページのJavaScriptプロパティ（特に window.opener.location）を新しいページから変更されることを防ぎます。これにより、悪意のあるサイトが開き元のページをフィッシングサイトなどにリダイレクトさせる「タブナビング」攻撃を効果的に防ぎます。
• ブラウザサポート: 近年の主要ブラウザの多くでサポートされており、target="_blank" とともに使用した場合のデフォルトの挙動になりつつありますが、互換性のために明示的な指定が推奨されます。
• 注意点: window.opener を無効にするため、新しいタブで開いたページと元のページの間でJavaScriptによる連携（例: 新しいタブを閉じたときに元のページを更新するなど）を行いたい場合には使用できません。ただし、そのような用途は限定的であり、セキュリティリスクを考慮すると、多くの場合は連携よりもセキュリティが優先されるべきです。

rel="noreferrer"

• 役割: リンクをクリックした際に、新しいウィンドウ/タブで開かれたページに対して、HTTPリファラーヘッダー（どのページから来たかを示す情報）を送信しません。
• 効果: ユーザーのプライバシーを保護します。また、多くのブラウザで rel="noopener" と同様の効果（window.opener を null にする）も同時に得られます。
• ブラウザサポート: noopener と同様、多くのブラウザでサポートされています。
• 注意点: リンク先のサイトは、ユーザーがどこから来たのか（流入元URL）を通常の手段では知ることができなくなります。リンク先のサイトがアクセス解析などで流入元情報を必要としている場合は、この属性の使用を検討する必要があります。しかし、セキュリティとプライバシーの観点からは推奨される属性です。

rel 属性の他の値との組み合わせ

rel 属性には noopener や noreferrer 以外にも様々な値があります（例: nofollow, sponsored, ugc など）。これらの値はスペースで区切って複数指定することができます。

例:
html
<a href="https://affiliate.example.com/" target="_blank" rel="noopener noreferrer sponsored">アフィリエイトリンク</a>
この例では、新しいタブで開き、セキュリティ対策とリファラー非送信を行い、さらに検索エンジンに対してスポンサー付きリンクであることを示しています。

7. target="_blank" の代替手段と推奨されるアプローチ

target="_blank" がユーザー体験やセキュリティに問題を抱えていることを踏まえると、可能な限り代替手段を検討するか、使用する場合でもユーザーへの配慮を忘れないアプローチが推奨されます。

ユーザー自身に開く方法を選択させる

最もシンプルでユーザーフレンドリーな方法は、リンクのデフォルトの挙動（同じタブで開く）を維持し、ユーザーが自分で新しいタブやウィンドウで開く方法を選択できるようにすることです。

• 右クリックメニュー: ユーザーはリンクを右クリックし、「新しいタブで開く」や「新しいウィンドウで開く」を選択できます。
• キーボードショートカット: リンクをCtrlキー（MacではCmdキー）を押しながらクリックすると、新しいタブでリンクが開きます。
• 中クリック: マウスの中ボタン（スクロールホイールを押し込むなど）でリンクをクリックすると、新しいタブでリンクが開きます。

これらの方法はウェブブラウザの標準機能であり、多くのユーザーが認知しています。ユーザーは自分の意図に基づいて、現在の作業を中断せずにリンク先を確認したい場合にこれらの操作を選択します。この方法であれば、不要なタブが勝手に増えることもなく、ユーザーの操作に委ねられるため、最もユーザー体験を損ないにくいと言えます。

リンク先が外部リンクであることを示す

ユーザーがリンクをクリックする前に、そのリンクが外部サイトへ遷移するものであることを視覚的に示すことで、ユーザーはリンクをクリックした後の挙動を予測しやすくなります。

• アイコンの追加: 外部リンクの横に小さなアイコン（例: ↗️, 外部サイトへの矢印）を追加します。
  html
<a href="https://external-site.com/">外部サイトへ<img src="/images/external-link-icon.svg" alt="新しいウィンドウで開きます" style="vertical-align: middle; margin-left: 4px; width: 1em; height: 1em;"></a>
• テキストによる注釈: リンクテキストの一部として「（新しいタブで開きます）」や「（外部サイト）」といった注釈を加えます。
  html
<a href="https://external-site.com/">参考資料（外部サイトへ）</a>
  もし target="_blank" を使用する場合は、新しいタブで開かれることを明示するアイコンや注釈とセットで使用することが、アクセシビリティとユーザビリティの観点から強く推奨されます。

リンクの種類によって開く方法を変える判断基準

一律に設定するのではなく、リンクの種類や性質に応じて開く方法を使い分けることが重要です。

• サイト内のリンク: 基本的に同じタブで開く（target="_self" または target 属性なし）。
• 外部サイトへのリンク: 原則として同じタブで開く（target="_self" または target 属性なし）。ユーザーが自分で新しいタブで開く選択肢を持つことを尊重する。
• 特定のファイル形式（PDF, 画像など）: target="_blank" を使用することを検討する場面としては考えられます。ユーザーは元のページを参照しながらファイルの内容を確認したい可能性があります。ただし、ここでも rel="noopener noreferrer" を忘れずに追加します。また、ファイルサイズが大きい場合は、ダウンロードであることを明記するなど配慮が必要です。
• フォームの送信結果: フォームを送信した後の確認画面や結果ページへの遷移は、通常同じタブで行われるべきです。
• 非常に重要な参照情報: 元のページでの作業を中断させたくないが、必ず参照してほしい情報へのリンクなど、限定的なケースで target="_blank" を検討する場合があります。しかし、ここでもユーザーへの明示とセキュリティ対策は必須です。

ユーザーに選択権を与えることの重要性

ウェブサイトのデザインや機能は、ユーザーがコントロールできる範囲を広く保つことが、良いユーザビリティとアクセシビリティにつながります。リンクの開き方も同様です。サイト側が一方的にリンクの開き方を決定するのではなく、ユーザーが自分のブラウジングスタイルに合わせて選択できる余地を残しておくことが理想的です。デフォルトの挙動（同じタブで開く）は、ユーザーがコントロールしやすい挙動と言えます。target="_blank" は、そのユーザーコントロールを奪う側面があることを理解しておく必要があります。

8. 実装方法の実際

target="_blank" や rel="noopener noreferrer" をウェブサイトに実装する方法はいくつかあります。

手動での記述

最も基本的な方法は、HTMLコードを直接編集し、<a>タグに target="_blank" rel="noopener noreferrer" 属性を追加することです。

html
<a href="https://example.com/external/" target="_blank" rel="noopener noreferrer">外部サイトへのリンク</a>
静的なHTMLサイトや、少数のリンクにだけ設定したい場合に適しています。しかし、サイト全体の外部リンクに適用するなど、数が多い場合には手間がかかります。

CMS（WordPressなど）での設定

多くのモダンなCMSには、リンク挿入時に「新しいタブで開く」というチェックボックスが用意されています。このチェックボックスにチェックを入れると、CMSが自動的に target="_blank" と rel="noopener noreferrer" を（通常は両方を）追加してくれます。

WordPressのブロックエディタ（Gutenberg）の場合:
1. テキストを選択し、リンクボタンをクリック。
2. URLを入力し、設定オプションの「新しいタブで開く」にチェックを入れる。
3. これにより、自動的に target="_blank" と rel="noopener noreferrer" がHTMLに追加されます。

古いCMSを使用している場合や、テーマ、プラグインによっては自動で rel 属性が付与されないこともあります。その場合は、手動でHTMLを編集するか、後述する他の方法を検討する必要があります。

JavaScriptによる動的な追加（非推奨または慎重な利用が必要）

サイト全体や特定の条件に合致するリンクに自動的に target="_blank" rel="noopener noreferrer" を追加したい場合に、JavaScriptを使用する方法も考えられます。例えば、サイト内のすべての外部リンクに対して動的に属性を追加する、といったことが可能です。

“`javascript
document.addEventListener(‘DOMContentLoaded’, function() {
// サイトのドメインを取得
var siteDomain = window.location.hostname;

// ページ内のすべてのタグを取得
var links = document.querySelectorAll(‘a’);

// href属性が存在し、メールリンクやアンカーリンク（#）ではない場合
if (href && href.indexOf('mailto:') === -1 && href.charAt(0) !== '#') {
  // リンク先のホスト名を取得
  var linkHostname = (new URL(href, window.location.href)).hostname;

  // リンク先がサイトのドメインと異なる場合（外部リンクと判断）
  if (linkHostname !== siteDomain) {
    // target="_blank" と rel="noopener noreferrer" を追加
    link.setAttribute('target', '_blank');
    // rel属性が既に存在する場合は追加、存在しない場合は新規設定
    var rel = link.getAttribute('rel') || '';
    if (rel.indexOf('noopener') === -1) {
      rel += (rel ? ' ' : '') + 'noopener';
    }
    if (rel.indexOf('noreferrer') === -1) {
      rel += (rel ? ' ' : '') + 'noreferrer';
    }
    link.setAttribute('rel', rel.trim());

    // 必要であれば、外部リンクアイコンを追加する処理などもここに記述
  }
}