Markdownでtarget="_new"（blank）を指定し、リンクを別ウィンドウで開く方法

Blog Admin

Markdownでリンクを貼る際にtarget="new"を指定できない問題に直面しました。
この記事では、Markdown記法をそのまま生かしながら、自サイト内以外への外部リンクを別ウィンドウで開く方法をご紹介します。

Markdownでtarget属性が貼れないとき

Markdown記法でリンクを貼ると、リンク先に飛んだときの挙動はデフォルト値のtarget="_self"となり、同じタブでリンクは開かれます。Markdownでは、通常以下のようにリンクを記載します。

[アンカーテキスト](URL)*1

こちらを別タブで開くことが出来るように、target属性値をtarget="_new"に指定できないものかと、色々調べた結果、以下の方法のご紹介がありました。

yoshiko.hatenablog.jp

JavaScriptで対応

自サイト以外のリンクは別ウィンドウで開くコード

document.addEventListener("DOMContentLoaded", function () {
    var links = document.querySelectorAll("a[href^='http']:not([href*='" + window.location.hostname + "'])");
    links.forEach(function (link) {
        link.setAttribute('target', '_new');
    });
});

Copied!

Markdown記法ではtarget属性値を任意で指定することは出来ないようです。

リンク属性の変更自体はHTMLで書けば対応可能ですが、このスクリプトコードを利用すれば、せっかくのMarkdown記法をそのまま生かせる、というメリットがあります。

また、一度コードを埋め込んでおけば、次回からはいつでも自動で別タブ指定のリンクとなりますので、作業効率も向上しそうです。

このコードを<script></script>で囲み、ヘッダもしくはフッタなどに貼り付けておけば、Markdownで書いたリンクに自動でtarget="_new"属性がつきます。

リンクデモページ（外部サイト）へ

[アンカーテキスト](リンク先ＵＲＬ)

デモページへのリンクは上の記述のみですが、別タブで開いたかと思います。
また、リンクで飛んだ先のウィンドウを閉じずに再度リンクを踏むと、タブは増えずに同じタブが再度更新されるかと思います。

target="_new" : リンクは同じタブで開く（タブが上書きされる）
target="_blank" : 新しいタブをどんどん追加して開く

余談ですが

※ちなみに検証ツールF12で見ると、はてなブログカードはデフォルトで別タブで開く指定がついています（target="_blank"）。

<a href="リンクのＵＲＬ" target="_blank" data-track-component="entry_title">リンク先のタイトル</a>

今日のひとこと

「お金の計画なんて立てても仕方がない。なぜなら、計画通りになどならないからだ。」

by me

今日の一曲

↼ リンクを貼るときのひと手間、「target="_new"」の利点

*1:アンカーテキストとは、リンクの内容を表すテキストのことです。アンカーテキストは、ユーザーがリンクをクリックするかどうかを判断し、リンク先の内容を把握するために使用されます。アンカーテキストは、サイトの階層構造やリンク先の内容を把握するために使われるので、SEO対策では内部SEO対策として重要な位置付けにあります。アンカーテキストは、HTMLタグのa要素のhref属性（アンカータグ）でマークアップしたリンク付きのテキストです。