Recientemente nos hemos visto en una situación extraña pero que una vez encontrado el problema tiene su sentido.
Resulta que tras poner en producción un sitio web construido con WordPress (Gutenberg), el equipo que se ocupa del SEO detecta un problema grave en la indexación del sitio y otras incidencias en determinados procedimientos con Google que rechazaba las URL enviadas a alguno de sus servicios.
El caso es que nos reportan que Googlebot no puede leer el contenido de la página y que, al usar herramientas de simulación de renderizado, ésta se ve «vacía».
Herramienta Fetch & Render. Observa bien para encontrar el fallo.
Si observamos bien esta pantalla, efectivamente parece vacía pero ya de primeras podemos ver un menú, y si hacemos scroll el menú desaparece. Eso quiere decir que hay altura.
Bien.
Otra pista nos la da el color de fondo, que corresponde con un rojo bajo de opacidad. Ese color coincide con el de la superposición del primer bloque de tipo «Fondo» que aparece en esa landing. Debería de verse un vídeo detrás de esa capa traslúcida, pero vemos que los vídeos están excluidos en el robots.txt así que todo en orden, estamos viendo ese bloque o al menos la superposición de color.
Seguimos haciendo scroll y llega a aparecer algo de contenido, justo el que estamos esperando. La primera frase que está dentro de ese bloque «Fondo» entra en escena y después, EL VACÍO de nuevo. También vemos aparecer por la derecha unos pequeños botones «fixed» que tenemos en el lateral derecho para acceder a la sección de contacto. Pero seguimos bajando y bajando y no llega a aparecer nada más. ¿Qué está pasando? ¿Hay más? ¿Dónde está? ¿No está? ¿Está detrás?
Lo que está claro es que el primer bloque, de tipo «Fondo», está y se renderiza, pero es absurdamente alto. Pues vamos a quitarlo y a ver si aparece el resto en un nuevo renderizado.
Cuidado con WP Rocket cuando estés haciendo pruebas
Ya me he dado de bruces con este plugin miles de veces. Arreglas algo y te quedas tan ancho, pero resulta que no te has acordado de purgar la caché de WP Rocket. Tú lo ves todo fantásticamente actualizado y arreglado porque estás logueado en tu WordPress y te saltas esa caché, pero el resto de mortales inferiores te van a poner los pies en la tierra con un rotundo «pues yo lo sigo viendo igual (de mal)».
Así que lo primero que hago es purgar y seguidamente desactivo el plugin para evitar que actúe de nuevo esa caché mientras estoy probando.
Prueba y error con tu simulador de renderizado favorito
Supongo que dará igual el que uses, nuestros compañeros nos recomendaron comprobar todo con este y así lo hicimos. También nos han dicho que quitando determinados bloques parece que todo se arregla, así que veamos qué tienen en común, y lo primero que vemos es que son bloques de tipo Fondo.
Vamos a ir quitando el primero.
Hemos quitado de la landing page el primer bloque de tipo Fondo que es el que la herramienta de renderizado nos mostraba, aunque bastante deformado y lanzamos una nueva simulación, y la cosa ha cambiado, al menos de color, pero parece todo igual de raro. Seguimos bajando y solo vemos fondo, pero es del color del segundo bloque Fondo que aparece en la web.
Lo que no hemos visto es nada de contenido antes de ese bloque, que lo hay.
Este tipo de bloque tiene una capa de color para crear un efecto de superposición sobre la imagen y garantizar la legibilidad del texto que pongas dentro. Tiene declarada una propiedad z-index: 1 y podríamos pensar que, por lo que sea, está capa está poniéndose por encima de todo el contenido ocupando todo el alto y ancho de la página (no del viewport) y no deja verlo, pero no tiene lógica porque es traslúcida así que algo deberíamos de ver por detrás.
La luz se enciende al pensar en los ajustes de estos bloques, a ver si tienen alguno en común. El alto mínimo. Bueno, más bien las unidades 100vh unos y 60vh el último.
vh = viewport height
¿Cómo va a ajustar un bot el alto del bloque al alto del viewport? ¿Acaso estamos pensando en esto?
Veo claro que está intentando ajustar cada bloque con altura definida en «vh» en relación a la altura de su viewport que es… ninguno, así que los hace infinitamente altos, o al menos los hace crecer hasta que se cansa. No tengo pruebas pero tampoco dudas, así que procedo a cambiar la altura a píxeles y a lanzar un nuevo renderizado para comprobar que, ya sea por lo que yo pienso o por otra razón infinitamente más compleja, se renderiza bien. Nuestros compis SEO hacen la prueba en su lado y tan contentos, así que ahora que sabemos lo que falla, vamos a buscar en Google si hay mejor manera de resolverlo.
La primera que se me ocurre es no darle altura mínima y usar JavaScript para dársela como se ha hecho durante todo el siglo XX. Creo que es un paso atrás y más complejo de lo que estamos dispuestos a asumir.
La segunda que veo por ahi es ponerle un max-height a estos bloques, pero corres el riesgo de ocultar contenido, no solo a los bots, sino también al usuario.
Me quedo con el alto mínimo en valor absoluto en pixels. ¿Hay alguien que conozca otra solución o unidad CSS «bot friendly»? Deja tu aportación en los comentarios
