Implementar el renderizado dinámico

Actualmente, es difícil procesar JavaScript y no todos los rastreadores de buscadores pueden procesarlo con éxito o de inmediato. En adelante, esperamos que se pueda solucionar este problema, pero mientras tanto, recomendamos usar el renderizado dinámico como solución alternativa. El renderizado dinámico significa cambiar entre contenido renderizado y previamente renderizado del cliente a determinados tipos de user-agent.

Sitios web que deberían utilizar el renderizado dinámico

El renderizado dinámico es recomendable para contenido que se genera de forma pública e indexable por JavaScript y que cambia rápidamente, o para contenido que utiliza características de JavaScript que no admiten los rastreadores que te interesan. No todos los sitios necesitan utilizar el renderizado dinámico y debe tenerse en cuenta que su uso sirve de alternativa a los rastreadores.

Funcionamiento del renderizado dinámico

El renderizado dinámico requiere que tu servidor web detecte rastreadores (por ejemplo, comprobando el user-agent). Las solicitudes de los rastreadores se redirigen a un procesador y las de los usuarios se sirven normalmente. Cuando es necesario, el procesador dinámico sirve una versión del contenido adecuada al rastreador como, por ejemplo, una versión HTML estática. Puedes elegir habilitar el renderizado dinámico en todas las páginas o por página.

Diagrama que muestra cómo funciona el renderizado dinámico.Diagrama que muestra el servidor que sirve contenido HTML y JavaScript inicial directamente al navegador.Por el contrario, el diagrama muestra el servidor que sirve contenido HTML y JavaScript inicial a un procesador, que convierte el HTML y JavaScript inicial en HTML estático. Una vez que se convierte el contenido, el renderizado sirve HTML estático al rastreador.

El renderizado dinámico no es encubrimiento

El robot de Google no suele considerar el renderizado dinámico como encubrimiento. Siempre que tu renderizado dinámico produzca contenido similar, el robot de Google no considerará que el renderizado dinámico es encubrimiento.

Cuando configuras el renderizado dinámico, tu sitio web puede presentar páginas de error. El robot de Google no considera estas páginas de error como encubrimiento y trata este error como cualquier otra página de este tipo.

El uso del renderizado dinámico para servir contenido completamente diferente a usuarios y rastreadores puede considerarse encubrimiento, por ejemplo, si sirve una página sobre gatos a los usuarios y una sobre perros a los rastreadores.

Implementar el renderizado dinámico

Sigue nuestras directrices generales para configurar el renderizado dinámico de tu contenido. Debes consultar los detalles concretos de tu configuración, ya que varían mucho entre implementaciones.

  1. Instala y configura un procesador dinámico para transformar tu contenido en HTML estático que los rastreadores puedan consumir más fácilmente. Puppeteer, Rendertron y prerender.io son algunos procesadores dinámicos comunes.
  2. Elige los user-agent que crees que deberían recibir tu lenguaje HTML estático y consulta los detalles específicos de tu configuración sobre cómo cambiar o añadir un user-agent. Este es un ejemplo de una lista de user-agent comunes en el middleware Rendertron:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. Si el renderizado previo ralentiza tu servidor o si ves una gran cantidad de solicitudes de renderizado previo, te recomendamos que implementes una memoria caché para el contenido renderizado previamente o verifiques que las solicitudes provienen de rastreadores legítimos.
  4. Determina si los user-agent requieren contenido para ordenadores o móviles. Con el renderizado dinámico, puedes proporcionar la versión adecuada para ordenadores o móviles. Este es un ejemplo de cómo una configuración podría determinar si un user-agent requiere contenido para ordenadores o móviles:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. Configura tu servidor para entregar el lenguaje HTML estático a los rastreadores seleccionados. Hay varias formas de hacerlo en función de la tecnología que utilices, por ejemplo:
    • Desviar al procesador dinámico las solicitudes provenientes de rastreadores.
    • Renderizar previamente como parte de tu proceso de implementación y hacer que tu servidor sirva el lenguaje HTML estático a los rastreadores.
    • Crear renderizado dinámico en tu código de servidor personalizado.
    • Servir contenido estático de un servicio de renderizado previo a los rastreadores.
    • Utilizar un middleware en tu servidor (por ejemplo, el middleware de Rendertron).

Verificar tu configuración

Después de terminar de implementar el renderizado dinámico, verifica que todo funciona según lo previsto haciendo en una URL estas pruebas:

  1. Haz la prueba de optimización para móviles en tu contenido para móviles para asegurarte de que Google pueda verlo.

    done Correcto: tu contenido para móviles coincide con lo que un usuario espera ver.

    error Inténtalo de nuevo: si el contenido que ves no coincide con lo previsto, consulta la sección de solución de problemas.

  2. Prueba tu contenido para ordenadores con la herramienta de inspección de URLs para asegurarte de que el contenido también sea visible en la página renderizada. Ten en cuenta que el robot de Google ve tu página como la página renderizada.

    done Correcto: el contenido para ordenadores coincide con lo que un usuario espera ver.

    error Inténtalo de nuevo: si el contenido que ves no coincide con lo previsto, consulta la sección para solucionar problemas.

  3. Si utilizas datos estructurados, comprueba que tus datos estructurados se renderizan correctamente con la Herramienta de prueba de datos estructurados.

    done Correcto: los datos estructurados se muestran como esperabas.

    error Inténtalo de nuevo: si los datos estructurados no se muestran como esperabas, consulta la sección para solucionar problemas.

Solucionar problemas

Si con tu contenido se muestran errores en la prueba de optimización para móviles o si no aparece en los resultados de la Búsqueda de Google, intenta resolver los problemas más comunes que se indican a continuación. Si aún tienes algún problema, publica un nuevo tema en el foro para webmasters.

El contenido está incompleto o se ve diferente

error Qué ha causado el problema: tu procesador puede estar mal configurado o tu aplicación web puede ser incompatible con tu solución de renderizado. A veces, los tiempos de espera también pueden hacer que el contenido no se renderice correctamente.

done Soluciona el problema: consulta la documentación de tu solución específica de renderizado para depurar tu configuración de renderizado dinámico.

Altos tiempos de respuesta

error Qué ha causado el problema: usar un navegador sin interfaz gráfica para renderizar páginas bajo demanda suele provocar tiempos de respuesta elevados, lo que puede hacer que los rastreadores cancelen la solicitud y no indexen tu contenido. Los altos tiempos de respuesta también pueden hacer que los rastreadores rastreen e indexen tu contenido con menos frecuencia.

done Soluciona el problema

  1. Configura una caché para el HTML renderizado previamente o crea una versión HTML estática de tu contenido como parte de tu proceso de compilación.
  2. Asegúrate de habilitar la caché en tu configuración, por ejemplo, dirigiendo los rastreadores a tu caché.
  3. Comprueba que los rastreadores obtienen tu contenido rápidamente con herramientas de prueba como la prueba de optimización para móviles o webpagetest, en este último caso usando una cadena de user-agent personalizada de la lista de user-agent del rastreador de Google. Tus solicitudes deberían realizarse antes de que se agote el tiempo de espera.

Faltan datos estructurados

error Qué ha causado el problema: si no hay un user-agent de datos estructurados o no se han incluido etiquetas de secuencia de comandos JSON-LD en el resultado, es posible que se produzcan errores de datos estructurados.

done Soluciona el problema

  1. Con la Herramienta de prueba de datos estructurados, te aseguras de que los datos estructurados están en la página. A continuación, configura el user-agent en la Herramienta de prueba de datos estructurados para probar el contenido renderizado previamente.
  2. Asegúrate de incluir las etiquetas de secuencias de comandos JSON-LD en el HTML renderizado dinámicamente de tu contenido. Consulta más información en la documentación de tu solución de renderizado.