閉じる

HTMLでリンクを別タブで開く方法！target=”_blank”の正しい書き方と注意点を解説

広告

Webサイトを閲覧している際、リンクをクリックした瞬間に新しいタブが立ち上がり、元のページを残したまま目的のサイトが表示されることがあります。

この「リンクを別タブで開く」という挙動は、HTMLの<a>タグに特定の属性を書き加えるだけで簡単に実現できます。

しかし、制作者側が良かれと思って設定した「別タブ表示」が、時としてユーザーの利便性を損なったり、セキュリティ上のリスクを招いたりすることをご存知でしょうか。

本記事では、HTMLでリンクを別タブで開くための正しい書き方はもちろん、アクセシビリティやセキュリティを考慮した最新の実装ルールについて詳しく解説します。

2026年現在のWeb標準に合わせた最適なコーディング手法を身につけ、ユーザーにとって心地よいWebサイト制作を目指しましょう。

目次 [ close ]
  1. HTMLでリンクを別タブで開くための基本属性
    1. target="_blank"属性の使い方
  2. 別タブで開く際のセキュリティとパフォーマンスの注意点
    1. rel="noopener"とrel="noreferrer"の役割
    2. モダンブラウザでの暗黙的な挙動
  3. ユーザーアクセシビリティを考慮した設計
    1. 「別タブで開く」ことをユーザーに伝える方法
    2. スクリーンリーダーへの配慮
  4. target属性のその他の値と使い分け
    1. target="_self"：同じフレームで開く
    2. target="_parent"とtarget="_top"
  5. Web制作における実務的な判断基準
    1. 別タブで開くべきケース
    2. 同じタブで開くべきケース
  6. JavaScriptで別タブを開く方法
  7. SEOへの影響について
  8. まとめ

HTMLでリンクを別タブで開くための基本属性

HTMLでハイパーリンクを作成する際には<a>タグを使用しますが、デフォルトの挙動では同じタブ（同じウィンドウ）でリンク先が開かれます。

この挙動を変更し、別のウィンドウや新しいタブでリンク先を表示させるために使用するのがtarget属性です。

target=”_blank”属性の使い方

最も一般的で広く使われている方法が、target属性の値に"_blank"を指定する手法です。

具体的な記述方法は、以下のコード例のようになります。

HTML
<!-- 基本的な別タブでのリンク作成 -->
<a href="https://example.com" target="_blank">外部サイトを別タブで開く</a>

この記述を行うことで、ブラウザはリンクをクリックした際に新しい閲覧コンテキスト（通常は新しいタブ）を生成してページを表示します。

属性値の先頭にあるアンダースコア（_）を忘れると、特定の名前を持つウィンドウとして解釈されてしまうため、必ず「_blank」と正確に記述する必要があります。

別タブで開く際のセキュリティとパフォーマンスの注意点

かつてのWeb制作において、target="_blank"の使用には重大なセキュリティリスクが伴うことが知られていました。

それは、リンク先のページからリンク元のページを操作できてしまう「タブナビング（Tabnabbing）」と呼ばれる攻撃手法です。

rel=”noopener”とrel=”noreferrer”の役割

リンクを別タブで開くと、新しく開いたページ側でJavaScriptのwindow.openerというオブジェクトが利用可能になります。

これを利用されると、リンク元のページのURLを勝手に書き換えて、フィッシングサイトなどへ誘導される危険性がありました。

このリスクを回避するために導入されたのが、rel="noopener"という属性です。

rel="noopener"を付与することで、新しいページからのwindow.openerへのアクセスを遮断し、セキュリティを向上させることができます。

また、rel="noreferrer"を指定すると、リンク元の情報を参照元（リファラー）として送信しないよう設定でき、プライバシーの保護に繋がります。

HTML
<!-- セキュリティを考慮した推奨される書き方 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全に別タブで開く</a>

モダンブラウザでの暗黙的な挙動

現在の主要なブラウザ（Chrome、Edge、Safari、Firefoxなど）では、target="_blank"が指定されている場合、暗黙的に「rel=”noopener”」が適用されるようになっています。

そのため、以前ほど神経質に手動で記述しなくても最低限の安全性は保たれるようになりました。

しかし、古いブラウザへの対応や、ソースコードの明示的な意図を示すという意味でも、rel=”noopener”を明記しておくことが依然として推奨されます。

また、パフォーマンスの面でもnoopenerは有効であり、別タブのページが重い処理を行っていても、リンク元のページの動作に影響を与えにくくする効果があります。

ユーザーアクセシビリティを考慮した設計

技術的に「できる」ことと、ユーザーにとって「使いやすい」ことは必ずしも一致しません。

特に「リンクを勝手に別タブで開く」という行為は、アクセシビリティの観点から慎重に判断する必要があります。

「別タブで開く」ことをユーザーに伝える方法

ユーザーは、リンクをクリックした際に「現在のページが切り替わる」ことを期待している場合が多いです。

予期せず新しいタブが開くと、ブラウザの「戻る」ボタンが使えなくなり、混乱を招く原因となります。

そのため、別タブで開くリンクには、視覚的なアイコンやテキストによる注釈を付けることが望ましいです。

HTML
<!-- テキストで注釈を入れる例 -->
<a href="https://example.com" target="_blank" rel="noopener">利用規約（新しいタブで開きます）</a>

<!-- アイコンを使用する例（CSSで調整） -->
<a href="https://example.com" target="_blank" rel="noopener" class="external-link">公式サイトへ</a>

このように記述することで、ユーザーはクリックする前に挙動を予測でき、スムーズなブラウジング体験を提供できます。

スクリーンリーダーへの配慮

視覚障害者が利用するスクリーンリーダーなどの音声読み上げソフトでは、新しいタブが開いたことに気づきにくいという問題があります。

この問題を解決するためには、aria-label属性を活用して、音声でも別タブで開く旨を伝える工夫が必要です。

HTML
<!-- スクリーンリーダー向けの配慮 -->
<a href="pdf-file.pdf" target="_blank" rel="noopener" aria-label="PDF資料を新しいタブで開く">資料をダウンロード</a>

aria-labelを使用することで、画面上のテキストは「資料をダウンロード」のままでも、読み上げ時にはより詳細な情報を伝えることができます。

target属性のその他の値と使い分け

target属性には、_blank以外にもいくつかの特殊な値が存在します。

これらを理解しておくことで、iframe（インラインフレーム）を使用したサイト構成など、より複雑なレイアウトにも対応できるようになります。

属性値挙動の解説
_selfデフォルトの設定です。現在のタブまたはフレーム内でリンクを開きます。
_parent親フレーム内でリンクを開きます。フレームを使用していない場合は _self と同じです。
_topすべてのフレームを解除し、ウィンドウ全体でリンクを開きます。
任意の名前指定した名前のウィンドウやフレーム内で開きます。存在しない場合は新しく作成されます。

target=”_self”：同じフレームで開く

明示的に現在のページで開きたい場合に指定しますが、何も書かない場合と同じ挙動になります。

サイト全体の基本設定として、<base target="_blank">をhead内に記述している場合など、個別に挙動を上書きする際に使用されることが多いです。

target=”_parent”とtarget=”_top”

これらは主に<iframe>内でリンクをクリックした際に、iframeの外側のページを遷移させるために使われます。

例えば、ページの一部に埋め込んだ小さなウィンドウ内のリンクから、親ページ全体を切り替えたい場合に_topを指定します。

現代のWeb制作ではiframeの使用頻度が減っていますが、ウィジェットや広告などの埋め込みコンテンツでは依然として重要な役割を果たします。

Web制作における実務的な判断基準

全ての外部リンクを一律で別タブにするべきか、それとも同じタブにするべきかは、Web制作者の間でも意見が分かれるポイントです。

一般的には、以下の基準で使い分けるのが合理的とされています。

別タブで開くべきケース

最も推奨されるのは、「現在の作業や閲覧を中断させたくない場合」です。

  • フォームの入力画面で、ヘルプページや利用規約を確認させるためのリンク
  • PDFファイルや画像ファイルなど、ブラウザの機能で直接表示されるメディアファイル
  • 音声や動画を再生中のページから、補足情報を参照させる場合
  • 自分のサイトから完全に離脱する「外部ドメインへのリンク」

これらのケースでは、元のページに戻る手間を省くために別タブでの表示が有効に機能します。

同じタブで開くべきケース

一方で、「サイト内の回遊」においては同じタブで開くのが基本です。

  • トップページから詳細ページへの移動
  • 同じドメイン内のカテゴリー一覧への遷移
  • パンくずリストのリンク

同一サイト内で何度も新しいタブが開いてしまうと、ブラウザのタブが溢れかえり、ユーザーに管理の負担を強いることになります。

特別な理由がない限り、サイト内の移動は「_self（デフォルト）」を選択しましょう。

JavaScriptで別タブを開く方法

HTMLの属性だけでなく、ボタンクリックなどのイベントに合わせてJavaScriptで新しいタブを開きたい場面もあります。

その場合は、window.open()メソッドを使用します。

JavaScript
// JavaScriptで別タブを開く例
function openInNewTab(url) {
    // 第2引数に '_blank' を指定する
    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
    
    // ウィンドウが正常に開けたか確認
    if (newWindow) {
        newWindow.focus();
    }
}

JavaScriptを使用する場合でも、第3引数に'noopener,noreferrer'を指定することで、HTMLと同様のセキュリティ対策を施すことができます。

ただし、ユーザーの操作（クリックなど）を伴わないタイミングで自動的にウィンドウを開こうとすると、ブラウザのポップアップブロックに阻害される可能性があるため注意が必要です。

SEOへの影響について

「別タブで開く設定にするとSEO（検索エンジン最適化）に悪影響があるのではないか」という不安を抱く方もいるかもしれません。

結論から言えば、target="_blank"の使用自体が直接的に検索順位を下げることはありません。

Googleなどの検索エンジンは、ユーザーにとって最適な体験が提供されているかどうかを重視します。

適切に使い分けられ、セキュリティ対策（noopener）が施されていれば、SEO上のペナルティを心配する必要はないでしょう。

むしろ、外部リンクを別タブにすることで「サイトの滞在時間」が維持されるという副次的なメリットが期待できる場合もあります。

しかし、過剰な別タブ設定はユーザーの直帰率を高める懸念もあるため、あくまで「ユーザーの利便性」を最優先に設計することが重要です。

まとめ

HTMLでリンクを別タブで開く方法は非常にシンプルですが、その裏側にはセキュリティやアクセシビリティに関する重要なルールが隠されています。

基本となるtarget="_blank"に、安全性を高めるrel="noopener"を組み合わせる書き方は、現代のWeb制作におけるスタンダードです。

また、技術的な実装だけでなく「なぜ別タブで開くのか」というUX（ユーザーエクスペリエンス）の観点から判断する習慣をつけましょう。

新しいタブで開く際には、アイコンやテキストを使ってユーザーにその挙動を事前に知らせることが、親切な設計の第一歩となります。

本記事で紹介した内容を参考に、安全で使いやすいリンク実装を日々のコーディングに取り入れてみてください。

URLをコピーしました！