リンク先を別タブで安全に開く方法「target=”_blank”」

今回は、リンク先を別タブで開きたい時に設定する「target=”_blank”」の設定方法を紹介します。

「target=”_blank”」（ターゲットブランク）は新しいタブでリンク先を開く設定にしたい時に指定するHTMLタグです。

他のサイトへの外部リンク先に移動したときに、画面が切り替わり他のサイトが表示されてしまうと、あとから元のサイトに簡単に戻ってくることができません。
（ブラウザバックで戻れますが複数ページ移動後だと大変です。）

外部サイトのリンク場合、別タブで表示されていればリンク先のサイトでどれだけ移動したあとにタブを閉じても元のサイトは元のタブで残ったままです。

「target=”_blank”」でリンク先を別タブで安全に開く方法

リンクの開き方はいくつかありますが「target=”_blank”」を使って新しいタブを開いてリンク先を表示させる方法をWordPressの画面操作と合わせて解説します。

WordPressのクラシックエディタでの操作方法とブロックエディタでの操作方法を別で解説します。

まずはクラシックエディタでの操作手順です。

WordPressでリンク先を別タブで開く方法【クラシックエディタ版】

テキスト文字にリンクを設置させたときに別タグで開く設定方法。

テキスト文字でリンクを新しい別タブで開く設定

リンクしたいテキストを選択します。

テキストを選択したまま上部のメニューから「リンクの挿入/編集」ボタンをクリックします。

「URL」の入力画面が表示されましたらリンク先のURLを入力または貼り付けます。

URLを入力後に右側の「歯車マーク」をクリックします。

「リンクの挿入/編集」画面が表示されますので「リンクを新しいタブで開く」にチェックを入れて画面下の「リンク追加」をクリックします。

既にリンクされているテキストを編集する場合

既にテキストにリンクが設置されている状態の場合はリンクされたテキストを選択するとURLが表示されますので右側に表示された「えんぴつマーク」から編集することができます。

テキスト文字のリンクを別タブで開く方法は以上で完了です。

次はショートコードやボタンで新しいリンク先をの操作方法です。

ショートコードやボタンでリンクを別タブで開く設定

外部リンクへのボタンやサイト内リンクなどのシートコードを作成します。

※ショートコードでのボタンの設置はテーマによっても異なります。

ボタンを作成します。（下記画像はショートコードで作成したボタンのイメージです）

作成されたボタンを「テキストモード」で表示すると以下のように表示されてます。

ボタンに「URL」と「target="_blank" 」を追加します。

<div class="btn btn-center"><a class="btn__link btn__link-primary" href="/">リンクテキスト</a></div>

「href=””」の箇所にはリンク先のURLを入力します。

追加したURLの後に「target="_blank" 」を入力します。

リンク先の「URL」と「target="_blank" 」を入力すると以下のような表示になります。

<div class="btn btn-center"><a class="btn__link btn__link-primary" href="https://saku-lab.com/contact/" target=”_blank”>リンクテキスト</a></div>

ボタンをクリックしたときにリンク先が別タブで表示されるようになりました。

WordPressのテーマによって違いますがショートコードに最初から「target=」と表示されているコードもあります。

例えばこのような表示[[sitecard subtitle=関連記事 url= target=]]

その場合は「target=」の所に「"_blank"」を追加し「target="_blank" 」にします。

[[sitecard subtitle=関連記事 url= target=”_blank”]]

「 target=”_blank”」を安全に使用するために

target="_blank" は、リンク先のページが元のページを操作できる可能性があり、これを悪用されると、フィッシングなどの詐欺に利用されることがあります。

対策として、rel="noopener" を使うとでリスクを防ぐことができます。

外部リンクの際はrel="noopener" や rel="noreferrer"を「target="_blank" 」の後に設置しましょう。

noopenerとnoreferrerの違い

新しいタブで外部リンクの際はrel="noopener"

外部リンクで参照先に参照元のリンクを渡さないようにする際は rel="noreferrer"

例: <a href="https://saku-lab.com/" target="_blank" rel="noopener">リンク</a>

例: <a href="https://saku-lab.com/" target="_blank" rel="noreferrer">リンク</a>

最終的に先程のボタンの場合は以下のようになりました。

<div class="btn btn-center"><a class="btn__link btn__link-primary" href="https://saku-lab.com/contact/" target=”_blank” rel="noopener">リンクテキスト</a></div>

外部リンクを新しいページで表示させる場合は target="_blank" rel="noopener"をコードに追加すると覚えておきましょう！

今後WordPressテーマなどのアップデートでコードが自動で付くようになると思います！