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...
 6markdown: {
 7rehypePlugins: [
 8[
 9rehypeExternalLinks,
10{
11target: "\_blank",
12rel: ["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
>