HTML でリンクを別タブで開く方法【ただ、脆弱性については注意が必要です】

ブログなどで他のページを紹介したりする時に使う「リンク」ってあるけど、クリック後に別タブで表示させることってできるの？

そんな疑問にお答えします。

この記事で分かること

リンクをクリックした時にそのままのタブで表示させるより、別タブで表示させてあげる方が親切な感じがしますよね。

右クリックする必要がなくなるから手間が１つ省けるけど、別タブを立ち上げるようにする時には注意点が１つあるんです。

ということで、リンクを別のタブで表示させる方法、そしてどのような注意が必要なのかを解説します。

リンク先を別タブで表示させる方法を解説

リンクを指定する時は、HTML で記述するとこのようになりますよね。

このシンプルな状態なら、リンクをクリックしてもらうとそのタブのままリンク先へ移動してしまいます。

そこで、target 属性と呼ばれるものを使ってあげると、リンクをクリックしただけで別タブが立ち上がった状態でリンク先のページが表示されるようになります。

その target 属性に、_blank を指定してあげると、別タブで開くようになります。

その状態を HTML で記述してみると、このような形になります。

右クリックする必要もないし、戻るときにスマホでもタブを消すだけで済むから便利だね。

でもね、これだけだと迷惑をかける可能性があるので注意が必要なんです。

最近、WordPress などでは自動的に付け加えられるようにはなってきてはいますけど、target=”_blank” を使った時には以下のものが付くようになっています。

rel=”noopener noreferrer”

実は target=”_blank” だけを表記した場合、リンク元が悪意があるサイトだった場合はフィッシング被害などにあう可能性があるんです。

というのも、target=”_blank” はリンク元がリンクを操作することができてしまうからなんです。

どういうことかと言うと、

サイト運営者「A」

なかなか良いサイトだから、このリンクを紹介しておこう！

と、リンクをブログに表示させます。

サイト利用者

人気ブロガー「A」さんが紹介しているリンクだから、ちょっと見てみよう。

とリンクをクリック。

そして、リンク先を閲覧をして「A」さんのページに戻ろうとすると…

あれ！？このページを開いてたんだっけ？でも、再ログインしてくださいって書いてあるから、ひとまず再ログインしておこうっと。

すると、数日後。

なんか、「A」さんのページで記事を読んでたら、ログイン情報などが漏れていたんですけど！どういうことですか、A さん！

ええぇ〜っ！僕は、何もしていないですよ…

と、いうことになり兼ねないんです。

一体何が起きたのかというと、「A」さんが紹介したリンクが操作されていたことで、ページを戻ると偽りのサイトを表示させることができてしまうんです。

もしこれが、いつも使っている Amazon そっくりのページだったりすると、「あれ？なんか勝手にログアウトになってる〜」くらいにしか思わないかもしれませんからね。

これは、「A」さんがリンク元でそのような操作が行われていることを知らなくても、ユーザーに迷惑をかけてしまう可能性が潜んでいるというわけです。

それを防ぐのが、rel=”noopener noreferrer” になります。

そのため、別タブを開くようにする時には下記のように HTML を記述する必要があります。

もっと細かい仕様については理解する必要がないと思ったので、なるべく簡単に解説しました。

ひとまず、target=”_blank” だけではヤバいというお話をしておきたかったんです。

WordPress では自動になっているんですけど、その他のブログサービスなどでは対応されていないものもあるので、実はちょっと危険なんです。

出来るだけ読者が安心して記事を読んでもらえるように、「リンク」を最適化しておきたいですね。