El uso del atributo noreferrer en HTML, más conocido como rel=»noreferrer», es una de esas pequeñas pero poderosas prácticas en el diseño web con un gran impacto en la privacidad, la seguridad y el SEO. ¿Alguna vez te has preguntado cómo mantener cierta privacidad al interactuar con enlaces externos desde tu sitio web? En este post vamos a hablar sobre una joya oculta en HTML: el atributo rel=”noreferrer”. Vamos a desentrañar sus funciones y veremos ejemplos prácticos para entender cómo usarlo de manera efectiva en nuestro diseño web.
¿Qué es el atributo noreferrer en HTML?
El atributo noreferrer en HTML es un atributo que puede incluirse en el elemento <a> (etiqueta de enlace) para controlar la forma en la que el navegador maneja la información de referencias cuando se hace clic en un enlace.
Normalmente, cuando haces clic en un enlace, tu navegador envía información al sitio web de destino sobre la página de la que has llegado. Esta información se conoce como referrer (referente). Por ejemplo, si haces clic en un enlace en la página A y te lleva a la página B, tu navegador le diría a la página B que has llegado desde la página A. Esta información puede ser útil para los propietarios de sitios web para rastrear de dónde proviene su tráfico.
Sin embargo, puede haber situaciones en las que no quieras que se comparta esta información. Es aquí donde entra en juego el atributo noreferrer en HTML. Cuando incluyes rel="noreferrer" en una etiqueta de enlace, le estás diciendo al navegador que no envíe información de referente al sitio web de destino.
Además, el uso de noreferrer también tiene implicaciones de seguridad, ya que puede ayudar a prevenir ciertos tipos de ataques, como el tabnabbing. El tabnabbing es una técnica utilizada por los atacantes donde manipulan una página abierta en segundo plano para engañar a los usuarios. Al usar noreferrer, se asegura que la página de destino no tenga la capacidad de manipular la página anterior mediante JavaScript.
Así, el atributo noreferrer en HTML es una herramienta útil tanto para mantener la privacidad de los usuarios como para asegurar que tu sitio web está protegido contra ciertos tipos de ataques de seguridad.
Te mostramos cómo se ve el atributo noreferrer en HTML:
<a href="https://ejemplo.com" target="_blank" rel="noreferrer">Visitar Ejemplo.com</a>
¿Por qué usar rel=»noreferrer»?
Imagina que estás navegando por tu sitio web favorito y haces clic en un enlace de afiliados. Sin saberlo, le has dado al sitio al que has accedido información sobre dónde estabas antes de llegar allí. En el mundo del marketing digital, esta información es oro, pero como usuarios o desarrolladores, puede que prefiramos mantener cierto grado de privacidad.
Utilizar rel="noreferrer" garantiza que la nueva página no tenga acceso a la propiedad document.referrer. Es decir, el sitio de destino no sabrá de dónde vino el tráfico. Además, tiene un beneficio de seguridad, dado que evita que la nueva página acceda a la página anterior a través de window.opener.
Ejemplos prácticos
Enlaces de afiliados
Una de las formas de aprovechar las funciones del atributo noreferrer en HTML son los enlaces de afiliados. Si estás utilizando enlaces de afiliados en tu sitio web, puedes optar por no proporcionar información de referencia a la página de destino:
<a href="https://afiliado.com" target="_blank" rel="noreferrer">Compra este increíble producto</a>
Enlaces a sitios web externos
Lo mismo se aplica a cualquier enlace externo que prefieras mantener privado:
<a href="https://externo.com" target="_blank" rel="noreferrer">Visita este increíble sitio web</a>
Un toque en rel=»noopener»
Es importante mencionar rel="noopener" al tratar este tema. Este atributo también se usa comúnmente con target="_blank" para evitar ataques de tabnabbing. En pocas palabras, impide que la nueva página tenga control sobre window.opener, de modo que mejora la seguridad.
Beneficios SEO
Además de la privacidad y la seguridad, ¿sabías que rel="noreferrer" o el atributo noreferrer en HTML también puede afectar el posicionamiento web? Google entiende el atributo rel="noreferrer" como una señal de que no desea pasar el link juice o valor SEO al sitio vinculado, lo que puede ser útil en ciertas estrategias de SEO.
Continúa tu viaje de aprendizaje
La próxima vez que estés desarrollando, no olvides considerar el uso de este atributo en los enlaces externos. Además de esto, hay muchos otros temas relacionados con el desarrollo web que te permitirán convertirte en un experto tanto del backend como del frontend de la web. ¿Quieres seguir aprendiendo?’ Con nuestro Desarrollo Web Full Stack Bootcamp podrás sumergirte en el apasionante mundo de la programación y la tecnología y, en pocos meses, estarás listo para triunfar en el mercado laboral IT. ¡Entra y prepárate para cambiar tu futuro!
