La seguridad del sitio web es y siempre ha sido una de las principales preocupaciones de todos los propietarios de sitios web de WordPress. A medida que ha aumentado la cantidad de enlaces externos que cualquier sitio puede tener, se volvió importante contar con una capa de seguridad que haga que su uso sea seguro. Disponer de una herramienta que garantice la seguridad de su sitio web frente a ataques maliciosos de piratas informáticos que quieran explotar esos enlaces. La versión 4.7.4 de WordPress que salió en 2017 introdujo una función útil: los atributos HTML rel=”noopener” y rel=”noreferrer”.
Esta característica generó muchas controversias y estuvo sujeta a conceptos erróneos cuando se introdujo. Para evitar eso, cada propietario de un sitio web debe comprender el propósito y los efectos de los atributos rel=”noopener” y rel=”noreferrer” en WordPress. Por ello, hemos dedicado este artículo a dar respuesta a diferentes preguntas que nuestros lectores puedan tener:
Siempre que agregue un enlace al contenido de su sitio web, puede elegir si desea abrirlo en la misma pestaña o en una nueva. Con los enlaces externos, la elección habitual es tener los enlaces abiertos en una pestaña separada, ya que no desea que los visitantes abandonen su sitio web. Y cuando organice enlaces para que se abran en una nueva pestaña, tendrán un atributo de destino HTML que se establece en «_blank». Esos enlaces también tendrán, de forma predeterminada, dos valores adicionales agregados al atributo rel HTML: no abre y sin referencia. En esta sección, vamos a echar un vistazo más de cerca al atributo rel=”noopener”.
En general, los enlaces que configures para abrir en una nueva pestaña tendrán la siguiente estructura HTML:
<a href="https://qodeinteractive.com/magazine/wordpress-noopener-noreferrer/link-url-goes-here" target="_blank" rel="noopener noreferrer">link text goes here</a>
Tenga en cuenta que este es un ejemplo y un enlace real tendrá la URL y el texto del enlace correctamente completados.
Y se vería un poco así:
Agregar el atributo rel a la etiqueta sirve para especificar la relación entre su sitio web y la página web o el documento de destino.
El propósito del valor noopener es evitar que sitios web maliciosos externos accedan al sitio web donde se encuentra el enlace. Esto está diseñado específicamente para combatir ataques de phishing maliciosos llamados Tabnabbing invertido. Es un tipo de ataque de piratería que se describe mejor de la siguiente manera: la página de destino del enlace, a menudo llamada página secundaria, puede contener código malicioso. Ese código se puede emplear para enviar a los usuarios a una copia de la página donde se originó el enlace. Entonces, en lugar del original, los usuarios de la página principal son reasignados usando window.opener.location.assign() a una página principal falsa. Luego, la página principal falsa se puede usar para adquirir información confidencial del usuario o propagar malware.
Ambos valores de atributo rel son bastante beneficiosos ya que sirven para mejorar la seguridad del sitio web. Sin embargo, existe la preocupación entre los propietarios de sitios web de que estos valores puedan afectar negativamente la clasificación SEO de su sitio. Este es un error común que abordaremos ahora.
La creencia errónea se debe principalmente a que las personas confunden los atributos rel=”noopener” y rel=”nofollow”. Solo el atributo rel=”noopener” se relaciona con la seguridad del sitio web. Le dice a los navegadores que dejen de usar la propiedad javascript window.opener. Esto no afecta al SEO de ninguna manera, ya que los motores de búsqueda no lo consideran relevante al clasificar un sitio web. Por otro lado, el rel=”nofollow” es muy relevante para el ranking SERP de un sitio web. El atributo rel=”nofollow” le dice a los motores de búsqueda que no sigan el enlace, lo que significa que su sitio no pasará ninguna autoridad de enlace al destino del enlace.
El atributo rel=“noreferrer” tiene un propósito similar al de rel=”noopener”. Evita que el navegador recopile información sobre la página principal (también conocida como enlace de referencia) y la pase a una página secundaria. Esencialmente, oculta información sobre la referencia cuando se hace clic en un enlace. Si bien esto no tiene ningún efecto en su SEO, puede afectar su análisis. Dado que rel=”noreferrer” oculta la información de referencia del enlace, las herramientas de análisis no pueden determinar de dónde proviene un usuario. Eso significa que no sabrá la fuente de su tráfico entrante.
Tanto el rel=”noreferrer” como el rel=”noopener” sirven para mejorar la seguridad de su sitio. De hecho, el valor noreferrer se agregó a WordPress como respaldo porque el valor noopener no siempre fue compatible con todos los navegadores.
Al igual que con rel=”noopener”, los usuarios a veces pueden confundir los atributos rel=“noreferrer” y rel=”nofollow”. Sin embargo, hay una diferencia significativa. Los enlaces con el atributo rel=”noreferrer” no pasan información de referencia mientras pasan el link juice, que es exactamente lo contrario de lo que hacen los enlaces rel=”nofollow”.
Otra preocupación común que tienen los propietarios de sitios web de WordPress es si rel=”noreferrer” afecta sus enlaces de afiliado. A pesar de no pasar la información de referencia a la página secundaria, el atributo rel=”noreferrer” no afecta los enlaces de afiliados. Esto se debe a que la mayoría de los programas de afiliados incluyen URL de referencia que contienen ID únicos. Esa ID de afiliado, contenida en la URL dada, se utiliza para el seguimiento y garantiza que obtendrá su bien ganada comisión.
Sin embargo, la mayoría de los vendedores afiliados a menudo usan complementos de encubrimiento para ocultar las URL. Esto puede deberse a que no quieren divulgar dicha información públicamente. O prefieren ocultar los enlaces permanentes similares a consultas largas (que parecen url-sitio-web-afiliado/productos/?id_producto=x&afiliado=y, siendo x e y números).
Los complementos de encubrimiento ocultarán los parámetros de consulta que, de lo contrario, serían visibles en la URL. Sin embargo, su efecto es cosmético y no impide que los usuarios sean redirigidos al sitio web afiliado apropiado, o que usted obtenga su comisión.
Es posible que los enlaces con rel=”noreferrer” no afecten su SEO o los enlaces de afiliados, pero sí juegan un papel en el análisis. Es posible que esté ejecutando varios sitios interconectados o que tenga un sitio con varios subdominios y desee crear vínculos entre ellos. En ese caso, podría beneficiarle saber qué página y enlace atrajeron a los usuarios y los inspiraron a participar más. Alternativamente, es posible que otros propietarios de sitios web sepan que los está vinculando para que consideren vincularlo nuevamente.
Cualquiera que sea el motivo, si decide eliminar el atributo rel=”noreferrer” de su sitio, debe usar un código personalizado. Eso es porque este atributo está actualmente integrado en WordPress por defecto. Explicaremos cuidadosamente el proceso para eliminar el atributo rel=”noreferrer” y luego podrá decidir si desea implementarlo o no.
Como requisito para este proceso, deberá deshabilitar el editor de Gutenberg. Una forma de hacerlo es instalando un complemento llamado Editor clásico. Luego, para eliminar el valor de noreferrer, deberá agregar algo de código, ya sea en el archivo functions.php de su tema o dentro de su complemento específico del sitio.
Le mostraremos los pasos usando un complemento específico del sitio. Asegúrese de repasar su conocimiento de FTP, ya que lo necesitará en pasos posteriores. Además, le recomendamos encarecidamente que haga una copia de seguridad de su sitio web antes de continuar, por si acaso.
Primero, conectarse al servidor utilizando sus credenciales de FTP y navega a tu directorio raíz de WordPress, a menudo llamado public_html.
Entonces, navegue al directorio wp-content/themes y haga clic en el directorio de su tema Para abrirlo.
Encuentra el archivo functions.php dentro del directorio de tu tema, haga clic derecho en él, y seleccione la opción Ver/Editar.
Abra el archivo con su editor de texto preferido e inserte el siguiente código al final del archivo.
//This code removes the noreferrer value from the rel attribute of your new or updated links
function removing_noreferrer_link_rel( $rel_values ) {
return 'noopener';
}
add_filter( 'wp_targeted_link_rel', 'removing_noreferrer_link_rel', 999 );
Después, guardar los cambios hiciste y subir el archivo de nuevo al servidor, que anulará el archivo anterior.
Es posible que haya notado que agregamos un comentario antes del código. Esta es una buena práctica y puede ayudarlo a realizar un seguimiento del código que agrega y lo que hace. En este caso, el código elimina el valor noreferrer de los enlaces nuevos o actualizados, lo que significa que serán los únicos afectados por este cambio.
También puede eliminar el valor noreferrer de los enlaces existentes si lo necesita. Eso se puede hacer manualmente, usando el Editor clásico, o automáticamente, usando un complemento de alteración de base de datos como Mejor Buscar Reemplazar. Dado que usar un complemento es mucho más rápido y fácil que hacerlo manualmente, le sugerimos que opte por realizar una búsqueda y reemplazo en su sitio web de WordPress. Con él, simplemente puede insertar noreferrer en el campo Buscar cadena y mantener el campo Reemplazar vacío.
Pensamientos finales
Desde sus inicios, WordPress siempre ha mejorado y ha tratado de abordar cualquier problema de seguridad que pudiera surgir. Esto condujo a la introducción de los atributos rel=”noopener” y rel=”noreferrer” para los enlaces que se abren en una nueva ventana.
Estos atributos contribuyen a la seguridad general de su sitio, lo que lo ayuda tanto a usted como a sus usuarios. El uso de rel=”noopener” y rel=”noreferrer” en WordPress no afectará su ranking SERP o la experiencia de usuario de su sitio, simplemente hará que la experiencia de navegación sea segura y divertida para todos. Entonces, si tenía algún concepto erróneo sobre estos atributos, con suerte, este artículo logró aclararlo.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
