La etiqueta rel=’noopener noreferrer nofollow’: Impacto en SEO y cómo aplicarla

El atributo rel en HTML, especialmente con valores como ‘noopener noreferrer’ y sus variaciones, juega un papel crucial en la seguridad web y el SEO. En HTML se utiliza para definir la relación entre el documento actual y el enlace al que está vinculado. Los valores noreferrer, noopener, y nofollow son directivas específicas que le indican al navegador cómo debe manejar los enlaces. Te lo explico en detalle:

• noreferrer: El atributo ‘noreferrer’ evita que el navegador envíe una cabecera de referencia HTTP al sitio web de destino. Esto es útil para mantener la privacidad de la página de origen, especialmente si no deseas que el sitio enlazado sepa de dónde vienen sus visitantes.
• noopener: El valor ‘noopener’, comúnmente utilizado como parte de ‘rel noopener’ o ‘rel=»noopener noreferrer»‘, ayuda a mejorar ayuda a mejorar la seguridad, al evitar que la página enlazada tenga acceso al objeto window de la página de origen. Esto es crucial para prevenir ataques de phishing y otras vulnerabilidades de seguridad.
• nofollow: Instruye a los motores de búsqueda para que no sigan el enlace. Esto puede ser beneficioso para evitar que los robots de búsqueda asocien tu sitio con contenido de baja calidad o spam.

¿Cuándo deberías utilizarlo en tu sitio web?

Pues depende de varias cosas.

En cuanto a la privacidad y seguridad, al crear enlaces hacia sitios externos, puede surgir la necesidad de mantener un margen de separación segura y privada entre tu página y la página enlazada. En este escenario, la utilización de los atributos noopener y noreferrer se presenta como una práctica altamente recomendada.

Respecto a la calidad del enlace, en casos donde se enlaza hacia sitios que podrían no ser de confianza o que poseen contenido de calidad inferior, la implementación del atributo nofollow se vuelve crucial. Este atributo asiste en la preservación de la integridad de tu sitio frente a los ojos de los motores de búsqueda, evitando que se asocie tu contenido con el contenido de baja calidad del sitio enlazado.

En el ámbito de la optimización del rendimiento, se ha sugerido por algunos expertos que el uso de noopener puede contribuir positivamente al rendimiento de tu sitio web. La razón detrás de esto es que noopener ayuda a prevenir el bloqueo del navegador que podría ocurrir debido al acceso a la ventana de la página de origen, facilitando así una experiencia de navegación más fluida y eficiente. Pero en realidad son conjeturas, no hay declaraciones explícitas de Google al respecto.

La combinación ‘noopener noreferrer’ es especialmente recomendada para enlaces externos, ya que proporciona tanto seguridad como privacidad.

¿En qué medida afecta realmente al SEO?

El atributo ‘noreferrer’, ya sea solo o en combinación como ‘noreferrer noopener’, no posee un impacto directo en el SEO de una página. Es una etiqueta que se puede utilizar sin temor a afectar la posición de la página en los resultados de búsqueda. Dicho esto también hay que decir que noreferrer sí puede tener un impacto indirecto en las estrategias de construcción de enlaces y promoción. Cuando se crea un enlace hacia otros sitios, los administradores de esos sitios pueden observar el tráfico referido en Google Analytics, lo que podría incentivarse a compartir tu contenido o incluso a enlazar tu sitio a cambio. Si se emplea noreferrer, este tráfico se registra como tráfico directo, lo cual oculta el origen del tráfico y podría disminuir las oportunidades de obtener enlaces de retroceso.

El atributo noopener no incide en el SEO, su propósito principal es mejorar la seguridad del sitio web. Ayuda a evitar vulnerabilidades como el «reverse tab nabbing», asegurando que los enlaces que dirigen a nuevas pestañas no se vuelvan una amenaza de seguridad para los visitantes del sitio.

A diferencia de noreferrer y noopener, el atributo nofollow sí tiene una relevancia significativa en el SEO. Este atributo indica a los motores de búsqueda que no deben seguir el enlace, lo cual es útil para evitar traspasar autoridad o ser asociado con sitios de contenido de baja calidad.

Implementación en WordPress

WordPress ofrece varias formas de implementar el atributo rel=»noopener noreferrer nofollow» en tus enlaces.

En esta sección, exploraremos tres métodos efectivos para añadir los atributos rel=»noopener», rel=»noreferrer», y rel=»nofollow» a tus enlaces en WordPress. Cada método tiene sus propias ventajas y se adapta a diferentes niveles de experiencia técnica.

En esta tabla te muestro las ventajas y desventajas de cada método:

Método 1: Edición Manual de HTML

1. Inicia sesión en tu panel de administración de WordPress.
2. Navega a la página o entrada donde desees agregar el atributo rel.
3. Cambia al editor de texto haciendo clic en la pestaña «Texto» en lugar de «Visual».
4. Localiza o inserta el enlace que deseas modificar y agrega el atributo rel con los valores deseados. Por ejemplo: <a href="https://ejemplo.com" rel="noopener noreferrer nofollow">Enlace de ejemplo</a>.
5. Guarda los cambios y verifica que el atributo rel se haya aplicado correctamente inspeccionando el código fuente de la página.

Método 2: Utilizar un plugin

1. Desde tu panel de administración de WordPress, ve a «Plugins» > «Añadir nuevo».
2. Busca un plugin como «WP Link Attributes» o «Better Links» y procede a instalarlo.
3. Activa el plugin tras la instalación.
4. Accede a la configuración del plugin y sigue las instrucciones para agregar el atributo rel a los enlaces deseados.
5. Guarda los cambios y verifica la implementación inspeccionando el código fuente de la página.

Método 3: Añadir código personalizado

1. Inicia sesión en tu panel de administración de WordPress.
2. Navega a «Apariencia» > «Editor de Temas» > «functions.php».
3. Copia y pega el siguiente código en el archivo functions.php:

function add_rel_attribute($link) {
    $rel_values = array("noopener noreferrer", "nofollow");
    $rel_string = implode(" ", $rel_values);
    return str_replace('<a href', '<a rel="' . $rel_string . '" href', $link);
}
add_filter('the_content', 'add_rel_attribute');

Guarda los cambios y verifica la implementación navegando a una página con enlaces y revisando el código fuente para confirmar que el atributo rel se haya añadido correctamente.

Variaciones comunes del atributo rel

El atributo rel puede tomar diferentes combinaciones de valores, cada una con propósitos específicos. Aquí exploramos las variaciones más comunes y su uso:

1. rel=»noopener noreferrer» Esta es la combinación más frecuente para enlaces externos. Proporciona tanto seguridad (noopener) como privacidad (noreferrer).
   • Uso: Ideal para cualquier enlace externo, especialmente en sitios de contenido o blogs.
   • Ejemplo: <a href=»https://ejemplo.com» rel=»noopener noreferrer»>Enlace seguro</a>
2. rel=»noreferrer noopener» Funcionalmente idéntica a «noopener noreferrer». El orden de los valores no afecta su funcionamiento.
   • Uso: Se puede usar indistintamente con «noopener noreferrer».
   • Ejemplo: <a href=»https://ejemplo.com» rel=»noreferrer noopener»>Otro enlace seguro</a>
3. rel=»nofollow noopener» Combina la directiva SEO (nofollow) con la seguridad (noopener), pero no incluye la privacidad de noreferrer.
   • Uso: Para enlaces que no quieres que los motores de búsqueda sigan, pero aún deseas mantener seguros.
   • Ejemplo: <a href=»https://ejemplo.com» rel=»nofollow noopener»>Enlace sin seguimiento</a>
4. rel=»nofollow noopener noreferrer» La combinación más completa que abarca SEO, seguridad y privacidad.
   • Uso: Para enlaces externos donde se requiere máxima precaución, como en contenido generado por usuarios.
   • Ejemplo: <a href=»https://ejemplo.com» rel=»nofollow noopener noreferrer»>Enlace completo</a>
5. rel=»noopener» Se centra únicamente en la seguridad, sin afectar la privacidad o el SEO.
   • Uso: Cuando la seguridad es la única preocupación, pero no te importa compartir la información de referencia.
   • Ejemplo: <a href=»https://ejemplo.com» rel=»noopener»>Enlace seguro básico</a>
6. rel=»noreferrer» Se enfoca en la privacidad, ocultando la información de referencia.
   • Uso: Cuando la privacidad es la principal preocupación, pero no necesariamente la seguridad.
   • Ejemplo: <a href=»https://ejemplo.com» rel=»noreferrer»>Enlace privado</a>
7. rel=»nofollow» Una directiva puramente SEO que indica a los motores de búsqueda que no sigan el enlace.
   • Uso: Para enlaces pagados, contenido generado por usuarios, o cuando no quieres respaldar el sitio enlazado.
   • Ejemplo: <a href=»https://ejemplo.com» rel=»nofollow»>Enlace sin respaldo SEO</a>

Algunas consideraciones finales

Recuerda que estas combinaciones no afectan la experiencia del usuario al hacer clic en el enlace, pero sí impactan en cómo los navegadores y motores de búsqueda manejan estos enlaces.

La elección de la combinación adecuada depende del contexto del enlace y de tus objetivos de seguridad, privacidad y SEO.

Para la mayoría de los sitios web, usar «rel=»noopener noreferrer»» en enlaces externos es una buena práctica general.

Si estás enlazando a contenido que no quieres respaldar o que podría ser de baja calidad, considera añadir «nofollow» a la combinación.

Daniel Pajuelo es ingeniero informático y SEO Senior, actualmente trabajando en Guruwalk e impartiendo clases en BIG School (antes BIGSEO Academy). Ver más