rel=noopener noreferrer: Práctica de seguridad para enlaces externos
Muchos usuarios de WordPress pueden notar fragmentos de código misteriosos que aparecen en sus Enlaces externos Al examinar el HTML de su sitio, el código "rel="noopener noreferrer"" aparece con frecuencia sin intervención directa del propietario del sitio, lo que genera dudas sobre su propósito y sus posibles implicaciones SEO.
Estas etiquetas añadidas automáticamente no son preocupantes desde el punto de vista del SEO. WordPress implementa estos atributos en enlaces externos en ciertas circunstancias como práctica estándar. Los motores de búsqueda los comprenden perfectamente y no afectan negativamente la indexación ni el posicionamiento de tu sitio web en los resultados de búsqueda.
Que es rel="noopener noreferrer"?
El rel="noopener noreferrer" Es un atributo HTML diseñado específicamente para enlaces externos en su sitio web. Este atributo consta de dos componentes independientes que funcionan de forma independiente:
- rel="noopener"
- rel="sin referencia"
Estos componentes influyen en cómo los sitios web externos interactúan con su sitio, aunque cada uno tiene un propósito distinto.
Al implementar este atributo, aparece en su código HTML de la siguiente manera:
<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">
Comprobar si tus enlaces contienen este código es sencillo. Puedes abrir tu editor de código del sitio web y utilice la función "Buscar" del navegador para buscar rel="noopener noreferrer", o vea cualquier página web, haga clic derecho, seleccione “Inspeccionar” y busque el código en la consola del desarrollador.
El segundo método resulta especialmente útil para examinar sitios web que no son de su propiedad ni administración. Esto permite a los desarrolladores y propietarios de sitios verificar la correcta implementación de los atributos de seguridad en los enlaces externos de sus páginas web.
Que es rel="sin referencia"?
El atributo rel="noreferrer" funciona como mecanismo de privacidad en los enlaces HTML, impidiendo la transmisión de información de referencia cuando los visitantes navegan de su sitio a otro. Al implementarlo, este atributo HTML oculta su sitio web como fuente de tráfico en las herramientas de análisis del sitio de destino.
Normalmente, cuando alguien hace clic en un enlace de tu sitio web, el sitio de destino puede identificar tu dominio como fuente de tráfico. Al añadir rel=”noreferrer” a tu enlace, esta identificación se bloquea. En lugar de aparecer como tráfico de referencia en plataformas de análisis como Google Analytics, estos visitantes se registran como tráfico directo.
El atributo se puede implementar de dos maneras:
<a href="https://examplesite.com" target="_blank" rel="noreferrer">
O sin abrir en una nueva pestaña:
<a href="https://examplesite.com" rel="noreferrer">
Esta información de referencia oculta podría explicar los picos misteriosos en el tráfico directo que algunos propietarios de sitios web notan en sus análisis.
Cuándo usar rel=”noreferrer” en enlaces externos
Existen varias razones estratégicas para implementar el atributo rel=”noreferrer” en sus enlaces salientes:
- Enlaces de la competencia:Al vincularse con competidores y preferir mantener su datos de referencia de inversores privados
- Sitios web no confiables:Al vincularse a sitios en los que no confía plenamente
- Problemas relativos a la privacidad:Cuando desea mantener la privacidad del usuario al no compartir información de la fuente de tráfico
Añadir este atributo es sencillo: simplemente incluye rel=”noreferrer” en el HTML de tu enlace, como se muestra arriba. Si ya abres enlaces externos en nuevas pestañas, incorporar este código requiere un esfuerzo mínimo.
Que es rel="noopener"?
El atributo rel=”noopener” es una medida de seguridad crucial para sitios web que utilizan enlaces externos. Este atributo HTML ayuda a proteger su sitio web de un sofisticado vector de ataque dirigido a los usuarios a través de páginas enlazadas. Si se implementa correctamente, impide que sitios web maliciosos accedan a su página a través de la propiedad de JavaScript window.opener.
Cómo proteger su sitio del secuestro inverso de pestañas
El secuestro inverso de pestañas representa una amenaza de seguridad importante que ocurre cuando los enlaces se abren en nuevas pestañas. Sin la protección adecuada, los atacantes pueden explotar la relación window.opener para redirigir la página original a un sitio fraudulento diseñado para robar información.
Este ataque es particularmente peligroso porque los usuarios suelen confiar en páginas que ya han visitado. Al regresar a lo que consideran su sitio legítimo, podrían, sin saberlo, proporcionar información confidencial a los atacantes.
Cómo funciona el ataque:
- El usuario hace clic en un enlace externo de su sitio que se abre en una nueva pestaña
- El contenido de la nueva pestaña incluye código malicioso
- Este código usa window.opener para redirigir su página original
- Cuando los usuarios regresan a la pestaña original, encuentran un sitio de phishing.
Afortunadamente, agregar rel=”noopener” a los enlaces externos rompe esta conexión, evitando que la nueva página manipule su página original.
Cuándo usar rel=”noopener” con enlaces internos
Para enlaces a páginas dentro de su propio dominio, rel=”noopener” generalmente no es necesario. Los enlaces internos representan un riesgo mínimo de seguridad, ya que usted controla tanto la página de origen como la de destino.
Consideraciones importantes:
- WordPress agrega automáticamente rel=”noopener” a los enlaces externos que se abren en nuevas pestañas
- La implementación manual es necesaria en plataformas que no sean WordPress
- El atributo rel="noreferrer" tiene un propósito diferente y puede afectar el seguimiento analítico.
Recuerda que los enlaces internos no requieren estos atributos de seguridad porque navegan dentro de tu entorno controlado. Concéntrate en aplicar rel=”noopener” a los enlaces externos, especialmente a aquellos que apuntan a sitios web en los que no confías plenamente o que no controlas.
Usando rel="noopener noreferrer" en WordPress
WordPress agrega automáticamente atributos de seguridad a los enlaces externos cuando los configura como abrir en una pestaña nuevaEste comportamiento ayuda a proteger su sitio web y a mantener una buena experiencia de usuario. Cuando los visitantes hacen clic en estos enlaces, permanecen en su sitio mientras el nuevo contenido se carga por separado.
La diferencia de código es significativa. Un enlace externo estándar se ve así:
<a href="https://examplesite.com">Example Link</a>
Pero cuando habilitas la opción “abrir en una nueva pestaña”, WordPress la cambia a:
<a href="https://examplesite.com" target="_blank" rel="noopener noreferrer">Example Link</a>
El target="_blank" La instrucción abre la nueva pestaña, mientras que la rel Los atributos ofrecen importantes ventajas de seguridad. Puede verificarlos inspeccionando el HTML de cualquier enlace externo en sus páginas publicadas.
¿Puedes eliminarlo?
Eliminar estos atributos es sencillo si no te importa que los enlaces se abran en la misma pestaña. Simplemente desmarca la opción "Abrir en una nueva pestaña" en el editor de WordPress y WordPress generará un enlace estándar sin los atributos adicionales.
Sin embargo, Eliminar solo una parte del código mientras se mantienen los enlaces que se abren en nuevas pestañas es más desafianteWordPress agrega estos atributos automáticamente por razones de seguridad, sin un interruptor incorporado.
Puedes intentar eliminarlo manualmente noreferrer Parte del código a través del editor, lo que permitiría que el sitio de destino lo viera como referencia en sus análisis. El proceso implica:
- Abrir el editor de código de WordPress
- Localizar el enlace HTML específico
- Editar los atributos directamente
El noopener Sin embargo, este atributo es mucho más difícil de eliminar permanentemente. Incluso después de eliminarlo manualmente, WordPress suele volver a añadirlo al publicar o actualizar la página. Esta persistencia existe porque noopener Proporciona protección crítica contra posibles ataques de seguridad.
En este caso, WordPress prioriza la seguridad sobre la personalización completa.
Para aquellos decididos a modificar este comportamiento, las soluciones avanzadas implican código personalizado en su tema o complementos especializados, aunque este enfoque no se recomienda para la mayoría de los usuarios debido a implicaciones de seguridad.
La mayoría de los navegadores ahora incluyen protección automática contra Noopener
A partir de 2025, la mayoría de los navegadores web populares implementaron la protección automática "noopener" para enlaces externos, lo que redujo la necesidad de implementación manual por parte de los desarrolladores. Esta evolución en seguridad comenzó con Safari en 2018, sentando un precedente para otros navegadores.
Firefox se unió a esta iniciativa de seguridad en julio de 2020, añadiendo protección automática contra posibles ataques de manipulación de ventanas. El cambio más significativo se produjo a principios de 2021, cuando todos los navegadores basados en Chromium, incluidos Chrome, Edge y Brave, incorporaron esta función a su navegador estándar. protocolos de seguridad.
Cronología del navegador para Noopener automático:
- Safaris: 2018
- Firefox: julio de 2020
- Navegadores Chromium (Chrome, Edge, Brave): principios de 2021
Esta protección a nivel de navegador crea una red de seguridad importante, que impide que sitios maliciosos manipulen la página original a través del window.opener propiedad. A pesar de este avance, los desarrolladores web deberían seguir implementando rel="noopener" manualmente por dos razones clave:
- Para proteger a los usuarios de navegadores menos comunes
- Para mantener prácticas de seguridad de defensa en profundidad
El pequeño porcentaje de usuarios de Internet que utilizan navegadores alternativos sigue siendo vulnerable sin protección explícita en su código.
Hablemos de éxito 🏆
Llámenos hoy al 1800 840 999 para comenzar.
El dolor de ipsum de Lorem se sienta amet, consectetur adipiscing elit. Ut elit tellus, luctus null ullamcorper mattis, pulvinar dapibus leo.