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 y el encubrimiento son dos cosas diferentes

En términos generales, el robot de Google no considera 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 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 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. A continuación se incluye un ejemplo de una lista con user-agents 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 que verifiques que las solicitudes provienen de rastreadores legítimos.
  4. Determina si los user-agents 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 middleware en tu servidor; por ejemplo, Rendertron.

Verificar tu configuración

Después de terminar de implementar el renderizado dinámico, comprueba que todo funciona según lo previsto haciendo las siguientes pruebas en la URL:

  1. Haz la prueba de optimización para móviles en tu contenido para móviles para 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 se rendericen 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 tu contenido no aparece en los resultados de la Búsqueda de Google o se detectan errores en él con la prueba de optimización para móviles, intenta resolver los problemas más comunes que se indican a continuación. Si sigue produciéndose algún problema, publica un tema en el foro para webmasters.

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.

Soluciona 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 ella.
  3. Comprueba que los rastreadores obtengan 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.

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

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