Renderización dinámica como solución alternativa

En algunos sitios web, JavaScript genera contenido adicional en una página cuando se ejecuta en el navegador. Esto se denomina procesamiento del cliente. Si bien la Búsqueda de Google ejecuta JavaScript, hay funciones de JavaScript con limitaciones en la Búsqueda de Google, y algunas páginas pueden experimentar problemas con contenido que no aparece en el HTML procesado. Otros motores de búsqueda pueden optar por ignorar JavaScript y no verán el contenido generado por JavaScript.

El procesamiento dinámico es una solución alternativa para los sitios web en los que el contenido generado por JavaScript no está disponible para los motores de búsqueda. Un servidor de procesamiento dinámico detecta bots que pueden tener problemas con el contenido generado por JavaScript y publica una versión procesada por el servidor sin JavaScript para estos bots mientras muestra la versión del contenido procesada por el cliente a los usuarios.

El procesamiento dinámico es una solución alternativa, no una recomendada, ya que crea complejidades adicionales y requiere más recursos.

Sitios en los que se debería 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 existen mejores soluciones, como se explica en este artículo sobre el procesamiento en la Web.

Comprende 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.

El procesamiento dinámico no es una práctica de encubrimiento

El robot de Google generalmente no considera que el procesamiento dinámico sea una práctica de encubrimiento, por lo que implementará el mismo enfoque con tu procesamiento dinámico siempre y cuando este produzca contenido similar.

Al configurar el procesamiento dinámico, es posible que tu sitio produzca páginas de error. Googlebot no considerará que estas páginas de error sean una práctica de encubrimiento y las abordará como cualquier otra página de error.

Usar el procesamiento dinámico con el propósito publicar contenido completamente distinto para usuarios y rastreadores podría considerarse como una práctica de encubrimiento. Un ejemplo de ello sería un sitio web que publica una página sobre gatos para los usuarios y una sobre perros para los rastreadores.

Implementa 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 (por ejemplo, Puppeteer, Rendertron o prerender.io) para transformar tu contenido en código HTML estático que los rastreadores puedan consumir con mayor facilidad.
2. Selecciona los usuarios-agentes que quieres que reciban el código HTML estático y consulta los detalles de tu configuración en particular para 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',
     'bingbot',
     'linkedinbot',
     'mediapartners-google',
   ];

3. Si el procesamiento previo hace que tu servidor funcione más lento, o bien si ves una gran cantidad de solicitudes de procesamiento previo, procura implementar una memoria caché para el contenido con procesamiento previo o verificar 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 la publicación dinámica a fin de ofrecer la versión apropiada para computadoras de escritorio o dispositivos móviles. Este es 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. Estos son algunos ejemplos:
   • Dirige las solicitudes proxy que provengan de rastreadores al renderizador 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 la renderización dinámica al código personalizado de tu servidor.
   • En los rastreadores, publica contenido estático que provenga de un servicio de renderización previa.
   • Usa un middleware para tu servidor (por ejemplo, el de rendertron).

Verifica la configuración

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

1. Prueba el contenido para dispositivos móviles y computadoras de escritorio con la Herramienta de inspección de URLs para asegurarte de que dicho contenido también sea visible en la página renderizada, es decir, cómo Google ve tu página.

   done Listo: El contenido para computadoras de escritorio y 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 de solución de problemas.

2. Si usas datos estructurados, usa la Prueba de resultados enriquecidos para asegurarte de que estos se rendericen correctamente.

   done Listo: Se muestran los datos estructurados como esperabas.

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

Solución de problemas

Si se muestran errores en la Herramienta de inspección de URLs o si no se muestra tu contenido en los resultados de la Búsqueda de Google, intenta resolver los problemas más habituales. Si los problemas persisten, publica un tema nuevo en la Comunidad de ayuda de la Central de la Búsqueda de Google.

El contenido está incompleto o tiene un aspecto diferente

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

done Cómo solucionarlo: Para depurar la configuración de la renderización dinámica, consulta la documentación de la solución específica que usas.

Tiempos de respuesta altos

error Qué ocasionó el problema: En ocasiones, usar un navegador sin interfaz gráfica para renderizar páginas a pedido ocasiona tiempos de respuesta elevados, lo que puede provocar que los rastreadores cancelen la solicitud y no indexen tu contenido. Los tiempos de respuesta elevados también pueden hacer que los rastreadores reduzcan su frecuencia de rastreo cuando rastrean y cuando 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 hacia tu caché).
3. Verifica que los rastreadores obtengan tu contenido rápidamente con herramientas de prueba, como la Prueba de resultado enriquecido o webpagetest (con una cadena 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.

Los componentes web no se procesan como se esperaba

error Qué provocó el problema: El Shadow DOM está aislado del resto de la página. Las soluciones de procesamiento (como Rendertron) no pueden ver el contenido dentro del Shadow DOM aislado. Para obtener más información, consulta las prácticas recomendadas sobre componentes web.

done Cómo solucionarlo

1. Sube los polyfills webcomponents.js para elementos personalizados y el Shadow DOM.
2. Usa la Prueba de resultado enriquecido o la Herramienta de inspección de URL para verificar si el contenido aparece en el HTML procesado de tu solución de renderización.

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, se pueden producir errores de datos estructurados.

done Cómo solucionarlo

1. Usa la Prueba de resultados enriquecidos para asegurarte de que los datos estructurados estén presentes en la página. Luego, configura el usuario-agente para probar el contenido procesado previamente con Googlebot para computadoras de escritorio o dispositivos móviles.
2. Asegúrate de que las etiquetas de secuencia de comandos JSON-LD se incluyan en el código HTML de renderización dinámica de tu contenido. Para obtener más información, consulta la documentación de tu solución de procesamiento.