Depurar el renderizado de JavaScript en Google Search Console implica usar la herramienta de Inspección de URLs para comparar el HTML inicial con la versión renderizada final. Debes introducir una URL, hacer clic en ‘Probar URL en vivo’ y luego seleccionar ‘Ver página renderizada’ para ver el DOM. Esto te permite verificar si Googlebot puede ver tu contenido después de que se ejecuten los scripts, asegurando que tu texto, enlaces y datos estructurados estén indexados adecuadamente.
¿Cómo procesa Googlebot las aplicaciones de JavaScript?
La Búsqueda de Google procesa las aplicaciones web en tres fases principales: rastreo, renderizado e indexación. Cuando un rastreador encuentra una página, primero descarga el HTML sin procesar. Si la página depende en gran medida de scripts para mostrar contenido, el rastreador añade la página a una cola de renderizado. Esta cola es necesaria porque el renderizado requiere más recursos informáticos que un simple rastreo.
El Servicio de Renderizado Web (WRS) utiliza una versión evergreen del navegador Chromium para ejecutar scripts y construir la estructura final de la página. Solo después de que se completa este proceso, el sistema puede ver el texto completo y los elementos de navegación. Si tus scripts fallan o se agota el tiempo de espera durante esta fase, el indexador puede ver solo una plantilla vacía o un icono de carga.
Google procesa aplicaciones web JavaScript en tres fases principales: Rastreo Renderizado Indexación
Google Search Central
¿Puedes ver exactamente qué renderiza Googlebot?
La herramienta de Inspección de URLs proporciona una ventana directa al motor de renderizado. Al utilizar la función ‘Probar URL en vivo’, inicias una solicitud en tiempo real desde Googlebot. Una vez que finaliza la prueba, el enlace ‘Ver página renderizada’ abre un panel lateral con tres pestañas clave: HTML, Captura de pantalla y Más información.
La pestaña HTML muestra el Modelo de Objeto de Documento (DOM) después de que se ha ejecutado JavaScript. Debes copiar este texto y buscar nombres de productos específicos o descripciones generadas por tus scripts. Si el texto falta en esta pestaña pero es visible en tu propio navegador, es probable que ocurra un error de renderizado.
- Introduce la URL de destino en la barra de búsqueda superior de Search Console.
- Haz clic en el botón ‘Probar URL en vivo’ para obtener datos actuales.
- Selecciona ‘Ver página renderizada’ para examinar los resultados.
- Revisa la pestaña ‘Captura de pantalla’ para ver si el diseño se ve correcto.
- Revisa la pestaña ‘Más información’ para ver mensajes de consola y errores de recursos.
¿Por qué falta contenido en el HTML renderizado?
A menudo, el contenido no aparece porque Googlebot no puede acceder a los archivos de script necesarios. Si tu archivo robots.txt bloquea las carpetas /static/ o /assets/, el motor de renderizado omitirá esos archivos. Esto da como resultado una página incompleta. Puedes encontrar estos recursos bloqueados en la pestaña ‘Más información’ bajo la sección ‘Recursos de la página’.
Otro problema común es el tiempo de espera de ejecución. Googlebot no espera indefinidamente a que los scripts terminen. Si tu aplicación realiza llamadas API lentas para obtener datos, el renderizador puede rendirse e indexar la página antes de que llegue el contenido. La eficiencia en la ejecución de scripts y los tiempos de respuesta rápidos del servidor son clave para una indexación exitosa.
Googlebot obtiene una URL de la cola de rastreo haciendo una solicitud HTTP, primero comprueba si permites el rastreo.
Google Search Central
Cómo aplica Alien Road las auditorías de renderizado de JavaScript
Nuestro equipo en Alien Road utiliza un flujo de trabajo sistemático para proteger a nuestros clientes de las brechas de indexación. Comenzamos comparando la salida de ‘Ver código fuente de la página’ con el ‘HTML renderizado’ que se encuentra en Search Console. Buscamos la presencia de contenido principal, como cuadrículas de productos o texto de artículos, en la versión renderizada. Si encontramos una discrepancia, utilizamos los registros de la consola en la herramienta de Inspección de URLs para encontrar el error de script específico.
En un proyecto típico para una tienda de Shopify, descubrimos que una aplicación de reseñas de terceros no aparecía para los motores de búsqueda. Al revisar la sección ‘Más información’, identificamos que el script fallaba debido a una característica de JavaScript no compatible. Recomendamos un enfoque del lado del servidor para esas reseñas. Este ajuste aseguró que las reseñas contribuyeran a la visibilidad del sitio y a las clasificaciones de palabras clave.
- Audita el archivo robots.txt para asegurarte de que todas las rutas de JS y CSS estén abiertas.
- Compara las proporciones de texto a código en el rastreo inicial frente a la prueba en vivo.
- Identifica y corrige los errores de consola reportados por el WRS.
- Verifica que los enlaces internos utilicen etiquetas a-href estándar en lugar de controladores de clics.
- Documenta todos los elementos faltantes para que el equipo de desarrollo los corrija.
¿Es el renderizado dinámico una solución a largo plazo?
El renderizado dinámico fue una vez una forma popular de servir una versión HTML plana de una página a los bots mientras se ofrecía a los usuarios la experiencia completa cargada de scripts. Sin embargo, Google ahora considera esto como una solución temporal. Añade complejidad a la configuración del servidor y puede provocar desajustes de contenido si las dos versiones no se mantienen sincronizadas.
La recomendación moderna es utilizar el renderizado del lado del servidor (SSR) o la generación de sitios estáticos (SSG). Estos métodos aseguran que el contenido ya esté presente en el HTML cuando Googlebot obtiene la página por primera vez. Esto elimina la dependencia de la cola de renderizado y asegura una indexación más rápida para contenido nuevo o actualizado.
El renderizado dinámico es una solución provisional y no una solución recomendada, porque crea complejidades adicionales y requisitos de recursos.
Google Search Central
¿Cuáles son los errores comunes de JavaScript en Search Console?
La pestaña ‘Más información’ a menudo enumera excepciones de JavaScript que impidieron que la página se cargara correctamente. Los errores comunes incluyen problemas de sintaxis que la versión de Chromium no puede analizar o fallas al obtener APIs externas. Además, si un script se basa en la interacción del usuario, como hacer clic o desplazarse para cargar contenido, Googlebot probablemente se perderá ese contenido porque no realiza esas acciones.
También puedes ver errores de ‘Soft 404’ causados por scripts. Si tu aplicación muestra un mensaje de ‘Producto no encontrado’ a través de JavaScript mientras devuelve un código de estado 200 OK, Google aún puede indexar la página como un 404. Revisar la captura de pantalla renderizada te ayuda a ver si el bot está alcanzando estos estados de error en lugar del contenido real.
Pasos prácticos para tu sitio web esta semana
Para asegurarte de que tu sitio esté saludable, elige tus cinco páginas de destino más importantes y pásalas por la herramienta de Inspección de URLs. Mira específicamente la pestaña HTML y busca tus palabras clave principales. Si no están allí, tienes un problema de renderizado que necesita atención inmediata de tu equipo técnico.
- Comprueba si tus enlaces de navegación principales son visibles en el HTML renderizado.
- Asegúrate de que tus imágenes tengan etiquetas alt presentes en el DOM después del renderizado.
- Verifica que las etiquetas meta y los datos estructurados sean inyectados correctamente por tus scripts.
- Corrige cualquier error de recursos ‘Rojo’ en el panel de Más información.
- Prueba tu sitio en diferentes dispositivos usando la herramienta de prueba de optimización para móviles, que utiliza el mismo renderizador.