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.