¿Qué es rel=noopener noreferrer? en html y wordpress

Índice de contenido
  1. ¿Qué es rel=noopener noreferrer? en html y wordpress
  2. ¿Cómo puedo saber que uso el noopener noferrrer?
    1. Ejemplo html: target=_blank rel=noopener noreferrer:
  3. ¿Cómo puedo usar este atributo en elementor, divi y oxygen builder?
    1. Elementor
    2. Divi
    3. Oxygen builder
    4. Bricks builder
  4. Resumen:

¿Qué es rel=noopener noreferrer? en html y wordpress

No te asustes que esto no es malo, pero si es malo si no lo usas con sentido común.

¿Qué es rel=noopener noreferrer? en html y wordpress
rel= noreferrer noopener

Si no te habías preguntado nunca ¿Qué es el bendito rel=noopener noreferrer? en html y wordpress, o noopener noreferrer html, rel="noopener noreferrer", rel= noopener noreferrer html; Es un atributo del html y que si no te haz pasado un curso de desarrollo de 60 hr para saber eso, bueno no es necesario ya que al leer este post podrás usarlo como todo un profesional.

Si eres un usuario de wordpress no lo habrás visto nunca, pero ¿Para qué sirve?, Porque existe y ¿para que se utiliza en la actualidad? si realmente las etiquetas necesitan eso como regla fundamental para la seguridad de tu sitio, y si también para el seo de la web.

 

Si quieres saber de las mejores herramientas de IA entra aquí
https://ultimastendencias.net/las-mejores-herramientas-de-ia

Si eres usuario avanzado quieres saber un poco más links types: noopener date una vueltica por la web de mozilla para desarrolladores.

¿Cómo puedo saber que uso el noopener noferrrer?

En wordpress podrás irte a la sección de post o pagina y probar escribiendo prueba y seleccionas toda la palabra darle clic a los 3 puntitos y te saldrá colocar la url veras la opción de abrir en otra pagina y el no follow, en este caso le daremos solo esas dos opciones.

rel= noopener noreferrer html

Luego veras la siguiente forma en la imagen a continuación

que-es-noopener-noreferrer-en-html-y-wordpress2

ya guardado el link puedes guardar e ir a la vista previa, e ir y dar clic en botón derecho y seleccionar inspeccionar el navegador y seleccionar la palabra que se creo con enlace para analizar.

?También te podría interesar?: Posicionamiento web económico en Madrid

noopener noreferrer html

Como verás la consola del navegador en elements se aprecia la etiqueta html con los atributos ya mencionados, pero aprendamos un poco más.

Para ser más claro, te pondré un ejemplo de la sintaxis de una etiqueta html simple para el caso que veas una palabra por ejemplo proyectos y esta tiene un enlace.

Conoce más sobre uno de los mejores hosting del mercado

Ejemplo html: target=_blank rel=noopener noreferrer:

<p><a href=”https://imecanico.top” target=”_blank” rel=”noreferrer noopener nofollow” class=””>Proyectos</a></p>

1) href= es el atributo para el enlace

2) target=”_blank” es para dar una orden de abrir una pestaña

3) rel=”noreferrer noopener nofollow”, aca si puedes revisar la imagen del caso anterior solo seleccione la nueva pestaña y el no follow, y ¿Por qué ahora me sale noreferrer noopener? es porque desde la versión de 4.7.4 de wordpress actualizó sus scripts para incluir esa dos palabras, por lo tanto esto conlleva a que es importante para el tema de la vulnerabilidad para cualquier enlace externo para que no se vaya ninguna información personal de nosotros.

?También te podría interesar?: Los 3 pilares fundamentales del SEO (guía)?

¿Cómo puedo usar este atributo en elementor, divi y oxygen builder?

Elementor

Para este constructor visual debes dirigirte a la sección de avanzados y buscar la pestaña de atributes como verás en la siguiente imagen, también mira el ejemplo que te he dejado abajo.

rel=noreferrer noopener

?También te podría interesar?: Las mejores 20 herramientas seo en 2023

Divi

Para este caso debes irte a la sección donde editas el texto y buscar las propiedad visual y seleccionar el nombre a que le colocarás el enlace, darle clic al icono de enlace y se desplegará a la derecha la configuraciones para insertar un link como en el siguiente ejemplo:

rel="noopener"
rel="noopener"

y quedará de la siguiente manera para guardar como se ve en la siguiente imagen

noopener noreferrer

Y se observara el rel="noopener noreferrer" debe quedarte así

?También te podría interesar?: Guía de posicionamiento SEO

Oxygen builder

De la misma manera que los anteriores seleccionado la palabra que colocarás el link, ir a icono de enlace llenas la url, el target y el rel, así como se observa en la imagen del ejemplo:

rel noopener

Bricks builder

?También te podría interesar?: Como hacer una landing page con Chat GPT

Para finalizar manteniendo la misma manera que los ejemplos anteriores, la palabra que colocaras, debes irte directo a la sección style y abajo al final te saldrá Attibutes, así como se muestra en la imagen de abajo del ejemplo

noreferrer noopener

Resumen:

Si llegaste hasta acá ya sabes lo que es el rel noopener noreferrer, no olvides que todos los links que salgan externos que salgan de tu sitio no te olvides en utilizar este atributo, al no usarlo estas exponiendo a tu usuario y google en su algoritmo si lo detecta inmediatamente y te puede penalizar, evítalo y los resultados serán grandioso.

Me despido espero que te sirva de gran ayuda ya que al buscar este contenido como html rel noopener hay demasiada información regada, Bueno si te gusto dale abajo a la calificación 5 estrellas.

4.6/5 - (39 votos)

Te podría interesar

    4 Comentarios

  1. Luis Díaz dice:

    Muchas gracias excelente información

  2. Joel Pasache dice:

    Se puede hacer el mismo trabajo usando el bricks builder? muy bueno tu información saludos desde peru

    1. Joel, gracias por preguntar. Si pues puedes hacer de la misma forma.. pronto actualizare el post con bricks

  3. Andreina dice:

    Gracias esto me sirvió

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

Subir