ブログ

リンクを別タブで開かせる2つの方法!正しい方法を知らないと危険?

WordPressでブログを書いてるんだけど、リンクを別タブで開くのってどうやるんだろう?

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

【本記事の内容】

  • リンクを別タブで開くようにする理由
  • ページのリンクを別タブで開くようにする2つの方法
  • リンクを別タブで開く時に気をつけること
WordPressを始めたばかりのときは僕も「ベツタブデヒラク?」みたいなレベルでしたw
やり方さえ覚えれば簡単なので、確認してみてね!

それでは早速スタートしましょう。

リンクを別タブで開く理由

理由なんていいから方法を教えろください!

おそらくこのような方はリンクを別タブで開く明確な理由があると思うので、次の見出しまでスクロールしていただいても大丈夫です!

別タブで開く明確な理由が無いという方は、ぜひここも読んであげてください!

簡単に言うと、リンクを別タブで開く理由は自分のブログやWEBサイトから読者さんを逃さないようにするためです!

「リンクを別タブで開かない=リンクをクリックしたら自分のページが閉じられてしまう」ということです。
自分のブログの他のページに飛ばす場合にはそれでもいいのですが、自分のブログ以外のページ(外部リンク)のリンクを別タブで開かないと、自分のブログに戻ってきてくれない読者さんが多いです。

ネットサーフィンしていて次のページに行ったら、よほど気になるページでなければ戻らないよね!

別タブで開けば、リンク元の自分のページのタブは閉じずに残るので、外部リンクで開いたページを読み終わった後、戻ってきてくれる可能性が高くなります。

リンクを別タブで開くようにする2つの方法

WordPressでリンク先を別タブで開くようにする方法は2つあるよ!
どちらも画像を使って説明していくね!

ビジュアルエディタでリンクを別タブで開くようにする方法

初心者さんの多くはビジュアルエディタを使ってブログを更新していると思います。
僕も5年間ぐらいWordPressを使って記事を書いているのですが、つい最近までビジュアルエディタを使ってました!

ちなみに、ビジュアルエディタはWordPressの記事編集画面の「ビジュアル」のタブを選択したときの編集画面!

WordPressのビジュアルエディタの編集画面

では、ビジュアルエディタで別タブで開くリンクを設置していきます!

まず、リンクの挿入/編集をクリックすると、リンクを入力するところが出てきます。
その右にある歯車ボタンをクリックします。

画像タイトル

そうするとリンクの設定の画面が表示されるので、
①【URL】にリンク先を入力
②【リンク文字列】にリンクを入れたい文字を入力
③リンクを新しいタブで開くにチェックを入れる
④リンクを追加をクリック
の順番に進んでいきます。

WordPressのビジュアルエディタで別タブで開くリンクを設置する方法

これで、リンク先を別タブで開くことができるリンクを入れることができました!

別タブで開くリンクが設置できた画像

テキストエディタ

次にテキストエディタで別タブを開くリンクを設置していきます!

テキストエディタは右上の「テキスト」のタブを開いたこんな編集画面です。

WordPressのテキストエディタを開いた画像

テキストエディタにはHTMLタグをそのまま入力していくので、
リンクを入れる場合は

<a href=”リンク先URL“>リンクを入れたい文字</a>

と入力します。

そして、リンク先を別タブで開く場合は「target=”_blank”」という内容を付け足してあげます!

<a href=”リンク先URLtarget=”_blank”>リンクを入れたい文字</a>

上記タグの【リンク先URL】にリンク先に指定したいURL、【リンクを入れたい文字】にリンクを入れたい文字を入力すればOK!

WordPressのテキストエディタで別タブで開くリンクを設置する方法

これで別タブで開くリンクを設置することができました。
実際にビジュアルにして確かめてみると、ビジュアルエディタでリンクを設置した状態と一緒になっています。

WordPressでのビジュアルエディタでのリンクの表示

リンクを別タブで開くときに気をつけること

実はリンクを別タブで開くときに気をつけなければならないことがあるよ!

先程説明したリンク先を別タブで開く時に使うタグ「target=”_blank”」には使う時に注意が必要なことがあります。
「target=”_blank”」を使って外部リンクを開く可能性がある人は、必ず知っておいてください。

target=”_blank”を使う危険性

上で紹介したページの内容を参考に、簡単にtarget=”_blank”を使うときの注意点をお話していきます。

セキュリティーの脆弱性

「target=”_blank”」を使ってリンクを飛ばすと、リンク先のページ所有者が悪いことをしようと考えたら、リンク元である自分のブログのページが勝手にいじられる可能性があるようです。

基本的にリンクを送る先の人に悪意なんてないことの方が多いですが、100%大丈夫とは言えません。

パフォーマンスが下がる可能性

「target=”_blank”」を使って開いたリンク先のページの負荷が大きい場合、自分のページのパフォーマンスに影響を与える可能性があるらしいです。

この辺は僕は詳しくないので良くわからないのですが、対策しておくことに越したことは無さそうですね!

target=”_blank”を使うときにするべきこと

「target=”_blank”」は

  • セキュリティーの脆弱性
  • パフォーマンスが下がる可能性

上の2点の危険性があるというお話しをしました。

分かったところでどうすりゃいいんだ?

と疑問に思っているところでしょう。笑

もちろんどうしたらいいかもちゃんと説明しますよ!

rel=”nopener”を使う

rel=”nopener”を使うことによって先程のセキュリティーの脆弱性、パフォーマンスの低下の2つを無くすことができます。

リンク先から勝手にページに編集を加えることはできなくなりますし、ページ先の負荷が大きくても、リンク元と自分のページには影響しなくなります。

rel=”nopener”の使い方としては

<a href=”リンク先URL” target=”_blank” rel=”noopener”>リンクを入れたい文字</a>

と言った感じです!

「target=”_blank”」を使うときにはセットで「rel=”nopener”」を入れておくようにしましょう!

ビジュアルエディタでrel=”nopener”を設定するには?

ビジュアルエディタだと、rel=”nopener”なんて入れるところないじゃないか!

となったブログ初心者さん!
安心してください!

WordPressのビジュアルエディタでリンクを別タブで開くように設定をすると、自動でrel=”nopener”が入ります!

ですから、ビジュアルエディタで別タブで開くリンクを設置する場合、「rel=”nopener”」に関しては特に気にする必要がないということです!

まとめ

WordPressでリンクを別タブで開くように設定する方法をお話しさせていただきました!

ブログを運営していると、読者さんに別タブでリンクを開かせたいことも多々あると思うので、ぜひ覚えよう!