Astro: Rehype External Links

Astro doesn’t offer a built-in integration specifically for automatically opening external links in new tabs, but we can easily implement it using a Markdown (or MDX) plugin. This runs at build time, giving you a clean, dependency-free solution.

Astro’s docs recommend using rehype-external-links as your go-to plugin for external link behavior in Markdown content.

Install rehype-external-links

In Node.js (version 16+), install with npm:

npm install rehype-external-links

Apply plugin to astro.config.mjs

Import rehype-external-links and you can set your own target or rel.

 1...
 2import rehypeExternalLinks from "rehype-external-links";
 3
 4export default defineConfig({
 5  ...
 6  markdown: {
 7    rehypePlugins: [
 8      [
 9        rehypeExternalLinks,
10        {
11          target: "_blank",
12          rel: ["noopener", "noreferrer", "external"],
13        },
14      ],
15    ],
16  },
17  ...
18});

Output

The target and rel will be added to every external anchor tag after npm run build (or npm run dev).

<a href="https://github.com/odhyp/" rel="noopener noreferrer external" target="_blank">GitHub</a>