En el mundo del desarrollo web, los enlaces HTML son la columna vertebral de la navegación entre páginas web. Sin embargo, incluso estos elementos fundamentales pueden conllevar riesgos de seguridad. Ahí es donde entra en juego la etiqueta rel=»noopener noreferrer», ofreciendo una capa de protección para tu sitio web y sus visitantes.

¿Cuáles son las partes de esta etiqueta?

Desglosamos los dos componentes de esta etiqueta:

  • noopener: Esta parte aborda una vulnerabilidad de seguridad que surge cuando abres enlaces en nuevas pestañas o ventanas usando el atributo target=»_blank». Un sitio web malicioso abierto de esta manera podría obtener control parcial de la ventana original (la donde hiciste clic en el enlace). El atributo noopener previene esto al cortar la conexión entre la pestaña recién abierta y la página original.
  • noreferrer: Esta parte trata sobre la privacidad. Cuando haces clic en un enlace, el sitio web al que llegas generalmente obtiene información sobre de dónde vienes (el referente). El atributo noreferrer oculta esta información de referente. Esto puede ser útil cuando enlazas a sitios externos que no necesariamente respaldas y quieres proteger la privacidad de tus visitantes.

¿Por qué usar «noopener noreferrer»?

  1. Seguridad: Esta etiqueta se usa principalmente para mejorar la seguridad. Al evitar que las pestañas o ventanas recién abiertas controlen la página original, proteges a tus usuarios de posibles exploits.
  2. Privacidad: Si no quieres pasar información de referente a sitios web externos, el atributo noreferrer asegura que el historial de navegación de tus visitantes permanezca un poco más privado.
  3. Rendimiento (Indirecto): Aunque no es un efecto directo, noopener puede llevar a pequeñas mejoras en el rendimiento. Sin esa conexión a la página original, la nueva pestaña puede cargar marginalmente más rápido.

Cómo usar la etiqueta

Incorporar rel=»noopener noreferrer» en tus enlaces HTML es sencillo:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example Website</a>

Nota de WordPress: WordPress agrega automáticamente esta etiqueta a cualquier enlace que configures para abrir en una nueva pestaña o ventana, ofreciendo protección incorporada.

¿Debería usarlo siempre?

Aunque generalmente se considera una buena práctica usar rel=»noopener noreferrer» en enlaces externos, hay algunas excepciones:

  • Sitios web de confianza: Si estás enlazando a sitios web bien conocidos y confiables, puedes omitir la etiqueta.
  • Enlaces internos: No es necesario usar esta etiqueta cuando enlazas a páginas dentro de tu propio sitio web.

Impacto en SEO

La buena noticia es que usar rel=»noopener noreferrer» no debería tener un impacto negativo directo en la optimización de motores de búsqueda (SEO) de tu sitio web. Dicho esto, el componente noreferrer podría dificultar el seguimiento del tráfico de referencia en las herramientas de análisis si dependes mucho de esos datos.

La etiqueta rel=»noopener noreferrer» puede parecer un detalle pequeño, pero juega un papel significativo en la seguridad del sitio web y la privacidad del usuario. Al entender e incorporar esta etiqueta, creas una experiencia en línea más segura y responsable.

Entendiendo los conceptos básicos de la etiqueta rel=»noopener noreferrer»

Enlaces HTML y el atributo target=»_blank»

La base de la navegación web reside en el humilde enlace HTML, a menudo representado por la etiqueta . Vamos a desglosarlo:

  • La estructura básica: <a href=»https://www.examplewebsite.com»>Haz clic aquí para el Sitio Web de Ejemplo</a>
  • href especifica el destino del enlace
  • El texto entre las etiquetas de apertura <a> y cierre </a> es lo que el usuario ve y en lo que hace clic.
  • La magia de target=»_blank»: Este atributo le dice al navegador que abra el enlace en una nueva pestaña o ventana, ofreciendo una experiencia de usuario más fluida cuando quieres mantener a los visitantes en tu sitio mientras les permites explorar recursos adicionales.

Posibles vulnerabilidades de seguridad

Aunque conveniente, el atributo target=»_blank», cuando se usa sin salvaguardas, puede abrir inadvertidamente una ventana de oportunidad para actores maliciosos. Aquí está el por qué:

La propiedad window.opener: En un escenario normal, los sitios web tienen acceso limitado a otras pestañas o ventanas que tienes abiertas. Sin embargo, cuando se abre una nueva pestaña usando target=»_blank», una propiedad especial de JavaScript llamada window.opener establece un enlace de vuelta a la pestaña o ventana original.

Los riesgos de manipulación: Si un sitio web malicioso obtiene acceso a window.opener, tiene el potencial de:

  • Redirigir la pestaña original a un sitio web dañino (phishing, distribución de malware, etc.)
  • Inyectar contenido no deseado o anuncios en tu sitio web
  • Lanzar pop-ups o superposiciones engañosas para engañar a los visitantes
  • Explotar una clase de ataques conocidos como «tabnabbing»

Información de referente y análisis

Cada vez que haces clic en un enlace para navegar de un sitio web a otro, tu navegador generalmente envía un poco de información conocida como el «referente». Esto le dice al sitio web de destino de dónde vienes. Aquí es por qué es importante:

Entendiendo el tráfico de visitantes: Los datos de referente son invaluables para el análisis de sitios web. Te ayudan a:

  • Ver qué sitios web y backlinks están enviando visitantes a tu sitio.
  • Rastrear el éxito de las campañas de marketing.
  • Entender cómo las personas navegan por tu sitio web.

Consideraciones potenciales de privacidad: Aunque útil para análisis, la información del referente también puede plantear preocupaciones de privacidad en ciertas situaciones:

  • Sitios web sensibles (por ejemplo, de salud, financieros) podrían no querer que la URL del referente sea transmitida abiertamente.
  • Los usuarios preocupados por el rastreo de su historial de navegación podrían preferir limitar los datos que los sitios web reciben sobre ellos.

Con una base en enlaces HTML, vulnerabilidades potenciales e información del referente, estamos listos para explorar cómo «noopener» y «noreferrer» ayudan a mitigar estos riesgos.

Cómo funcionan «noopener» y «noreferrer»

La etiqueta «noopener»

  • La función principal: La etiqueta «noopener» corta la conexión de JavaScript (establecida a través de window.opener) entre la nueva pestaña/ventana y el sitio web original. Esta es una medida de seguridad crucial.
  • Prevención de manipulación de pestañas: Al usar «noopener», básicamente le dices al navegador, «No le des al nuevo sitio web ninguna forma de interferir con la pestaña original.» Esto asegura que tus visitantes no puedan ser redirigidos inesperadamente o que el contenido de tu sitio no sea modificado.
  • Ejemplo de código:
<a href="https://externalsite.com" target="_blank" rel="noopener">Visit External Site</a>
  • Beneficios más allá de la seguridad: «noopener» también puede mejorar sutilmente el rendimiento del sitio web. Al bloquear este control potencial, el navegador sabe que no necesita dedicar tantos recursos a monitorear las interacciones entre las pestañas.

La etiqueta «noreferrer»

Control de la información del referente: La etiqueta «noreferrer» instruye al navegador para que retenga la información del referente cuando un usuario hace clic en el enlace. Esto impacta el seguimiento de análisis del sitio web.

Privacidad y casos de uso: Aquí es cuando podrías usar «noreferrer»:

  • Enlazando a sitios web sensibles donde la anonimidad es importante.
  • Asociarse con sitios web donde deseas mantener privados los detalles del origen del tráfico.
  • Priorizar la privacidad del usuario sobre el análisis detallado del tráfico

Ejemplo de código

Visitar Sitio Externo

Combinando las etiquetas

Para máxima protección y flexibilidad, es una práctica estándar combinar «noopener» y «noreferrer» juntos:

Maximizando la seguridad: Este enfoque aborda tanto el riesgo de manipulación de pestañas como las posibles preocupaciones de privacidad o análisis en un solo paso.

Ejemplo de código

<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">Visit External Site</a>

WordPress, Elementor y «noopener noreferrer»

Comportamiento predeterminado de WordPress

WordPress, conocido por su compromiso con la seguridad, adopta una postura proactiva sobre las etiquetas «noopener noreferrer». Esto es lo que necesitas saber:

  • Inclusión automática: Desde la versión 5.1 de WordPress, «noopener noreferrer» se agrega automáticamente a todos los enlaces configurados para abrirse en una nueva pestaña o ventana. Esto asegura que incluso los propietarios de sitios web sin conocimientos técnicos profundos estén protegidos contra vulnerabilidades comunes.

Configuraciones de enlaces en Elementor

Elementor, el principal constructor de sitios web de WordPress, ofrece controles visuales intuitivos para simplificar la gestión de enlaces, incluida la opción de abrir enlaces en nuevas pestañas:

  • Facilidad de uso: Dentro del editor de Elementor, cuando habilitas la opción «Abrir en nueva pestaña» para cualquier enlace (botones, texto, imágenes), Elementor inserta automáticamente «noopener noreferrer» en segundo plano.
  • Seguridad fácil de usar: Esta integración permite a los usuarios de Elementor crear una experiencia web más segura y amigable sin editar manualmente el código HTML.

Consideraciones y mejores prácticas de SEO

«nofollow» vs. «noreferrer»

Aunque ambas etiquetas impactan los enlaces, es crucial recordar que sirven para propósitos distintos:

«nofollow» (rel=»nofollow»): Esta etiqueta instruye principalmente a los motores de búsqueda para que no sigan el enlace ni pasen ningún «link juice» (poder de clasificación) al sitio web de destino. A menudo se usa para:

  • Enlaces pagados o contenido patrocinado
  • Sitios web no confiables o comentarios generados por usuarios

«noreferrer»: Enfocado en la seguridad, esta etiqueta oculta la información del referente para la privacidad y la protección del usuario contra exploits.

Impacto en el tráfico de referencia

Entender cómo «noreferrer» puede afectar los análisis es clave para mantener información precisa sobre el tráfico de tu sitio web:

Atribución de tráfico: Dado que «noreferrer» oculta el sitio web de origen, estas visitas pueden aparecer como «tráfico directo» en plataformas de análisis como Google Analytics, lo que dificulta rastrear de dónde provienen los clics.

Soluciones y alternativas:

  • Parámetros UTM: Enlaces cuidadosamente elaborados con códigos UTM ayudan a preservar los detalles de seguimiento incluso con «noreferrer» en su lugar.
  • Plataformas avanzadas de análisis: Algunas soluciones pueden reconocer automáticamente fuentes de referencia conocidas.

Equilibrando seguridad y funcionalidad

La clave es tomar decisiones informadas sobre cuándo priorizar la seguridad sobre la atribución meticulosa del tráfico:

  • Priorizar la seguridad: Siempre usa «noopener noreferrer» en enlaces externos para proteger a tus visitantes y la reputación de tu sitio web.
  • Uso estratégico de «noreferrer»: Si los datos de referencia detallados son indispensables para enlaces particulares (por ejemplo, seguimiento de campañas en profundidad), sopesa los posibles riesgos antes de eliminar la etiqueta «noreferrer».
  • Enlaces internos: Dado que controlas tu propio sitio web, generalmente no necesitas «noopener noreferrer» en enlaces internos por razones de seguridad.

Cuándo usar «noopener noreferrer»

Enlaces externos

  • La regla de oro: Como mejor práctica de seguridad, siempre aplica «noopener noreferrer» a cualquier enlace que conduzca a sitios web que no posees o controlas. Esto se aplica a enlaces en tus publicaciones de blog, barras laterales, navegación, etc.
  • Por qué es importante: No puedes garantizar las prácticas de seguridad o las intenciones de cada sitio web externo. La protección proactiva minimiza el riesgo de que tu sitio y los visitantes se vean comprometidos debido a vulnerabilidades que no puedes influenciar.

Enlaces de Afiliados

Seguridad y análisis: Los enlaces de afiliados, aunque necesarios para las estrategias de monetización, requieren atención adicional:

  • Seguridad: Protégete a ti mismo y a tus visitantes de la posible manipulación por parte de socios afiliados.
  • Seguimiento: Usa parámetros UTM junto con «noreferrer» para preservar los detalles de seguimiento de campañas mientras priorizas la seguridad.

Contenido Generado por el Usuario

  • La importancia de la vigilancia: Cuando tu sitio permite comentarios, foros o cualquier forma de contenido enviado por usuarios que incluya enlaces, actores maliciosos pueden insertar enlaces dañinos.
  • Protección automatizada: Muchas plataformas de sitios web pueden agregar automáticamente «noopener noreferrer» a los enlaces generados por usuarios. Revisa tus configuraciones y usa plugins si es necesario para aplicar esta capa de seguridad.

Sitios Web No Confiables

  • Procede con precaución: Si te encuentras enlazando a un sitio web del cual no estás seguro, incluso si es con fines informativos/comparativos, «noopener noreferrer» ofrece una capa adicional de seguridad.
  • Priorizando la reputación de tu sitio: Proteger a tus visitantes de posibles peligros fortalece la confianza que tienen en tu sitio web.

Más allá de «noopener noreferrer»

Atributos de Seguridad Adicionales Relacionados con Enlaces

Aunque «noopener noreferrer» son las estrellas de la seguridad de enlaces, vale la pena mencionar otros atributos para casos de uso específicos:

  • rel=»ugc» Para enlaces de contenido generado por usuarios, esta etiqueta señala a los motores de búsqueda que no necesariamente respaldaste el contenido enlazado.
  • rel=»sponsored». Se usa para enlaces pagados o patrocinados para asegurar la transparencia tanto para los usuarios como para los motores de búsqueda.

Conclusión

En el paisaje interconectado de la web, entender conceptos aparentemente simples como «noopener noreferrer» te capacita para crear una experiencia en línea más segura y optimizada. Al priorizar prácticas de enlace responsables, proteges tu sitio web, sus visitantes y tu reputación en línea.