ブログの書き方

【HTML】リンクを別タブで開く設定方法【脆弱性の対処法付き】

ブログでは、HTMLに記述してリンクを別タブで表示させることにより、自分のサイトを残したまま、参考ページの内容を読んで貰えます。

悩む人
悩む人
リンクを別タブで表示させる方法を知りたいけど、セキュリティ的には安全なの?あと、簡単にできるようにコピペできるコードもつけて欲しい。

本記事では、上記の疑問を解決します。僕自身も、運営するサイトの多くでリンクの別タブ表示を行っています。

別タブ表示は凄く便利です。自分のサイトを残したまま参考ページを開けるため、読者の離脱率が低下します。ただし、脆弱性の問題があるため注意が必要ですが、WordPressでは問題ありません。

上記を深堀りします。
本記事では、すぐに使えるHTMLの挿入方法を画像つきでご紹介します。

コピペで簡単に使えるコードも貼り付けておくので、必要な情報だけ簡単にチェックしてくださいね。(コピペだけしたい方はリンクをクリックしてください)

本記事の内容

上記の3本立てです。
ブログを始めた方でリンクの表示について知りたい方は、必見です。

早速、みていきましょう。

本記事の信頼性

本記事の信頼性

本記事を書いている僕は、ブログ歴2年です。最大月間10万PVの資格サイトを運営しており、Webライターとしても案件を100件以上受注しています。

【HTML】リンクを別タブで開く設定方法

【HTML】リンクを別タブで開く設定方法

リンクを別タブで開く設定方法は、2つ手順があります。

慣れるとすぐにできます。
サクッとみていきましょう。

リンク挿入用のHTMLを記載

まずは、HTMLでリンクを作成する際のコードを記述します。
以下のコードです。

<a href="ここにリンク先のURL">ここに表示名</a>

 

上記のとおりです。
このコードを土台にして、追記のコードを記述していきます。

上記をブログで表示した場合

今の段階をブログで表示するとこんな感じです。

現在の状態

※タイトルをクリックすると開きます。

この記事のURLに設定しているので、クリックしてみてください。次に、別タブに表示させるコードを追記しましょう。

target=”_blank”を追記する

続いて、先ほどのコードに追記の記述を行います。リンクには“target”属性を追記することで表示方法を変更できます。

別タブ表示の時は、target=”_blank”を追記すればOKです。

<a href="ここにリンク先のURL" target="_blank" rel="noopener noreferrer">ここに表示名</a>

 

上記で追記は完了です。

rel=”noopener noreferrer”は、脆弱性対策で必須です。後で解説するので、ここでは必要なことだけ把握してください。

上記をブログで表示した場合

実際にブログに挿入するとこんな感じです。

実際のブログ挿入時

この記事が別タブで開けばOKです。

【補足】ブログ執筆時に追記する場合

実際にブログで執筆する際は、コードを記入するほかに「ctl+K」であったり、執筆ツールからリンクを挿入することもありますよね。

そういった際は、テキスト画面から追記するだけでOKです。

投稿編集ページのテキスト画面を開く

投稿編集ページのテキスト画面を開く

開いたら該当するリンクを探します。リンクを見つけ次第、URLの後に追記を施して完了です。ただし、最近のアップデートで、WordPressでの執筆時に別タブ表示で挿入の選択をすると自動で脆弱性対策が行われるようになりました。

投稿前の確認時に脆弱性の知識を役立ててください。

該当リンクの後に追記を施す

該当リンクの後に追記を施す

※帯部分に追記

追記後URL

※タイトルをクリックすると開きます。

別タブ表示の脆弱性と対処法について

別タブ表示の脆弱性と対処法について

ブログに便利な別タブ表示ですが、1つ問題があります。それが脆弱性の問題です。

先ほど紹介した「rel=”noopener noreferrer”」を追記することで解決しますが、ここではどういった問題が発生するのかみていきましょう。

別タブ表示の脆弱性

脆弱性についてですが、Googleが次のように述べています。

target=”_brank”にはセキュリティ上の脆弱性もあります。リンク先のページでは window.openerを使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location=newURLによって親ページの URL を変更したりできます。

上記のとおりです。「それで?」って感じですが、これらはフィッシング詐欺に使われる可能性を示しています。

新規タブが表示⇒元タブがフィッシングサイトに切り替わる⇒閲覧後元タブに戻ってきた読者がログインを行う⇒情報が盗まれる

こういったリスクが発生します。

「https://」が「http://」などになってたりしたら要注意なのですが、通常のネット検索でこれに気付くのは困難です。

脆弱性の対処法

ただし、脆弱性の対処法は凄く簡単です。グーグルのエンジニアをしている方が次のようなツイートをしています。

簡単に要約するとこんな感じです。

外部サイトへのリンクにrel=”noopener noreferrer”を追記することで、パフォーマンスとセキュリティの2つの観点が向上します。

target=”_blank”の後ろに追記するのはこのためです。セキュリティを向上させるために、追記を忘れないようにしましょう。

コピペで簡単に使えるHTMLコード一覧表

コピペで簡単に使えるHTMLコード一覧表

HTMLコードでは、“target”要素を使ってリンクの表示方法を変更できます。コピペできるコード一覧表をまとめておきますね。

別タブで表示させる

今回の記事で紹介した別タブで表示させるコードです。
コードをコピーして使用してください。

<a href="ここにリンク先のURL" target="_blank" rel="noopener noreferrer">ここに表示名</a>

 

同じタブで表示させる

リンクを同じタブで表示させるコードになります。
挿入時のリンクをそのまま使用してもOKです。

<!--どちらかをコピーしてください-->
<a href="ここにリンク先のURL">ここに表示名</a>
<a href="ここにリンク先のURL" target="_self">ここに表示名</a>

 

今回は、以上です。
“target”要素を活用して、ブログ記事のレベルをアップさせてくださいね。

ABOUT ME
高橋 航
高橋 航
大手電力グループ会社就職→2019年1月退職→ブログ運営開始→現在、Webライターとしても活動中。副業の始め方・稼ぎ方・楽しみ方の情報を月5万円を目標に発信します。