¿Qué es rel=”noopener” en WordPress? (Explicado)

Una vez tuvimos un cliente cuyos visitantes del sitio eran redirigidos a sitios web sospechosos después de hacer clic en enlaces externos. El problema era un pequeño fragmento de código faltante que creaba una gran brecha de seguridad.

Es un pensamiento aterrador, pero esta vulnerabilidad puede afectar a cualquier sitio de WordPress. La jerga técnica como rel="noopener" puede parecer confusa, dejándote preocupado sobre si tu sitio web es realmente seguro para tus visitantes.

Aquí en WPBeginner, hemos asegurado miles de sitios y hemos aprendido que estos pequeños detalles marcan una gran diferencia. Vamos a explicar qué es rel="noopener" en términos sencillos y por qué es tan importante.

Veamos cómo este pequeño atributo te protege a ti y a tus usuarios.

¿Qué es rel=”noopener” en WordPress?

Cuando agrega enlaces a su sitio web de WordPress, puede usar atributos HTML para controlar lo que sucede cuando se hace clic en el enlace.

Por ejemplo, cuando crea un enlace, hay un interruptor que le permite abrirlo en una nueva pestaña.

El código HTML generado por WordPress para este enlace se ve así:

<a href="http://example.com" target="_blank" rel="noreferrer noopener">external link</a>

Observe que se han agregado algunos atributos HTML al enlace: rel="noopener" y rel="noreferrer". Estos atributos se agregan para abordar una vulnerabilidad de seguridad.

Cuando usa target="_blank" para que un enlace se abra en una nueva pestaña, sucede algo potencialmente inesperado en segundo plano por defecto. La nueva pestaña en realidad obtiene una especie de conexión con la pestaña original en la que estaba.

Esta conexión se realiza a través de algo en los navegadores web llamado window.opener. La página en la pestaña nueva puede acceder e incluso controlar ciertas propiedades de la pestaña original, como cambiar la dirección de la página (window.opener.location).

Esto crea una vulnerabilidad de seguridad.

Imagina que haces clic en un enlace en un sitio web de confianza y se abre una página maliciosa en una nueva pestaña. Debido a esta conexión window.opener, esa página maliciosa podría potencialmente cambiar la página original de confianza que estabas viendo por una página de inicio de sesión falsa (una estafa de phishing), engañándote cuando vuelvas a la pestaña original.

El atributo de enlace noopener está diseñado para prevenir este riesgo de seguridad específico.

Cuando agregas rel="noopener" a un enlace que se abre en una nueva pestaña, le dices al navegador que no cree esa conexión window.opener entre las dos pestañas. Esto protege a tus usuarios de estafas y intentos de phishing.

¿Cómo afecta rel=”noopener” al SEO de tu WordPress?

No afecta.

Aunque el atributo rel="noopener" mejora la seguridad de tu sitio de WordPress, algunos usuarios evitan usarlo porque piensan que afectará su SEO de WordPress.

Pero eso es solo un mito.

No tiene ningún impacto en las clasificaciones SEO de tu sitio ni en el rendimiento general de tu WordPress.

¿Cuál es la diferencia entre “noopener” y “nofollow”?

Es fácil confundir rel="noopener" con rel="nofollow". Sin embargo, son atributos completamente separados.

El atributo noopener evita que tu sitio web sea hackeado entre sitios y mejora la seguridad de WordPress.

Por otro lado, el atributo nofollow evita que tu sitio web transfiera "link juice" de SEO al sitio web enlazado.

Los motores de búsqueda buscan y consideran el atributo nofollow al seguir un enlace en tu sitio web. Sin embargo, no le dan ninguna consideración a la etiqueta noopener.

El atributo nofollow le dice a los motores de búsqueda que no pasen ninguna autoridad SEO al sitio web al que estás enlazando. Si bien el editor de bloques de WordPress tiene un interruptor incorporado para agregar nofollow a un enlace, a menudo se necesita un plugin para un control más avanzado.

Por ejemplo, es posible que desees aplicar automáticamente la etiqueta nofollow a todos los enlaces externos de tu sitio, que es donde un plugin de SEO se vuelve esencial.

Para obtener más información, consulta nuestro artículo sobre cómo agregar título y nofollow a los enlaces en WordPress.

¿Afecta rel=\"noreferrer\" a los enlaces de afiliados en WordPress?

El atributo rel=\"noreferrer\" no afecta a los enlaces de afiliados en WordPress. Algunos usuarios creen que sí porque rel=\"noreferrer\" evita que la información del referente se pase a la nueva pestaña.

Sin embargo, la mayoría de los programas de afiliados te proporcionan una URL única que tiene tu ID de afiliado. Esto significa que tu ID de afiliado se pasa como un parámetro de URL para que el otro sitio web lo rastree.

En segundo lugar, la mayoría de los afiliados utilizan un plugin para ocultar enlaces para sus enlaces de afiliados.

Con el ocultamiento de enlaces, el enlace de afiliado en el que hacen clic tus usuarios es en realidad la propia URL de tu sitio web, que luego redirige a los usuarios a la URL de destino.

¿Cómo se desactiva rel=\"noopener\" en WordPress?

No hay necesidad de eliminar rel=\"noopener\" de los enlaces en tu sitio web. Es bueno para la seguridad de tu sitio web y no tiene ningún impacto en el rendimiento o el SEO de tu sitio web.

Sin embargo, si debes eliminarlo, entonces tendrás que deshabilitar el editor de bloques de Gutenberg en WordPress y usar el editor clásico.

Eso es porque si eliminas rel=\"noopener\" del enlace manualmente, el editor de bloques lo agregará automáticamente de nuevo para mantener tu sitio web seguro.

Una vez que el editor de bloques esté deshabilitado, necesitarás agregar un fragmento de código al archivo functions.php de tu tema o al plugin WPCode (recomendado). Puedes aprender a usar el Plugin gratuito WPCode en nuestra guía sobre cómo agregar fácilmente código personalizado en WordPress.

Simplemente copia el siguiente código en un nuevo fragmento PHP:

add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}

Asegúrate de activar el interruptor 'Activo' y luego haz clic en el botón 'Guardar fragmento'.

Esto evitará que WordPress agregue rel="noopener" a los enlaces nuevos. También necesitarás editar manualmente los enlaces antiguos para eliminar el atributo.

Para tener aún más control sobre los atributos de tus enlaces, recomendamos usar el plugin All in One SEO (AIOSEO). AIOSEO te permite agregar fácilmente atributos como nofollow o sponsored directamente dentro del editor de WordPress, ayudándote a administrar tus enlaces externos para las mejores prácticas de SEO.

Preguntas frecuentes sobre rel=”noopener”

Aquí tienes respuestas a algunas de las preguntas más comunes que recibimos sobre el atributo “noopener” en WordPress.

1. ¿Cuál es el propósito principal de usar rel=”noopener”?

El propósito principal de rel="noopener" es la seguridad. Evita que una nueva pestaña pueda controlar la pestaña original que la abrió, lo que protege a tus visitantes de estafas de phishing maliciosas.

2. ¿Es rel=”noopener” bueno para el SEO?

El atributo rel="noopener" no tiene un impacto directo, ni positivo ni negativo, en el SEO de tu sitio web. Su función es puramente de seguridad, y los motores de búsqueda no lo utilizan como factor de clasificación.

3. ¿Debo eliminar rel=”noopener” de mis enlaces?

No, no hay ninguna buena razón para eliminar rel="noopener". Proporciona un beneficio de seguridad importante sin efectos secundarios negativos en el SEO o el rendimiento del sitio, por lo que es mejor dejarlo en su lugar.

4. ¿WordPress agrega rel=”noopener” automáticamente?

Sí, WordPress agrega automáticamente rel="noopener" a los enlaces configurados para abrirse en una nueva pestaña. Esta importante característica de seguridad se introdujo por primera vez en WordPress 4.7.4 y es una parte estándar del editor de bloques moderno.

Guías expertas sobre el uso de enlaces en WordPress

Esperamos que este artículo te haya ayudado a aprender sobre rel="noopener" en WordPress. También te pueden interesar otras guías sobre el uso de enlaces en WordPress:

• Guía para Principiantes sobre Cómo Agregar un Enlace en WordPress
• Cómo abrir enlaces externos en una ventana o pestaña nueva con WordPress
• Cómo agregar enlaces Nofollow en WordPress (Guía sencilla para principiantes)
• Cómo Agregar Título y NoFollow al Popup de Insertar Enlace en WordPress
• Cómo aplicar NoFollow a todos los enlaces externos en WordPress
• Cómo rastrear clics de enlaces y clics de botones en WordPress (Manera fácil)
• Cómo rastrear enlaces salientes en WordPress
• Cómo Cambiar el Color del Enlace en WordPress (Guía para Principiantes)
• Enlazado Interno para SEO: La Guía Definitiva de Mejores Prácticas
• Cómo precargar enlaces en WordPress para velocidades de carga más rápidas
• Cómo encontrar y corregir enlaces rotos en WordPress (paso a paso)
• Los mejores plugins de enlaces internos para WordPress (automático + manual)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.