astro

Astroでマークダウン内の外部リンクにtarget="_blank"を付与する

astro 2024-01-30

これは

Astro でマークダウンの記事内の外部リンクにtarget="_blank"を自動で付与する方法のメモ。 クライアントサイドの JS で HTML の attribute を書き換える方法がネットでよく出てくるが、リクエストの度に処理させるのではなくビルド時に処理する方法になる。

方法

今回はrehype-external-linksというライブラリを使用する。

npm i rehype-external-links

astro.config.mjsmarkdownオプションに以下追記する。(公式

markdown: {
    rehypePlugins: [[rehypeExternalLinks, { target: '_blank' }]],
}

たったこれだけでビルド時に外部ドメインの a タグにrel="nofollow"target="_blank"が付与される様になる。