#astro#markdown#mdx

Abrir enlaces externos en pestaña nueva en Astro con rehype-external-links

Snippet para que todos los enlaces externos de tus posts en Markdown/MDX se abran en pestaña nueva automáticamente, sin tener que añadir target="_blank" a mano en cada uno.

Cuando escribes contenido en Markdown o MDX, un enlace normal [texto](url) no lleva target="_blank" por defecto. Si tienes muchos posts con enlaces a webs externas, añadirlo a mano en cada uno es un incordio y es fácil que se te olvide en alguno. rehype-external-links lo resuelve a nivel de configuración, una sola vez.

Instala el paquete:

pnpm add rehype-external-links

Y añádelo a la configuración de Markdown en astro.config.mjs:

import { defineConfig } from 'astro/config';
import rehypeExternalLinks from 'rehype-external-links';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypeExternalLinks, { target: '_blank', rel: ['noopener', 'noreferrer'] }],
    ],
  },
});

Con esto, cualquier enlace que apunte fuera de tu dominio se abre en pestaña nueva automáticamente, con rel="noopener noreferrer" incluido (evita que la pestaña nueva tenga acceso a la ventana original, una buena práctica de seguridad que se suele olvidar al añadir target="_blank" a mano).

Los enlaces internos (que empiezan por / o son relativos) no se tocan — siguen abriéndose en la misma pestaña, como debe ser.

Es exactamente la configuración que uso en este mismo blog para que los enlaces a Nengloba, CartaActiva o entornoWP se abran en pestaña nueva sin tener que acordarme en cada post.

Hablemos

¿Tienes un proyecto
en mente?

Cuéntame lo que necesitas. Te doy una opinión honesta — solo trabajo en lo que realmente tiene sentido para tu negocio.

Empecemos