ホームページのリンクをクリックした際に、新しいタブで画面を開く設定がtarget=”_blank”です。外部サイトへ誘導する場面で広く使われている一方、セキュリティ上のリスクや利用者の閲覧の妨げになる側面もあります。
この記事では、target=”_blank”の基本的な意味から使い方、注意点まで解説します。
target=”_blank”とは
target=”_blank”とは、HTMLのaタグに記述する属性のひとつで、リンクをクリックした際に現在のページを閉じずに新しいタブで開くよう指定するコードです。通常はリンクをクリックすると閲覧中のページが切り替わりますが、target=”_blank”を設定することで元のページを残したまま別ページを表示できます。
外部サイトへの参考リンクや資料の参照など、ページを離れさせたくない場面で広く活用されており、ホームページ制作において頻繁に使われる設定のひとつです。記述方法はシンプルで、aタグの中にtarget=”_blank”と書き加えるだけで機能します。
利便性が高い反面、セキュリティ上の注意点もあるため、正しい知識を持ったうえで活用することが重要です。
target=”_blank”の記述方法
target=”_blank”の記述方法はシンプルで、HTMLのaタグ内にtarget=”_blank”を追加するだけです。
<a href="https://example.com/" target="_blank">リンクテキスト</a>
上記のように記述することで、リンクをクリックした際に新しいタブでページが開くようになります。href属性にリンク先のURLを、target=”_blank”でタブの開き方を指定する構造です。
ただし、target=”_blank”を単独で使用するとセキュリティ上のリスクが生じるため、実際の運用では後述するrel属性を併記することが推奨されています。
WordPressを使用している場合は、リンク設定の画面で「新しいタブで開く」にチェックを入れるだけで自動的に記述されるため、HTMLを直接編集する必要はありません。
target=”_blank”のメリット
target=”_blank”を適切に活用することで、ホームページを訪れた人にとっての利便性が大きく向上します。ここでは主なメリットを紹介します。
元のページを開いたまま情報を補足できる
ページを読み進める中で用語の解説や参考資料を確認してほしい場面では、同じタブで遷移させてしまうと元のページに戻る手間が生じます。
target=”_blank”で別タブを開く設定にすれば、必要な情報を確認した後にそのまま元のページの続きを読み進められます。読者の集中を途切れさせることなく、スムーズに情報を補足できる点が大きなメリットです。
毎回ブラウザの戻るボタンを押す必要がなくなるため、ストレスなく情報収集を続けられる環境を整えられます。
別画面で情報を並べて比較できる
複数のページを見比べたい場面で効果的です。
たとえば、自社商品のページを開いたまま競合他社の商品スペックや料金プランを別タブで確認すれば、タブを切り替えるだけで内容を比較できます。target=”_blank”を活用することで、同じタブで行き来する手間がなくなり、情報収集や比較検討をスムーズに進められます。
一方のページを閉じることなく複数の情報を確認できるため、判断や作業の効率が上がりやすくなります。
ホームページからの離脱を防げる
外部サイトへのリンクを同じタブで開くと、そのまま自社サイトに戻ってこない可能性が高まります。
target=”_blank”で別タブに誘導すれば、リンク先を閲覧し終えた後もブラウザ上に元のページが残るため、再びサイト内を回遊してもらいやすくなります。
タブを切り替えるだけで元の情報にすぐアクセスできる状態を維持できるため、外部リンクを設置しながらも自社サイトへの滞在時間が確保しやすくなります。
target=”_blank”の使い方
target=”_blank”は記述方法自体はシンプルですが、利用者の安全と利便性を守るためにいくつかの点を押さえたうえで活用することが重要です。ここでは、target=”_blank”の使い方を紹介します。
セキュリティ対策のコードを追加する
セキュリティリスクへの対策として、target=”_blank”にはrel=”noopener noreferrer”を必ず併記します。
rel=”noopener”は新しく開いたページから元のページを書き換えられないようにする役割を持ち、rel=”noreferrer”はどのページから移動してきたかという情報をリンク先に伝えない役割を担います。
実際の記述は以下の通りです。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイトへ</a>
なお、WordPressでは「新しいタブで開く」を設定すると、これらの属性が自動的に付与されるため、HTMLを直接編集する必要はありません。
別タブで開くことを視覚的に伝える
リンクをクリックした際に別タブで開くことを事前に伝えないと、利用者が意図しない画面遷移に戸惑う場合があります。
外部リンクアイコンを配置することで、クリック前に挙動を予測できるようになるため、利用者のストレスを軽減できます。アイコンはシンプルな見た目でありながら、別タブで開くことを直感的に伝えられる有効な手段です。
target=”_blank”を設定する際は、デザインや目的に合わせたアイコンの配置をあわせて検討することが、使い勝手の良いホームページづくりにつながります。
外部サイトへのリンクのみに活用する
target=”_blank”は、自社サイト外のページへ誘導する外部リンクに限定して使用することが基本です。
サイト内の移動に別タブを使うと、ブラウザの戻るボタンが機能しなくなるなど利用者にとって不便が生じます。外部ページを別タブで開く設定にすれば、リンク先を確認した後も元のページがブラウザに残るため、自社サイトへスムーズに戻ってもらいやすくなります。
内部リンクは同じタブで移動させ、外部リンクのみ別タブで開くというルールを統一することで、利用者が迷わず自然に操作できる導線を整えられます。
target=”_blank”の注意点
target=”_blank”は便利な設定である一方、利用者の閲覧環境や安全性に影響を与える側面もあります。ここでは、target=”_blank”を使う際に押さえておくべき注意点を紹介します。
ブラウザの戻るボタンが機能しなくなる
target=”_blank”で別タブを開いた場合、新しく生成されたタブには移動前の履歴が引き継がれないため、ブラウザの戻るボタンが機能しません。通常、同じタブでページを移動した際は戻るボタンで前の画面に戻れますが、別タブで開いた場合はこの操作ができなくなります。
利用者が使い慣れたブラウザ操作を制限することになるため、target=”_blank”を設定する場所は外部リンクに限定するなど、使いどころを意識することが重要です。
スマホでは元のページに戻る手間が増える
パソコンでは複数のタブが画面上部に並んで表示されるため、タブの切り替えは比較的スムーズです。
一方、スマートフォンでは別タブで開くと元のページが背後に隠れてしまい、戻るためにタブ一覧を呼び出して切り替えるといった追加の操作が必要になります。戻るボタンによる直感的な移動ができないため、モバイルユーザーにとって大きなストレスになりかねません。
スマートフォンからのアクセスが多いホームページでは特に注意が必要です。
セキュリティリスクを伴う
target=”_blank”を単独で使用すると、リンク先のページから元のページをwindow.openerという仕組みを通じて不正に操作される脆弱性が生じます。
悪意のあるホームページにリンクを貼っていた場合、利用者が新しいタブを閲覧している間に元のページのURLをフィッシングサイトに書き換えられる危険があります。利用者が元のタブに戻った際には偽サイトが表示されているため、個人情報の入力を促されるといった深刻なトラブルに発展するケースもあります。
運営側に悪意がなくても利用者をトラブルに巻き込む可能性があるため、target=”_blank”を使う際はセキュリティ対策を必ず講じる必要があります。
動作速度の低下を招く恐れがある
target=”_blank”でリンクを開くと、利用者の閲覧環境によっては元のページとリンク先のページが同じブラウザのプロセスを共有して動作する場合があります。
リンク先のページで負荷の高い処理が実行されていると、その影響を受けて元のページの動作が重くなる可能性があります。
rel=”noopener”を併記することでプロセスを分離できるため、セキュリティ対策と合わせてパフォーマンスの低下も防ぐことができます。
target=_blankに関するよくある質問
target=”_blank”の設定にあたって、多くの方が疑問に感じやすい点をまとめました。ここでは、target=”_blank”に関するよくある質問を紹介します。
SEOに影響はありますか？
target=”_blank”の設定が検索順位に影響することはありません。
リンクの開き方によってSEO評価が加点・減点される仕組みではないためです。一方で、外部リンクを別タブで開くことで利用者が自社サイトに戻りやすくなり、滞在時間の確保や離脱率の改善につながります。
こうした利用者の行動改善が積み重なることで、結果として検索順位の向上を後押しする要因になる可能性はあります。
内部リンクで使用しても問題ありませんか？
同じサイト内への内部リンクには、原則として使用しないことが望ましいです。
内部リンクをtarget=”_blank”で開くとブラウザの戻るボタンが機能しなくなり、利用者に不便を強いることになります。
ただし、入力フォームの途中で別ページを参照させる場合や、PDFファイルを開く場合など、元の画面を残しておく必要がある場面では例外的に使用することがあります。
セキュリティ対策のコードを記述せずに運用しても大丈夫ですか？
セキュリティ対策のコードは省略せず記述すべきです。
rel=”noopener noreferrer”を併記しないまま運用すると、リンク先のページから元のページを不正操作されるリスクが残ります。悪意のある第三者にフィッシングサイトへの誘導に悪用される可能性があり、利用者を深刻なトラブルに巻き込みかねません。
WordPressであれば自動的に付与されますが、HTMLを直接編集している場合は必ず記述されているか確認する習慣をつけましょう。
まとめ
target=”_blank”は、外部リンクを別タブで開くことで利用者の利便性を高める効果的な設定です。
元のページを残したまま情報を補足できる点や、自社サイトからの離脱を防げる点など、ホームページにおいて役立つ場面が多くあります。一方で、セキュリティリスクへの対策としてrel=”noopener noreferrer”を必ず併記すること、内部リンクへの使用は避けることなど、正しい運用ルールを守ることが重要です。
使いどころと注意点を押さえたうえで活用することが、利用者にとって使いやすいホームページづくりにつながります。
