ブログの【リンク先】をそのままのタブで開かないで新しいタブで開く方法とその脆弱性の解決方法!

ウェブサイトのイメージ

こんばんは!たかぼんブログドットコムのたかぼんです。

はてなブログを開設してから377日・360記事目・302日連続の投稿になります。

なぜ「新しいタブ」でリンクを開く必要があるのか?

「新しいタブ」でリンクを開く

ブログを運営していると別のページへのリンクを貼り付けることが多いかと思います。

そのリンク先をそのままのタブでリンクしてしまうと、元のページに戻ってもらえず逃げられてしまいます。

あえて新しいタブで開くように設定した方が、ユーザー様も右クリックする手間が省けるので親切ではないかと思います。

それにリンク先ののページを消してもリンク元のページに戻って来られるのであなたのサイトから逃げられることがありません。

あなたのサイト内のリンクであれば同じタブでもあなたのサイト内なのでデメリットは少ないのですが、他サイトにリンクを貼られる時は、あなたのサイトから逃げられないように新しいタブで開いてもらうことが大事です。

もちろんあなたのサイト内へのリンクも新しいタブで開くようにしても問題はありません。

リンク先を新しいタブで開く方法

その方法はどうするのか?

リンク先を新しいタブで開く方法なのですが、HTMLタグを直接打ち込んでいる方には簡単なことなのですが、HTMLタグに親しんでいない方には抵抗があると思います。

しかしこの方法だけでも知っておいても損はしないのでぜひ使ってみてください。

通常のリンクのHTMLタグは

<a href="リンク先のURL">リンク先のサイト名</a>

となります。

そこにtarget="_blank"を入れてやればOKです。

そうするとこうなります。

<a href="リンク先のURL" target="_blank">リンク先のサイト名</a>

これで新しいタブにリンク先のサイトがジャンプします。

例えばこのブログのトップページを新しいタブにジャンプさせるにはこうなります。

<a href="https://www.takabonblog.com/" target="_blank">takabonblog.com</a>

上記のHTMLタグで新しいタブにリンク先が反映されると言うことです。

 上記のHTMLタグを書いたものが下記のリンクです。

takabonblog.com

新しいタブを開く「target="_blank"」による脆弱性の解決方法

脆弱性(セキュリティホールとも言う)

新しいタブにリンク先をジャンプさせる「target="_blank"」なのですが実はGoogleでのSEO上では脆弱性(ぜいじゃくせい)があると言われています。

(脆弱性またはセキュリティホールとも言います。)

どういうことかと説明すると、

あなたのサイトを見ていたユーザー様があなたのサイトに貼り付けているリンクをクリックしてリンク先を見たとします。

新しいタブでリンク先を見ているわけですからそのリンク先を閉じたらまた元のあなたのページに戻るはずなのですが、ここからが問題です。

あなたのページに戻らないで例えばamazonの偽造ページなどが表示されログアウト状態になっていると仮説します。

ユーザー様はamazonのページがログアウトになっているだけだと思ってログインしてしまうとユーザー様の情報が盗まれてしまったりということになり、あなたのページの信用度も落ちてしまうのです。

WordPressの設定で新しいタブにリンク先を貼り付けた場合には問題はありませんが、ご自分でHTMLタグを書かれる場合はもうひと手間が必要になります。

では実際に上でリンクしているtakabonblog.comのリンクのしかたはどう書いているのかを説明します。

<a href="https://www.takabonblog.com/" target="_blank" rel="noopener noreferrer">takabonblog.com</a>

となります。

ようするに

target="_blank"」のタグに「rel="noopener noreferrer"」のタグをプラスしてやれば大丈夫なのです。

脆弱性からサイトを守る役目をするのがrel="noopener noreferrer"」のHTMLタグなのです。

まとめ

HTML(文字素材)

WordPressを利用されていない方はこの辺りを気をつけてHTMLタグを利用することをおすすめいたします。

筆者のサイトもWordPressではないので過去のリンクを手直ししている最中です。

何事も知らないと損をするのですが知ってしまうと得をしますね。

リンクを貼る時にはぜひ

target="_blank"」のHTMLタグと

rel="noopener noreferrer"」のHTMLタグを

お忘れなく!

最後までお読みいただきありがとうございました。

感謝いたします。

少しでもあなたのお役に立てたらうれしいです。

ではまた!

はてなブログの方は

読者登録をお願いします(^_-)-☆

 ブログを始めるなら【はてなブログPro】

ドメイン取るなら【お名前.com】

レンタルサーバーなら【ロリポップ】

レンタルサーバーなら【エックスサーバー】

アフィリエイトで収入を得るならA8.net

オンライン英語コーチ【スパルタバディ】

【完全無料プログラミング研修&就活塾】

▼今すぐTwitterのフォローをする▼

▼ブログランキングに参加しました▼

人気ブログランキングへ

▼この記事を今すぐSNSにシェアする▼