タカハシです。
フラメンコ・シティオのブロガーさんのリクエストにお答えして、
【外部リンクを新しいタブで開く設定】について先日、メール解説をしました。
昔のホームページ製作ソフトでゴリゴリ「リュースケの部屋」みたいな(笑)個人HP、今でいう個人ブログを作っていたオタクからすると常識的な話ですが・・・
最近は、誰でも気軽にブログを書けるような環境が整っているぶん、意外に気にしていない方が多いようです。
ですので、敢えてここでも公開してみます。
外部リンクと内部リンクの違いを意識する
外部リンクとは、公開するブログやサイト以外のドメインへのリンクのこと。
外部リンクへ誘導する場合、
という設定を推奨します。
例えば、記事内でYouTubeの動画を紹介した場合、
特に何も設定しなければ・・・
YouTubeのページが、それまで表示されていた記事を上書きする形で・・・
表示されてしまいます。
読者さんが、その動画を再生した後、すぐにブラウザの
「戻る」ボタンを押して、元の記事に戻ってくれれば
良いのですが、
多くの場合、そうはいきません。
YouTubeでは動画の再生が終わると、
検索履歴等から「オススメの動画」を割り出し、
ユーザーの興味を引く動画の閲覧を促す、強力な機能が
付いています。
多くの読者さんは、そうやって動画に見惚れているうちに・・・
あなたの記事を読んでいたことをスッカリ忘れている。
ということが充分あるわけです。
離脱率を抑えるために外部リンクへは別窓で開くのが基本
このように他のサイトに移って、戻ってきてくれない割合をウェブマーケティング用語で「離脱率」といいますが、
離脱率を高めている原因の一つが、この
「新しいタブで開く（別窓で開く）」という設定をしていないことなのです。
ちょっと小難しい話でしたが、重要性は伝わりましたか？
ウェブ記事を書く時の黄金ルールその１．
■外部リンクへは別窓で誘導するべし…?■
※2020年現在の状況はちょっと違います。
スマホユーザーが増えてきたことで、「新しい窓」対応が決してユーザビリティが高いわけではないこと。そして、飛び先のウェブページにJavascriptを仕込むことで、元ページを操作できてしまう、というセキュリティ上の問題があります。
さて、その設定方法です。
別窓（新しいタブ）で開く設定例
リンクのタグの中に、以下のオマジナイを加えます。
target="_blank"具体的には、半角スペースの後に続けて、
target="_blank"と入れます。
【設定例】
○普通のリンク（リンク先に元ページが上書きされる）
<a href="https://www.youtube.com/xxxx/yyyy.html">YouTubeでの映像はこちら</a>
○別窓でのリンク（元のページを残し、新しいタブ/窓で開く）
<a href="https://www.youtube.com/xxxx/yyyy.html" target="_blank">YouTubeでの映像はこちら</a>
覚えられる方は覚えてしまうと楽です。
<a href=”～”> のカッコ内に、
半角スペースに続けて、target="_blank" です。
blankの前のアンダーバーを忘れずに。
覚えられない方は、WindowsやMacの付箋機能を使って
（もしくは、メモ帳を使って）メモしておき、使うときにコピペしてくださいね。
[cc id=1567]
コメント