Renderizado dinámico como solución alternativa

En algunos sitios web, JavaScript genera contenido adicional en una página cuando se ejecuta en el navegador (lo que se denomina "renderizado de cliente"). Aunque la Búsqueda de Google ejecuta JavaScript, hay funciones de JavaScript con limitaciones en la Búsqueda, y algunas páginas pueden tener problemas que hagan que no se muestre el contenido en el HTML renderizado. Otros buscadores pueden elegir ignorar JavaScript, por lo que no verán contenido generado por JavaScript.

El renderizado dinámico es una solución temporal para los sitios web en los que el contenido generado por JavaScript no está disponible en los buscadores. Los servidores de renderizado dinámico detectan los robots que pueden tener problemas con el contenido generado por JavaScript y sirve una versión renderizada del servidor a esos robots, a la vez que muestra la versión renderizada del cliente a los usuarios.

El renderizado dinámico es una solución provisional, y no una solución recomendada, porque crea complejidades y requisitos de recursos adicionales.

Sitios que deberían utilizar el renderizado dinámico

El renderizado dinámico es una solución provisional 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 hay soluciones mejores, tal como se explica en este artículo sobre el renderizado en la Web.

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 procesador dinámico (por ejemplo, Puppeteer, Rendertron o prerender.io) para transformar tu contenido en código HTML estático que los rastreadores puedan admitir más fácilmente.
  2. Elige los user-agent con los que quieres acceder a tu código HTML estático y consulta información específica de la configuración sobre cómo cambiar o añadir user-agents. Este es un ejemplo de una lista de user-agent habituales en el middleware Rendertron: 
    export const botUserAgents = [
  'googlebot',
  '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 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 que esperabas, consulta la sección de solución de problemas.

  3. Si utilizas datos estructurados, comprueba que se rendericen correctamente con la prueba de resultados enriquecidos.

    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 directamente no aparece en los resultados de la Búsqueda de Google, intenta resolver los problemas más habituales. 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 procesador 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. Las soluciones de renderizado, como Rendertron, no pueden ver el contenido que hay en el modelo Shadow DOM aislado. 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. Comprueba con la prueba de resultados enriquecidos que haya datos estructurados en la página. A continuación, configura el user-agent para probar el contenido renderizado previamente con el robot de Google para ordenadores o para móviles.
  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.