Qué hacen realmente rel=noopener, noreferrer y nofollow

La versión corta

El atributo rel de un enlace describe la relación entre la página actual y la página enlazada. Suena abstracto, pero hay tres valores que aparecen constantemente en el trabajo web diario:

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

Estos tres tokens suelen pegarse juntos como si hicieran una sola cosa. No es así.

• noopener es un control de seguridad del navegador.
• noreferrer es un control de privacidad y analítica.
• nofollow es una señal para motores de búsqueda.

Pueden combinarse, pero conviene saber por qué está presente cada uno. Añadir los tres a todos los enlaces salientes no siempre está mal, pero normalmente es una solución perezosa.

rel=noopener evita el reverse tabnabbing

rel="noopener" indica al navegador que no conceda a la página recién abierta acceso a la página original a través de window.opener.

Esto importa sobre todo cuando abres un enlace en una pestaña o ventana nueva usando target="_blank":

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

Sin noopener, la página de destino podría ejecutar JavaScript como este:

window.opener.location = 'https://phishing.example';

Ese ataque se conoce comúnmente como reverse tabnabbing. El usuario hace clic en un enlace legítimo, llega a otro sitio y la pestaña original se redirige silenciosamente a una página de inicio de sesión falsa o a otro destino malicioso.

Los navegadores modernos han mejorado en este punto. En el comportamiento actual de los navegadores, target="_blank" generalmente se trata como si rel="noopener" estuviera presente. Eso es positivo, pero no vuelve inútil el atributo explícito. noopener explícito sigue siendo útil porque:

• documenta tu intención;
• protege entornos de navegación antiguos o poco habituales;
• evita depender de que cada vista web embebida se comporte como un navegador de escritorio moderno;
• facilita la revisión de código.

Para enlaces externos que se abren en una pestaña nueva, rel="noopener" es un valor predeterminado sensato.

¿Afecta noopener al SEO?

No, no de forma significativa. noopener controla el comportamiento del navegador. No indica a los motores de búsqueda si avalas una página, si debe transmitirse autoridad de enlace o si el enlace es de pago.

Si tu política de SEO trata noopener como una directiva de posicionamiento, esa política necesita revisión.

rel=noreferrer oculta la página referente

rel="noreferrer" indica al navegador que no envíe la cabecera HTTP Referer cuando el usuario sigue el enlace.

Sí, la cabecera históricamente está mal escrita como Referer. El atributo se escribe noreferrer.

Normalmente, cuando un usuario hace clic en un enlace desde tu página hacia otro sitio, el destino puede recibir un valor de referente que muestra de dónde procede la visita. Según la Referrer-Policy de tu sitio, puede ser la URL completa, solo el origen o nada.

Por ejemplo, un destino podría ver:

Referer: https://www.example.com/pricing?plan=enterprise

o solo:

Referer: https://www.example.com/

Con rel="noreferrer", el navegador no debería enviar esa cabecera para esa navegación.

<a href="https://external.example" rel="noreferrer">
  External site
</a>

En la práctica, noreferrer también se comporta como noopener en los navegadores modernos. Si usas noreferrer, por lo general no necesitas noopener por seguridad en ese mismo enlace. Muchos equipos siguen escribiendo ambos por claridad:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

Está bien. Es redundante, pero legible.

Cuándo es útil noreferrer

Usa noreferrer cuando la URL de la página actual no deba exponerse al destino.

Ejemplos comunes:

• enlaces desde paneles privados;
• enlaces desde entornos de previsualización no publicados;
• enlaces desde URL que contienen parámetros de consulta sensibles;
• enlaces en herramientas de administración, colas de moderación, pantallas de CRM o sistemas de atención al cliente;
• enlaces en los que el destino no debería conocer la página de origen exacta.

Este último punto no siempre tiene que ver con el secreto. A veces se trata de minimización de datos. Si el destino no necesita conocer la URL referente, no la envíes.

Esto encaja con la dirección general de un diseño web consciente de la privacidad. Navegadores, usuarios y reguladores se han movido hacia el envío de menos datos ambientales por defecto. Si estás revisando esta área, nuestro artículo sobre qué cambió para las cookies en 2026 y qué hacer al respecto cubre el mismo cambio general: menos seguimiento invisible, flujos de datos más deliberados.

La contrapartida en analítica

noreferrer puede romper la atribución para el sitio al que enlazas. Su analítica puede clasificar la visita como tráfico directo en lugar de tráfico de referencia.

Ese no es tu problema principal, pero puede importar en colaboraciones, relaciones de afiliación, recorridos de cliente y ecosistemas internos entre dominios. Si tu equipo de marketing espera que los sitios asociados vean tráfico de referencia desde tu dominio, aplicar noreferrer de forma indiscriminada puede generar confusión.

Para muchos enlaces editoriales ordinarios, el mejor enfoque es definir una cabecera Referrer-Policy para todo el sitio en lugar de añadir noreferrer en todas partes. Por ejemplo:

Referrer-Policy: strict-origin-when-cross-origin

Esa política envía la URL completa para navegación del mismo origen, envía solo el origen a destinos seguros de origen cruzado y no envía referente al pasar de HTTPS a HTTP. Es un valor predeterminado práctico para muchos sitios.

Si necesitas inspeccionar cómo se comportan las cabeceras en producción, una comprobación HTTP sin procesar suele ser más clara que hacer suposiciones a partir de paneles de analítica. El flujo de trabajo de un pequeño conjunto de herramientas para depurar redirecciones y cabeceras HTTP en producción se aplica directamente a la depuración de referrer-policy.

rel=nofollow es para motores de búsqueda, no para navegadores

rel="nofollow" indica a los motores de búsqueda que no quieres implicar un aval de la página enlazada.

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

Originalmente, nofollow se introdujo para combatir el spam en comentarios. La idea era simple: si los enlaces en comentarios no transmitían crédito de posicionamiento, los spammers tendrían menos incentivos para inundar blogs y foros.

Hoy, Google trata nofollow como una pista más que como una directiva absoluta. Esa distinción importa. Significa que los motores de búsqueda pueden usar el enlace para descubrimiento o sistemas de posicionamiento en algunos contextos, pero estás señalando claramente que el enlace no debería tratarse como un aval editorial normal.

Cuándo usar nofollow

Usa nofollow cuando enlazas pero no quieres responder por el destino.

Ejemplos razonables incluyen:

• enlaces generados por usuarios que no son de confianza;
• enlaces en comentarios o perfiles públicos;
• enlaces a sitios mencionados como ejemplos de mal comportamiento;
• enlaces incluidos como referencia, pero no como aval;
• enlaces en áreas donde la moderación es limitada.

Para enlaces de pago o patrocinados, prefiere rel="sponsored". Para contenido generado por usuarios, prefiere rel="ugc". Puedes combinar valores si hace falta:

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

Si gestionas formularios públicos, comentarios, directorios o páginas de perfil, los atributos de enlace son solo una parte del problema de abuso. El spam suele empezar antes, en el flujo de envío. Tenemos un análisis separado sobre por qué tu formulario de contacto es tu mayor responsabilidad frente al spam, y aquí se aplica la misma lección: no esperes que nofollow compense una moderación débil.

Qué no hace nofollow

nofollow no impide que los usuarios hagan clic en el enlace. No bloquea que el navegador envíe un referente. No oculta el destino a la vista. No protege target="_blank".

Tampoco garantiza que una URL nunca vaya a rastrearse. Si los motores de búsqueda encuentran la URL en otro lugar, aún pueden rastrearla. Si necesitas impedir la indexación, usa los controles robots adecuados en la página de destino, como noindex, no un atributo nofollow en el enlace de otra persona.

Combinaciones comunes

Enlace externo que se abre en una pestaña nueva

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

Esta es la base. Aborda el problema de seguridad creado al abrir un nuevo contexto de navegación.

Si además no quieres enviar datos de referente:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

Ubicación de pago

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

Puedes añadir noopener si se abre en una pestaña nueva:

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

No uses nofollow como sustituto vago de declarar enlaces de pago. Los motores de búsqueda ya tienen un valor más específico para eso: sponsored.

Enlace generado por usuarios

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

Esto indica a los motores de búsqueda que el enlace fue aportado por un usuario y no debería tratarse como un voto editorial normal.

Enlaces internos

La mayoría de los enlaces internos no necesitan ninguno de estos valores.

No añadas nofollow a enlaces internos como táctica rutinaria de modelado. Suele crear más confusión que beneficio. Si una página no debe indexarse, gestiónalo directamente. Si una página no debe rastrearse, piensa con cuidado en reglas robots, autenticación, canonicalización y arquitectura del sitio.

Para enlaces internos que se abren en una pestaña nueva, noopener sigue siendo inofensivo y puede ser adecuado. Pero la mejor pregunta es por qué el enlace interno necesita una pestaña nueva.

Una política práctica para equipos

Un estilo interno sencillo evita la mayoría de los errores:

1. Añade rel="noopener" a enlaces con target="_blank", especialmente enlaces externos.
2. Añade noreferrer solo cuando ocultar la URL de origen sea intencional.
3. Añade nofollow solo cuando no avales el destino.
4. Usa sponsored para enlaces de pago y ugc para enlaces generados por usuarios.
5. No uses atributos de enlace como sustituto del control de acceso, la moderación o las reglas de indexación.

Lo importante es la intención. Cada token en rel debería responder a una pregunta específica:

• Seguridad: ¿debe aislarse la nueva página de la página que la abrió?
• Privacidad: ¿debe recibir el destino información de referente?
• SEO: ¿estamos avalando este enlace como referencia editorial?

Si nadie en el equipo puede responder a esas preguntas, probablemente el atributo sea HTML por culto cargo.

Cómo probar qué está ocurriendo

Para noopener, abre el enlace y comprueba si el destino puede acceder a window.opener. En una página de prueba controlada, window.opener debería ser null cuando noopener está activo.

Para noreferrer, inspecciona la solicitud de red en el lado del destino o usa un registrador de solicitudes en un entorno de prueba. Browser DevTools puede mostrar cabeceras de solicitudes salientes, pero los registros del servidor suelen ser más fiables.

Para nofollow, la prueba es menos inmediata porque es una interpretación del motor de búsqueda, no un comportamiento del navegador. La mejor comprobación es inspeccionar el código fuente: confirma que el HTML renderizado contiene el valor rel esperado. Si tu framework frontend reescribe enlaces, inspecciona el DOM final, no solo la plantilla.

La conclusión

Estos atributos son pequeños, pero están en la intersección de seguridad, privacidad y SEO. Tratarlos como intercambiables crea malos hábitos.

Usa noopener generosamente con enlaces que abren pestañas nuevas. Usa noreferrer deliberadamente cuando importe la privacidad del referente. Usa nofollow cuando estés haciendo una declaración orientada a búsqueda sobre el aval. Y cuando un enlace sea de pago o generado por usuarios, usa los valores modernos más específicos: sponsored y ugc.

Eso basta para la mayoría de los sitios. El objetivo no es decorar cada enlace. El objetivo es hacer que cada enlace diga al navegador y a los motores de búsqueda exactamente lo que necesitan saber.