HTMLのリンクを別タブで開く方法！aタグでのtarget”_blank”の使い方と注意点

結論：リンクを新しいタブで開くにはtarget=”_blank”を使用する

aタグで作られたリンクをクリックやタップした際に別タブで開けるようにするにはtarget="_blank"を使います。
これをWebページに記述すれば、リンクをクリックした際に現在のページはそのまま、リンク先が別タブで開かれます。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>

▼ 各属性の意味

• href：リンク先のURLを指定します。
• target="_blank"：新しいタブでリンク先を開くように指定します。
• rel="noopener noreferrer"：セキュリティ対策

セキュリティ対策：rel=”noopener noreferrer”の重要性

target="_blank"を使う際は、セキュリティ対策としてrel="noopener noreferrer"を必ず追加しましょう。
target="_blank"だけだと、リンク先のページがJavaScriptのwindow.openerを通じて元ページを操作できるため、フィッシングや改ざんのリスクがあります。
rel="noopener noreferrer"を設定したときの効果は以下の通りです。

• noopener：新しく開いたタブから、元のページをJavaScriptで操作されないよう（リンク先が元ページを参照できないよう）にできる
• noreferrer：リファラー（リンク元のURL）情報を相手に渡しません。古いブラウザにも対応できる

target=”_blank”のメリットとデメリット

メリット

• ユーザーが元のページに戻りやすい（離脱率の低下）
• 外部サイトやダウンロードリンクなど、元ページを維持したい場合に便利
• 読者の回遊性を高められる

デメリット

• タブが増えすぎてユーザーが混乱することがある
• 一部のブラウザや設定で別タブで開かない場合がある
• セキュリティリスク（window.opener問題）がある

SEOやユーザー体験への影響

SEOへの影響は？

target="_blank"自体は検索エンジンの評価に直接影響を与えることはありません。ただし、リンク構造が適切であることや、ユーザー体験を損なわない設計が求められます。

ユーザー体験への影響は？

外部リンクは新しいタブで開くことでユーザーの離脱を防ぎやすくなります。
内部リンクは同じタブで開いた方が自然である場合が多いため、使い分けが重要です。

使用すべきケースと控えるべきケース

いつ使うべき？

• 外部サイトへのリンク（例：参考資料、外部サービス）
• PDFや画像など、別ウィンドウでの閲覧が望ましいファイル
• 読者の滞在時間をできるだけ確保したい場合

いつ使わないべき？

• 同一サイト内のページ遷移（ユーザーが混乱する恐れあり）
• モバイルユーザーが多い場合（新しいタブが開きすぎて煩雑になる）

よくある質問とトラブル対策

まとめ

target="_blank" を使えば、ユーザーの利便性を高めつつ、ページからの離脱を防ぐことができます。ただし、セキュリティ面の配慮として rel="noopener noreferrer" を必ず併用することを忘れないようにしましょう。

▼HTMLの基本タグ一覧はこちらから

【初心者向け】HTMLの基本タグ一覧と使い方！コピペOKのサンプル付き