リンクを別タブで開きがちな人へ…
それは過去の自分にも当てはまることです。
- あらゆるリンクを別タブで開く
- リンクに target="_blank" をつけがち
- それで問題ないと深く考えずに放置
こういった考えは問題を引き起こします。
リンクを別タブで開のがダメダメな理由、
それを私なりの解釈・考えで解説します。
目次
別タブで開くにはtarget="_blank"を付けるだけ
あなたが見ているページはHTMLで作られてます。
そしてリンクを別タブで開くとき、
このようなHTMLタグを使うことが多いですよね。
<a href="https://fukuro-press.com" target="_blank">クリックすると別タブで開きます</a>実際に別タブで開くリンクを用意しました。
ちょっとクリックしてみてください。
どうですか？ どう思いましたか？
その感想も、次で説明する内容に関わってきます。
理由１．別タブ target="_blank" には脆弱性がある
これは本当に現実的な理由です。
「別タブで開くこと自体に脆弱性があるから」
※ 脆弱性 = セキュリティ的にヤバいこと
読み手を思って別タブで開いたのに、、、
その親切心が仇になってしまうということです。
↓ 具体的には次のような脆弱性がある(引用)
target=”_blank”を利用してリンクをすると、自サイトのタブとは別の新規タブが開いてリンク先が表示されます。その際リンク先のサイトに悪意あるJavaScriptのコードが記述されていると、リンク元のサイト（つまり自サイト）のURLなどを不正に書き換えられてしまう可能性があります。
悪意ある第三者にURLを書き換えられた結果として何が起こるかというと、
別タブで開いたリンク先を閲覧し終わったユーザーが自サイトに戻ってくる
その時にはすでに自サイトとは別の、偽サイトなどに誘導されている
ユーザーは不正なページ上でID・パスワードの入力をさせられたり、個人情報を盗まれるなどの被害に遭うといった犯罪に至る可能性があります。
引用元 : https://webdesign-progress-diary.com/coding-design/html/target_blank-vulnerability/#toc1
つまりは犯罪の踏み台にされるってことです。
技術的な説明はしませんが、あなたのブログに悪意あるサイトを target="_blank" を付けて張り付けたとします。（あなたは悪意あるサイトだと気づいていない）
その悪サイトを読者が閉じてブログに戻ってきたとき、元のブログそっくりのサイトに書き換わって読者を騙すために利用されるってことです。
そうなったら最悪ですよね？
それが別タブで開くべきでない１つ目の理由
理由２．アドセンス収益に影響。全画面広告が出ない
２つめはもっと現実的でブロガー的な理由です。
「アドセンス収益に若干影響があるから」
アドセンスには全画面広告というのがあります。
↓ ページ遷移時に表示されるこういうの
※ 規約が分からないので一部モザイク
アドセンスの自動広告で全画面広告をオンにしておくと、ページ遷移時にバーーンと表示されます。スマホ・PCに関係なく表示可能。
ちなみに全画面広告は賛否が分かれてます。
↓ 賛否あるけど設置する価値アリかも
このブログでも書いてあるようにSEO上の影響はないし、アクティブビュー視認可能率も高いという。もし毛嫌いしてるなら検討の価値があるはずです！
ところが別タブでリンクを開く設定にしてると……
- リンククリック時に全画面広告が表示されない
- ブログカードクリック時にも表示されない
- 機会損失のせいで収益を逃してるかもしれない
これが別タブでひらく現実的なデメリットです。
なるべく同じタブで開いた方がいいと考えられます。
理由３．いちいち別タブが開くのは読者的にウザい
純粋にウザいです。
- 余計なタブを増やしたくない
- タブが増えるとメモリ消費も多くなる
- 心理的にも少しイラつかせるかも
読者側にもほぼメリットはないですね。
さっきの脆弱性の話もそうですが……
むしろデメリット・実害が多いなと感じます。
別タブで開くことが必要な場面はほとんどない
実際のところ、別タブはほぼ必要ありません。
- 内部リンクで別タブで開く
⇒ このケースはひたすら迷惑なだけ。読者は元のページに戻るために別タブを閉じるという余計なアクションをさせられてしまう - 外部リンクを別タブで開く
⇒ 場合によっては有用なケースもある。例えばリンク元ページと遷移先ページを交互に見てもらいたい場合だなど。それ以外は別タブのメリットなし
もちろん別タブが必要な場面もわずかにあります。
その場合でも脆弱性対策などはしとくべきです。
↓ 脆弱性対策をしたリンクのHTML例
<a href="https://fukuro-press.com" target="_blank" rel="noopener noreferrer">別タブで開きます</a>このように rel="noopener noreferrer" を付与するだけ
手打ちでリンク作成するなら、この書き方がベターです。
ベストなのは別タブで開かないことですね。
もし別タブで開くリンクなら分かりやすくしよう
最後にデザイン的なアドバイス
どうしても別タブでリンクを開きたいなら……
なるべく分かりやすい表示にするべきです。
↓ 参考 : 外部リンクにアイコン表示する手順（WP）
上記記事はWordPressのカスタマイズ例です。そこで解説したように、別タブで開く外部リンクには矢印アイコンを表示すると分かりやすいです。
こういった工夫をすると親切になります。
ブログ読者に不快感を与えません。
フク郎
最新記事 by フク郎 (全て見る)
- 最大5,000円報酬をもらうために、招待を受入れていただけませんか？ - 8月 27, 2024