外部リンクにtarget=_blankを設定する

自分の書いたブログの文章を見直していると、外部リンクが別タブで表示しないことに気づいて、Markdownだとtarget="_blank"ってどう書くのか調べたけど、Markdownで別タブで開く書き方はないことに気付きました。 そこでHTMLを生成するGatsbyJS側でビルド時にtarget="_blank"するように修正したので、設定をメモ。

npmライブラリのgatsby-remark-external-linksを設定すれば外部リンクがMarkdownで記述されている際に、target="_blank"をプロパティにセットしてHTMLへビルドしてくれるらしい。

設定

まずはインストール

gatsby-remark-external-links

$ yarn add gatsby-remark-external-links

初めてyarnでライブラリ入れた。
そしたら、ドキュメントを参考に設定します。

plugins: [
    {
        resolve: `gatsby-transformer-remark`,
        options: {
            plugins: [
                {
                    resolve: "gatsby-remark-external-links",
                    options: {
                        rel: "noopener noreferrer"
                    }
                }
            ]
        }
    },

gatsby-transformer-remarkはMarkdownをパースしてくれるライブラリです。
パースされたMarkdownRemarkノードにgatsby-remark-external-linksで外部リンクを処理します。
optionsのtargetはデフォルトで_blankなのでrel属性のみ付与する設定にした。

noopener noreferrerにどんな意味があるのかは、色んなサイトからリンクされているこちらの記事がわかりやすく解説されているので、リンクを貼っておきます。
要するにtarget="_blank"と併せてrel="noopener noreferrer"を設定しておかないと、フィッシング詐欺攻撃にあう可能性があるよというもの。

あとは実際にビルドしてみると、生成されたHTMLのaタグに上記の属性が付与されています。

感想

target="_blank"の設定はすんなりできました。
ライブラリが色々やってくれるので本当に助かります。
特にMarkdownだけでは表現できない記述なんかはMarkdownのパースを考えると、実装を考えるよりライブラリを探した方が絶対にいいですね。
他に便利なライブラリがあれば積極的に使ってみたいですね。