Cómo comenzar a usar el procesamiento dinámico

Actualmente, es difícil procesar contenido en JavaScript y no todos los rastreadores de motores de búsqueda pueden hacerlo de manera correcta o inmediata. Esperamos que se pueda solucionar este problema en el futuro. Por el momento, recomendamos el procesamiento dinámico como una solución alternativa a este inconveniente. Este tipo de procesamiento implica alternar entre contenido procesado por el cliente y contenido procesado previamente para usuarios-agentes específicos.

Sitios que deberían usar el procesamiento dinámico

Se recomienda aplicar el procesamiento dinámico para el contenido público generado por JavaScript que se puede indexar y que cambia rápidamente, o bien para el que usa funciones de este lenguaje que no son compatibles con los rastreadores que te interesan. No todos los sitios necesitan usar el procesamiento dinámico y cabe destacar que este tipo de procesamiento es una solución alternativa para los rastreadores.

Cómo funciona el procesamiento dinámico

El procesamiento dinámico requiere que tu servidor web detecte rastreadores (por ejemplo, mediante la consulta del usuario-agente). Las solicitudes de los rastreadores se envían a un procesador, mientras que las de los usuarios se publican como de costumbre. Si es necesario, el procesador dinámico publicará una versión del contenido apta para el rastreador, como una versión HTML estática. Puedes habilitar el procesador dinámico para todas las páginas o de forma individual.

Este diagrama muestra cómo funciona el procesamiento dinámico.El diagrama muestra el servidor que publica el contenido inicial de HTML y JavaScript directamente en el navegador.Por otro lado, el diagrama muestra el servidor que publica el código HTML y JavaScript inicial en un procesador para luego convertirlo en HTML estático. Una vez que se convierte el contenido, el procesador publica el código HTML estático en el rastreador.

Cómo implementar el procesamiento dinámico

Sigue nuestros lineamientos generales para configurar el procesamiento dinámico de tu contenido. Deberás consultar los detalles de tu configuración en particular, ya que varían significativamente entre las implementaciones.

  1. Instala y configura un procesador dinámico para transformar tu contenido en código HTML estático que los rastreadores puedan consumir con mayor facilidad. Algunos procesadores dinámicos conocidos son Puppeteer, Rendertron y prerender.io.
  2. Selecciona los usuarios-agentes que crees que deberían recibir el código HTML estático y consulta los detalles de tu configuración en particular sobre cómo agregar o actualizar agentes-usuarios. A continuación, encontrarás una lista de ejemplo con usuarios-agentes comunes en el middleware de Rendertron:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. Si el procesamiento previo hace que tu servidor funcione más lento o si ves una gran cantidad de solicitudes de procesamiento previo, considera implementar una memoria caché para el contenido con procesamiento previo o verifica que las solicitudes provengan de rastreadores legítimos.
  4. Determina si los usuarios-agentes requieren contenido para computadoras de escritorio o dispositivos móviles. Usa el procesamiento dinámico a fin de ofrecer la versión apropiada para computadoras de escritorio o dispositivos móviles. A continuación, verás un ejemplo de cómo una configuración podría determinar si un usuario-agente requiere contenido para computadoras de escritorio o dispositivos móviles:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. Configura tu servidor para que publique el código HTML estático en los rastreadores que seleccionaste. Hay varias maneras de hacerlo en función de la tecnología con la que cuentes. A continuación, verás algunos ejemplos:
    • Dirige las solicitudes proxy que provengan de rastreadores al procesador dinámico.
    • Realiza un procesamiento previo como parte de tu proceso de implementación y haz que tu servidor publique el código HTML estático en los rastreadores.
    • Incorpora el procesamiento dinámico al código personalizado de tu servidor.
    • En los rastreadores, publica contenido estático que provenga de un servicio de procesamiento previo.
    • Usa un middleware para tu servidor (por ejemplo, el de rendertron).

Cómo verificar la configuración

Después de implementar el procesamiento dinámico, usa las pruebas que se muestran a continuación para consultar una URL y verificar que todo funcione como esperabas:

  1. Realiza la prueba de optimización para dispositivos móviles a fin de asegurarte de que Google pueda ver tu contenido móvil.

    done Listo: El contenido para dispositivos móviles coincide con lo que quieres que vean los usuarios.

    error Vuelve a intentarlo: Si el contenido que ves no coincide con lo que esperabas, consulta la sección para solucionar problemas.

  2. Prueba el contenido para computadoras de escritorio con Explorar como Google a fin de garantizar que el contenido esté visible en la página procesada (es decir, el sitio que ve el robot de Google).

    done Listo: El contenido para computadoras de escritorio coincide con lo que quieres que vean los usuarios.

    error Vuelve a intentarlo: Si el contenido que ves no coincide con lo que esperabas, consulta la sección para solucionar problemas.

  3. Si usas datos estructurados, usa la herramienta de prueba para asegurarte de que estos se procesen correctamente.

    done Listo: Se muestran los datos estructurados tal como quieres.

    error Vuelve a intentarlo: Si no se muestran como esperabas, consulta la sección para solucionar problemas.

Solución de problemas

Si se detectan errores en la prueba de optimización para dispositivos móviles o si no se muestra tu contenido en los resultados de la Búsqueda de Google, intenta solucionar los problemas más habituales que aparecen a continuación. Si los inconvenientes persisten, publica un tema nuevo en el Foro para webmasters.

El contenido está incompleto o se ve diferente

error Qué causó el problema: Es posible que el procesador no esté bien configurado o que tu aplicación web no sea compatible con la solución de procesamiento. En algunas ocasiones, los tiempos de espera también ocasionan que no se procese correctamente el contenido.

done Cómo solucionarlo: Consulta la documentación de la solución que usas para depurar la configuración del procesamiento dinámico.

Tiempos de respuesta altos

error Qué causó el problema: En ocasiones, usar un navegador "headless" (sin una interfaz gráfica) para procesar páginas on demand ocasiona tiempos de respuesta altos, lo que puede provocar que los rastreadores cancelen la solicitud y no indexen tu contenido. Los tiempos de respuesta altos también pueden hacer que los rastreadores reduzcan su frecuencia de rastreo cuando rastrean e indexan el contenido.

done Cómo solucionarlo

  1. Configura una memoria caché para el código HTML procesado previamente o crea una versión HTML estática de tu contenido como parte del proceso de compilación.
  2. Asegúrate de habilitar la memoria caché en la configuración (por ejemplo, mediante el redireccionamiento de rastreadores).
  3. Verifica que los rastreadores obtengan tu contenido rápidamente mediante herramientas de prueba, como la prueba de optimización para dispositivos móviles o webpagetest (con una string de usuario-agente personalizada de la lista de usuarios-agentes del rastreador de Google). No debería agotarse el tiempo de espera de las solicitudes.

Faltan datos estructurados

error Qué ocasionó el problema: Si falta el usuario-agente de datos estructurados o no se incluyeron las etiquetas de secuencia de comandos JSON-LD en el resultado, podría haber errores de datos estructurados.

done Cómo solucionarlo

  1. Usa la herramienta de prueba de datos estructurados para garantizar que estos datos estén presentes en la página. Luego, configura el usuario-agente para la herramienta de prueba de datos estructurados a fin de probar el contenido procesado previamente.
  2. Asegúrate de que las etiquetas de secuencia de comandos JSON-LD estén incluidas en el código HTML de tu contenido procesado de forma dinámica. Para obtener más información, consulta la documentación de tu solución de procesamiento.

Enviar comentarios sobre…