"Noopener noreferrer" es un atributo HTML agregado a [enlaces] externos. La mayoría de los CMS lo incluyen automáticamente sin que tengas que agregarlo explícitamente.
El atributo noopener impide que la nueva pestaña del navegador acceda al objeto window de la pestaña original.
Además, noreferrer evita que el navegador envíe la cabecera de referencia HTTP. Sin la información del referente, el sitio web de destino no sabe de dónde vino el usuario.
Entendamos qué significa "noopener noreferrer" en SEO y construcción de enlaces. ¿Son útiles? ¿Deberías usarlo? ¿Y cuáles son los pros y contras?
¿Qué Significa rel="noopener noreferrer"?
La etiqueta rel=”noopener noreferrer” se añade a los enlaces externos que se abren en una nueva pestaña. Se utiliza con el target="_blank".
Cuando añades "noopener", le indicas al navegador que impida que la nueva pestaña controle la original. Previene el [tabnabbing] inverso, donde un sitio malicioso se apodera de la pestaña del sitio de referencia.
Por otro lado, "noreferrer" asegura que no se pase ningún dato de referencia (como tu URL) a la página de destino. Además, noreferrer detiene el seguimiento del referente, lo cual podría ser útil si no quieres que las herramientas de analítica y los sitios asociados vean quién envió el tráfico.
Deberías usar ambos atributos al abrir enlaces en una nueva pestaña a menos que necesites datos de referencia para el seguimiento o asociaciones.
Ejemplo de "Noopener Noreferrer"
Imagina que estás gestionando un blog, y estás enlazando a un artículo de terceros sobre "tendencias" de [marketing].
Quieres que el enlace se abra en una nueva pestaña para que tus lectores permanezcan en tu sitio.
Aquí's cómo se vería el HTML:
<a href="https://marketingtrendssite.com" target="_blank" rel="noopener noreferrer">Leer más sobre tendencias de marketing</a>
En este "código":
Target="_blank" abre el enlace en una nueva pestaña del navegador.
Noopener le dice al navegador: “No [permitas] que esa nueva pestaña [controle] o [acceda] a esta.”
"Noreferrer" añade una capa de privacidad al evitar que la URL de su sitio se pase al sitio de destino.
¿Por qué son importantes estas "etiquetas"?
En "link building", dos [etiquetas] importan más: nofollow y dofollow.
Algunos asumen que nofollow es lo mismo que ‘noreferrer’ o ‘noreferer’. Sin embargo, [they] no son lo mismo.
Usar noopener noreferer no tiene un impacto en link equity.
Los "SEO" y constructores de enlaces utilizan rel="noopener noreferrer" para proteger el dominio de ataques externos y para rastrear con precisión los datos de la "URL".
La mayoría de los sistemas de gestión de contenido como Wix, WordPress, Squarespace, Ghost, Webflow y otros ya utilizan la etiqueta noopener por defecto para todos los enlaces.
Cuando añades un enlace, por defecto, se añade un atributo target="_blank".
Este "atributo" por sí solo introduce una [vulnerabilidad] de seguridad a menos que se combine con noopener. La página de destino obtiene acceso al objeto de la ventana de origen, lo que permite la manipulación a través de [scripts].
Aplicar noopener elimina ese "riesgo" por completo.
"Noopener noreferrer" también se utilizan para proteger la confianza del dominio y para mejorar el rendimiento del navegador de modo que los enlaces se abran correctamente, más rápido y sin ninguna brecha de seguridad.
La implementación correcta de rel="noopener noreferrer" conduce a prácticas de enlace limpias que mejoran la capacidad de rastreo de los motores de búsqueda y reducen la exposición al riesgo para obtener mejores resultados en la campaña de SEO.
Ventajas y desventajas de usar Noopener Noreferrer
Desde las perspectivas de SEO y seguridad, la combinación de noopener noreferrer respalda una ejecución de enlaces más fuerte.
Sin embargo, hay ciertos inconvenientes que se deben considerar.
A continuación se muestra un desglose de las "ventajas" y "limitaciones" medibles de usar noopener noreferrer.
Aquí están los pros de usar noopener noreferrer en enlaces externos:
- Protege contra el Tabnabbing: Cuando los constructores de enlaces utilizan target="_blank" para abrir un enlace en una nueva pestaña, se crea una vulnerabilidad de seguridad llamada "reverse tabnabbing". Puede llevar a ataques de "phishing" y redireccionamientos innecesarios que dañan la reputación del dominio. Al agregar rel="noopener", puedes proteger tu sitio web de tales ataques, ya que evita que la nueva pestaña tenga acceso a la ventana original del navegador.
- Mejora el rendimiento del navegador: Además de mejorar la seguridad, rel="noopener" puede realmente mejorar el rendimiento del navegador. Sin él, la nueva pestaña permanece conectada a la pestaña original a través de la propiedad window.opener. Esa conexión utiliza memoria y recursos del navegador innecesariamente. Al usar noopener, eliminas ese enlace, lo que resulta en un manejo de recursos más limpio.
- Ofrece Más Control Sobre los Datos de Referencia: Usar rel="noreferrer" da a los SEOs y constructores de enlaces control sobre si pasan o no datos de referencia a la página de destino. Si estás enlazando a un competidor o una página sensible, ocultar el hecho de que tu sitio envió tráfico puede ser estratégico. Por otro lado, si estás en marketing de afiliación o asociaciones donde necesitas demostrar tráfico de referencia, no deberías usar noreferrer.
- "No" tiene "impacto negativo" en "SEO": Los propietarios de sitios web se confunden y asumen que noopener es lo mismo que nofollow. Sin embargo, ni noopener ni noreffer afectan el flujo de "link juice". Son puramente para el comportamiento del navegador y la privacidad. Los constructores de enlaces pueden usarlos sin riesgo para sus estrategias de backlinks ni perder valor de enlaces externos de alta autoridad.
Aquí están las desventajas de usar "noopener noreferer" en enlaces externos:
- "Pierdes" datos de referencia con noreferrer: Cuando utilizas rel="noreferrer", impide que el sitio web de destino vea de dónde vino el visitante. Es útil para la privacidad, pero no es ideal cuando el seguimiento importa. Por ejemplo, los "afiliados", socios de marca o equipos de análisis a menudo necesitan esa información de referencia para informes, pagos u optimización. Si lo estás ocultando con un noreferrer, podrías perder atribución o incluso ingresos.
- Problemas de "compatibilidad" con algunas herramientas de "analíticas": Algunos sistemas de analíticas más antiguos o personalizados todavía utilizan el encabezado Referer para rastrear los recorridos de los visitantes. Si se aplica noreferrer, las herramientas de seguimiento de URL podrían mostrar el tráfico como “directo” en lugar de mostrar la fuente real. Por lo tanto, los informes podrían ser inexactos, y los SEOs o propietarios de sitios web podrían no saber de dónde proviene realmente el tráfico.
- Puede llevar a la sobrecomplicación en las plantillas: En sitios web grandes con configuraciones de CMS complejas, gestionar las etiquetas noopener noreferrer en cada enlace externo puede ser [time-consuming]. Podría requerir scripting adicional, configuraciones de plugins o esfuerzo manual. Si no se maneja de manera consistente, puede causar una mezcla de enlaces seguros e inseguros, lo cual no es ideal para el mantenimiento a largo plazo.
Mejores prácticas para "Link Builders"
Sigue estas "mejores prácticas" al usar "noopener noreferrer" en la creación de [enlaces]:
Usa rel="noopener" con target="_blank"
Debe utilizar rel="noopener" con enlaces que se abren en nuevas pestañas a través de target="_blank". Previene el acceso a window.opener desde la página enlazada y elimina los riesgos de tabnabbing.
Además, asegura un comportamiento seguro sin afectar al SEO o PageRank. Debes tratar esto como un [predeterminado] para todos los enlaces externos que se abren en una nueva pestaña.
Usa rel="noreferrer" con Precaución
Deberías incluir rel="noreferrer" en enlaces externos para bloquear que la información de referencia se pase a la URL de destino. Debes añadir esta etiqueta solo en escenarios sensibles a la privacidad o cuando se deba evitar el seguimiento de referencias.
Evita el uso excesivo de Noreferrer en la construcción de enlaces
Intenta evitar el uso excesivo de noreferrer ya que reduce la visibilidad en analíticas y debilita el valor de "backlinks" en campañas de divulgación.
Los encabezados de referencia ayudan a los sitios receptores a reconocer "fuentes de tráfico" y la credibilidad del enlace. Tenga cuidado al usar este atributo y no lo haga predeterminado para todos los backlinks.
Combinar con "Nofollow", "UGC" o "Sponsored" según sea necesario
Use "nofollow" para enlaces no confiables o promocionales, UGC para contenido generado por el usuario, y "sponsored" para colocaciones pagadas o referencias de afiliados.
Cuando los enlaces se abren en nuevas pestañas, combínalos con "noopener" por seguridad. Evita combinarlos con "noreferrer" a menos que sea requerido por cumplimiento o privacidad.
Preguntas frecuentes
¿"rel="noreferrer"" [perjudica] el SEO?
No. rel="noreferrer" no daña el SEO. Google sigue los enlaces con noreferrer y pasa PageRank (equidad de enlace) siempre que no estén presentes nofollow o sponsored. La etiqueta noreferrer afecta el comportamiento del navegador, no cómo los motores de búsqueda evalúan o clasifican las páginas.
La "autoridad" del enlace, la indexación y la relevancia del "anchor text" se conservan completamente. La única desventaja es la pérdida de datos de referencia.
Cuando se utiliza esta etiqueta, el sitio de destino no puede ver de dónde proviene el tráfico. Eso significa que plataformas como Google Analytics o los paneles de afiliados perderán la información del referente. Por lo tanto, esto afecta el seguimiento, no las clasificaciones.
¿Es necesario "noopener" para enlaces internos?
No, rel="noopener" no es necesario para los enlaces internos. Agregar enlaces contextuales a tu propio sitio no introduce los mismos riesgos de seguridad asociados con los enlaces externos.
La función principal de noopener es "prevenir" el [reverse tabnabbing], y este tipo de amenaza se origina en dominios de terceros, no en enlaces dentro del mismo sitio.
Los enlaces internos operan dentro de un entorno confiable bajo el mismo dominio y, por lo tanto, los protocolos de seguridad del navegador ya restringen el comportamiento peligroso a través de orígenes idénticos.
¿Puedo eliminar estas "etiquetas" manualmente?
Sí, puedes eliminar rel="noopener noreferrer" editando directamente el código HTML. Abre tu CMS en modo de edición y ve al hipervínculo.
Ahora, elimina el noopener noreferer del enlace externo o interno. Si tu CMS está agregando estos valores por defecto, entonces necesitas la ayuda de un desarrollador para [override] la inserción automática a través de plantillas o plugins.
¿Cuál es la diferencia entre noreferrer y nofollow?
Noreferrer es una instrucción a nivel de navegador que impide que la información de la URL de referencia se transmita a la página de destino, mientras que nofollow es una instrucción específica de SEO que impide el flujo de "equidad de enlace" desde el dominio principal al sitio vinculado.
La principal diferencia radica en la función: noreferrer afecta la visibilidad de los datos de referencia en el navegador, mientras que nofollow afecta la transferencia de señales de clasificación en los motores de búsqueda.
Conclusión
Debe usar rel="noopener noreferrer" para sitios web "externos" que se abren en una nueva pestaña. Del mismo modo, debe aplicar noreferrer al ocultar datos de referencia.
Además, asegúrate de no usar estos atributos en enlaces internos. La navegación interna no introduce riesgos de seguridad externos ni requiere control de referencias, por lo que agregar atributos innecesarios crea desorden en el código sin proporcionar beneficios.
Recuerda que ni "noopener" ni "noreferrer" afectan los rankings. Los motores de búsqueda continúan siguiendo los enlaces, pasando equidad de enlaces y procesando el texto ancla. Solo los atributos "nofollow" y "sponsored" controlan la transferencia de valor SEO.
