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

Cómo funciona el 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 de la forma habitual. Cuando es necesario, el procesador dinámico sirve una versión del contenido adecuada para el rastreador como, por ejemplo, una versión HTML estática. Puedes optar por 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 procesador 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.

La práctica de usar el 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 renderizador dinámico para transformar tu contenido en código HTML estático que los rastreadores puedan admitir más fácilmente. Puppeteer, Rendertron y prerender.io son algunos de los procesadores dinámicos que se utilizan habitualmente.
  2. Elige los user-agent que crees que deberían recibir tu lenguaje HTML estático y consulta detalles específicos de tu configuración sobre cómo cambiar o añadir user-agents. 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. A continuación, se muestra 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 que entregue el código 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.
    • Programar el 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 si quieres asegurarte de que Google pueda verlo.

    Correcto: tu contenido para móviles es el que esperas que vean tus usuarios.

    Reintentar: si el contenido que ves no es el 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 ese contenido también se muestre en la página renderizada. Recuerda que la página que ve el robot de Google es la renderizada.

    Correcto: el contenido para ordenadores es el que esperas que vean tus usuarios.

    Reintentar: si el contenido que ves no es el previsto, consulta la sección de solución de problemas.

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

    Correcto: los datos estructurados se muestran como esperabas.

    Reintentar: si los datos estructurados no se muestran como esperabas, consulta la sección de solución de problemas.

Solucionar problemas

Si se muestran errores cuando examinas tu contenido con la prueba de optimización para móviles, o si directamente no aparece en los resultados de la Búsqueda de Google, intenta resolver los problemas más habituales que se indican a continuación. Si sigues teniendo problemas, publica tu pregunta en la comunidad de ayuda del Centro de la Búsqueda de Google.

El contenido está incompleto o se ve diferente

Qué ha causado el problema: puede ser que tu renderizador esté mal configurado o que tu aplicación web sea incompatible con tu herramienta de renderizado. A veces, el contenido no se renderiza correctamente porque se agota el tiempo de espera.

Soluciona el problema: consulta la documentación de tu herramienta de renderizado para depurar tu configuración de renderizado dinámico.

Tiempos de respuesta elevados

Qué ha causado el problema: cuando se usa un navegador sin interfaz gráfica para renderizar páginas bajo demanda, los tiempos de respuesta suelen ser elevados, lo que puede hacer que los rastreadores cancelen la solicitud y no indexen tu contenido. Si tu servidor tarda mucho en responder, es posible que los rastreadores rastreen e indexen tu contenido con menos frecuencia.

Corrige el problema

  1. Configura una caché en la que almacenar los documentos HTML renderizados previamente o crea una versión HTML estática de tu contenido como parte de tu proceso de compilación.
  2. No olvides 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 de optimización para móviles o webpagetest, en este último caso usando una cadena de user-agent personalizada de la lista de user-agents del rastreador de Google. Tus solicitudes deberían realizarse antes de que se agote el tiempo de espera.

Los componentes web no se renderizan como se esperaba

Qué ha causado el problema: El shadow DOM está aislado del resto de la página, por lo que las herramientas de renderizado como Rendertron no pueden ver el contenido que hay en él. Consulta más información en las prácticas recomendadas sobre componentes web.

Corrige el problema

  1. Carga los polyfills de webcomponents.js sobre elementos y modelos shadow DOM personalizados.
  2. Con la prueba de optimización para móviles o la herramienta de inspección de URLs, puedes comprobar si el contenido aparece en el HTML renderizado por tu solución de renderizado.

Faltan datos estructurados

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.

Corrige 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. Comprueba que las etiquetas de secuencias de comandos JSON-LD estén incluidas en el HTML renderizado dinámicamente de tu contenido. Tienes más información en la documentación de tu solución de renderizado.