En el contexto del renderizado de una página web por parte de Google, las etiquetas <display: none> y <noscript> tienen propósitos y comportamientos diferentes, especialmente en términos de SEO y cómo Google interpreta o ignora el contenido.
¿Cuándo usar <display: none>?
Propósito: Cuando usas CSS con la propiedad display: none, el contenido permanece en el DOM (Document Object Model), pero no es visible para los usuarios. Esto se usa a menudo para elementos que no deben mostrarse en determinadas condiciones, pero que pueden ser útiles en otros momentos, como menús que aparecen con interacciones.
¿El contenido con <display: none> puede ser leído por los motores de búsqueda?
Googlebot sí puede leer el contenido que está oculto con display: none, ya que sigue presente en el HTML. Sin embargo, Google ha afirmado que podría no dar tanto peso a este contenido en términos de SEO, ya que lo considera como algo que no es relevante para los usuarios, dado que está oculto de manera intencionada. A menos que haya una buena razón para ocultar algo, es posible que Google trate este contenido con menos prioridad o incluso lo ignore si siente que se está manipulando el contenido para el motor de búsqueda.
Ejemplo:
html
<div style="display: none;">
<p>Este contenido está oculto, pero sigue en el DOM.</p>
</div>¿Google indexa contenido oculto con «display: none»?
Googlebot sí es capaz de indexar el contenido oculto con «display: none», pero ten en cuenta que no le dará la misma relevancia. Así pues, no recomiendo ocultar ningún contenido o enlaces de relevancia que puedan ser determinantes para el posicionamiento de tus contenidos.
¿Puede google penalizarme en SEO por ocultar enlaces con display:none?
Google probablemente no te penalice por ocultar enlaces internos de tu web usando display:none, ya que se considera una práctica de bajo impacto dentro del mismo sitio. Sin embargo, no es recomendable desde el punto de vista SEO, ya que si un enlace es importante, lo ideal es hacerlo visible para los usuarios. Si bien no hay una acción inmediata del equipo de web spam por esto, es mejor mejorar la visibilidad de estos enlaces a largo plazo.
Por otro lado, si estás ocultando enlaces externos, podría haber una penalización, ya que eso podría ser considerado una técnica engañosa o manipulación del PageRank, lo cual los algoritmos de Google o el equipo de web spam sí podrían detectar y sancionar.
Aquí os dejo la respuesta del propio John Mueller (Google Search Advocate) a una consulta sobre cómo recomienda actuar si nos encontramos con un enlaces ocultos mediante CSS.
John 18:33
Sí, creo que es algo que, en teoría, no nos gusta. Pero no veo que el equipo de web spam tome medidas al respecto. Porque, especialmente cuando se trata de enlaces internos de esta manera, es algo que tiene un efecto bastante sutil dentro del sitio web. Y, esencialmente, solo estás reorganizando cosas dentro de tu propio sitio web. Creo que sería más complicado si estuvieran, no sé, comprando enlaces en otro lugar y luego ocultándolos. Eso sería problemático. Eso podría ser algo que nuestros algoritmos detecten, o que incluso el equipo de web spam en algún momento podría revisar manualmente. Pero si es dentro del mismo sitio web, si está configurado como «display: none», entonces no creo que sea una gran práctica (si piensas que es un enlace importante, entonces hazlo visible para las personas) pero no será algo que haga que el equipo de web spam tome medidas y elimine el sitio o haga algo drástico.Webmaster 5 19:36
Ok, entonces en este caso, ¿dirías que lo dejemos como está?John 19:41
Del Google SEO office-hours hangout del 1 de Octubre de 2021.
Bueno, no lo dejaría como está. Lo vería como algo a mejorar a largo plazo. Sí, en el sentido de que si piensas que este es un enlace importante a una página importante, entonces simplemente sé directo al respecto. Sí, porque los usuarios también lo usarán. O tal vez si los usuarios no se preocupan por ello, o tal vez no es realmente un enlace importante. Pero no lo vería como algo que necesite una solución urgente esta semana.
¿Cuándo usar <noscript>?
Propósito: La etiqueta <noscript> está diseñada para contener contenido que será mostrado si JavaScript está deshabilitado en el navegador. Es útil para ofrecer una alternativa en sitios que dependen de JavaScript para su funcionalidad.
¿El contenido con <noscript> es leído por los motores de búsqueda?
Comportamiento de Google: Google sí lee y considera el contenido dentro de la etiqueta <noscript>, ya que, aunque Googlebot ejecuta JavaScript en la mayoría de los casos, aún reconoce que algunos usuarios podrían tener JavaScript desactivado. Sin embargo, si tu página depende de JavaScript y Googlebot no puede ejecutarlo adecuadamente, el contenido dentro de <noscript> podría ser indexado y mostrado en su lugar. Esto puede ser útil para asegurar que alguna información importante esté disponible incluso si hay problemas con la ejecución de scripts.
Ejemplo:
html
<noscript>
<p>JavaScript está desactivado. Por ello se muestra este mensaje.</p>
</noscript>Diferencias clave entre noscript y display:none en el renderizado y su impacto en SEO:
- Visibilidad para el usuario:
- <noscript>: El contenido dentro de esta etiqueta solo se muestra cuando JavaScript está deshabilitado.
- <display: none>: El contenido está presente en el código de la página, pero está oculto a la vista del usuario.
- Consideración por Google:
- <noscript>: Google considera el contenido dentro de <noscript>, especialmente si no puede ejecutar JavaScript en tu página.
- <display: none>: Google puede leer el contenido, pero puede asignarle menor importancia, ya que está oculto intencionadamente.
- Impacto en SEO:
- <noscript>: Útil si tienes una alternativa sin JavaScript para que tu contenido sea indexado en caso de que JavaScript no se ejecute correctamente. No hay penalización, ya que está pensado para eso.
- <display: none>: Puede ser visto con desconfianza si se abusa de esta técnica para ocultar contenido relevante solo para motores de búsqueda. Esto podría resultar en una desvalorización del contenido.
- Usa display: none para ocultar elementos en la interfaz sin eliminarlos del DOM, pero ten en cuenta que Google podría no valorar tanto ese contenido en términos de SEO si lo considera irrelevante para los usuarios.
- Usa <noscript> cuando quieras proporcionar contenido alternativo para navegadores sin JavaScript.
¿Entonces que es mejor para seo display none o visibility hidden?
Para el SEO, lo mejor es no ocultar contenido, ocultar contenido de manera deliberada es una práctica a evitar para los motores de búsqueda: Si el contenido no es relevante, es mejor no incluirlo o gestionarlo con meta etiquetas o robots.txt para controlar su indexación.
Pero si por algún motivo te ves obligado a ello, entre las propiedades CSS «display:none» y «visibility:hidden» nos quedaríamos con la primera dado que el contenido no se renderiza en la página y no ocupa espacio en el diseño. En cambio, con «visibility:hidden» el contenido sigue ocupando espacio en la página pero no es visible para los usuarios, los motores de búsqueda podrían interpretar esto como contenido engañoso si no es accesible para los usuarios, y te acabe penalizando.
¿Cual es la mejor manera de ocultar contenido sin afectar al SEO?
Mi recomendación es que en lugar de utilizar CSS, se oculte esta información mediante Javascript. Si bien el contenido oculto con «display:none» o «visibility:hidden» puede levantar sospechas de técnicas de manipulación SEO (como ocultar palabras clave para engañar a los motores de búsqueda), el uso de JavaScript para ocultar contenido dinámico es más natural y no es considerado una técnica de «cloaking» siempre que el contenido sea accesible bajo las condiciones correctas.
Por un lado, gracias a que Google ha mejorado su capacidad para rastrear, renderizar e interpretar el Javascript ese contenido lo podrá «ver» y entender cuándo se trata de contenido dinámico que está pensado para ser visible o accesible en determinadas circunstancias. Habitualmente utilizamos Javascript para mejorar la experiencia de usuario (en menús desplegables, pestañas o el botón «leer más») y esta aplicación más común es mejor aceptada por los motores de búsqueda.
Por último, ten en cuenta que estos contenidos tras Javascript deben ir acompañados del uso de la etiqueta noscript en caso de que sea contenido relevante, para facilitar el renderizado para Google y para los usuarios sin el Javascript habiitado.
