Cómo Mejorar la Indexación de PWAs en Google

Las Progressive Web Apps (PWAs) ofrecen funcionalidades avanzadas como el modo offline y notificaciones push, pero enfrentan retos importantes en su indexación en Google debido al uso intensivo de JavaScript y arquitecturas SPA. Para superar estos desafíos, es clave optimizar el renderizado, la estructura de URLs, y los archivos clave como manifest.json y robots.txt. Además, herramientas como Google Search Console y Lighthouse pueden ayudarte a diagnosticar problemas y medir mejoras en tiempo real.

Principales puntos a considerar:

• Renderizado: Implementar Server-Side Rendering (SSR) o prerenderizado para garantizar que el contenido esté disponible en el HTML inicial.

• URLs: Usar URLs limpias y evitar fragmentos como # o #!.

• Archivos clave: Configurar correctamente manifest.json, Service Workers y robots.txt para que Googlebot acceda a los recursos necesarios.

• Rendimiento: Mejorar métricas como LCP, INP y CLS para optimizar la experiencia del usuario y el SEO.

• Herramientas: Utilizar Google Search Console para identificar errores de indexación y Lighthouse para auditar el rendimiento técnico.

Estos pasos son esenciales para que las PWAs sean fácilmente rastreables y visibles en los resultados de búsqueda.

Guía completa para mejorar la indexación de PWAs en Google: pasos clave y herramientas

Indexing your PWA (Discoverability & SEO) - Progressive Web App Training

Cómo Encontrar y Diagnosticar Problemas de Indexación

Para identificar problemas de indexación de manera precisa, Google Search Console (GSC) es tu mejor aliado. Sus herramientas principales, como el Informe de Indexación de Páginas y la Herramienta de Inspección de URL, te permiten obtener una visión clara de qué páginas están indexadas y por qué otras no lo están. Además, puedes analizar en detalle rutas específicas de tu PWA (Aplicación Web Progresiva). Aquí te explico cómo sacarles el máximo partido.

Uso de Google Search Console para Detectar Errores

El Informe de Indexación de Páginas incluye una tabla con estados como "Rastreada, actualmente no indexada" y "Detectada, actualmente no indexada". Estos estados son clave para entender el comportamiento de Googlebot:

• "Rastreada, actualmente no indexada": Googlebot visitó la página pero decidió no indexarla. Esto ocurre, a menudo, por problemas en la carga de contenido JavaScript.

• "Detectada, actualmente no indexada": Google conoce la URL, pero aún no la ha rastreado.

Si trabajas con PWAs, filtrar los resultados por sitemap en lugar de usar "Todas las páginas conocidas" puede ayudarte a centrarte en las URLs más relevantes. Ten en cuenta que validar correcciones en GSC puede tardar unas dos semanas.

Verificación de Cómo Googlebot Renderiza tu Contenido

Una vez que tengas identificados los errores generales con el Informe de Indexación, el siguiente paso es comprobar cómo Googlebot renderiza tu PWA. Aquí es donde entra en juego la Herramienta de Inspección de URL. Con esta herramienta puedes analizar si el contenido dinámico se carga correctamente.

1. Introduce la URL completa en la barra de búsqueda superior de GSC.

2. Haz clic en "Probar URL publicada" para ejecutar una Prueba en Vivo.

Esta prueba es especialmente útil para PWAs porque renderiza JavaScript en tiempo real. Después de realizarla, revisa la opción "Ver página probada" y verifica en las pestañas "Captura de pantalla" y "HTML" que todo el contenido esencial esté correctamente cargado. También asegúrate de que no haya errores en la consola JavaScript.

Sobre este punto, Martin Splitt, Developer Advocate de Google, aclara:

Los navegadores (y Lighthouse) no usan robots.txt para decidir si pueden obtener recursos de la red, mientras que Googlebot sí lo hace.

Herramientas Clave en Google Search Console para PWAs

Estas herramientas no solo te ayudan a identificar problemas, sino que también te permiten aplicar correcciones y mejorar la indexación y el rendimiento de tu PWA. Cada una tiene un propósito específico que contribuye al diagnóstico completo.

Configuración Correcta de los Archivos Necesarios

Una vez identificados los problemas de indexación, el siguiente paso es ajustar los archivos clave que definen cómo funciona tu PWA y cómo Googlebot la interpreta. Dos elementos esenciales en este proceso son el manifest.json y los Service Workers.

Configuración de manifest.json y Service Workers

El archivo manifest.json es fundamental para que los navegadores y motores de búsqueda reconozcan tu PWA. Para que Chrome considere tu sitio como instalable, este archivo debe incluir ciertos elementos obligatorios, como: name o short_name, icons (en tamaños de 192×192 px y 512×512 px), start_url y display (o display_override). Además, incluir la propiedad id es clave para identificar la aplicación de forma única, evitando problemas si cambias la ubicación del archivo o la URL de inicio.

Para garantizar que Googlebot pueda encontrar el manifest desde cualquier página que rastree, debes enlazarlo en el <head> de todas las páginas HTML usando <link rel="manifest" href="/manifest.json">. Aunque no es estrictamente necesario para la instalación básica, añadir propiedades como description y screenshots puede mejorar la experiencia de instalación en dispositivos Android y Google Play. Por ejemplo, Chrome limita las descripciones a 300 caracteres y en Android solo se muestran hasta siete líneas de texto.

Por otro lado, los Service Workers desempeñan un papel crucial, ya que gestionan las solicitudes y deciden si los recursos se sirven desde la caché o desde la red. La ubicación del archivo determina su alcance: si está en ejemplo.com/sw.js, podrá controlar todas las rutas del dominio, mientras que si se encuentra en /mi-pwa/sw.js, solo tendrá control sobre esa subcarpeta. Para recursos como CSS y JavaScript, la estrategia Stale-While-Revalidate es ideal, ya que permite respuestas inmediatas desde la caché mientras actualiza en segundo plano. En cambio, para páginas estáticas como index.html, la estrategia Cache-First suele ser más efectiva.

Es imprescindible que tanto el manifest como la PWA se sirvan a través de HTTPS, ya que los navegadores los consideran inválidos si no cumplen con este requisito. Actualmente, el soporte para Service Workers alcanza un 96,04% a nivel global, lo que asegura una amplia compatibilidad. Para verificar que el navegador interpreta correctamente el manifest y que los iconos no presentan errores, puedes usar el panel Manifest en Chrome DevTools, dentro de la pestaña "Application".

Con estos ajustes en el manifest y los Service Workers, estarás listo para optimizar el archivo robots.txt y gestionar mejor el presupuesto de rastreo.

Creación y Configuración de robots.txt

El archivo robots.txt es una herramienta clave para dirigir el rastreo de los bots y evitar que desperdicien recursos en contenido irrelevante, como resultados de búsqueda interna, paneles de administración o parámetros duplicados en URLs. Esto es particularmente importante en PWAs que dependen de JavaScript, ya que bloquear el acceso a archivos CSS o JavaScript puede impedir que Googlebot renderice correctamente la página, afectando su indexación.

Es importante recordar que robots.txt solo limita el rastreo, pero no previene la indexación. Por ejemplo, una página bloqueada puede aparecer en los resultados de búsqueda si otros sitios enlazan a ella, aunque sin descripción. Para evitar que una página sea indexada, utiliza la etiqueta meta noindex en lugar de bloquearla mediante robots.txt.

Al configurar este archivo, asegúrate de que directorios con recursos esenciales como /dist/, /assets/ o carpetas específicas de JavaScript y CSS no estén restringidos con reglas Disallow. También es buena práctica incluir la URL absoluta de tu sitemap XML al final del archivo robots.txt, facilitando así el descubrimiento de todas las rutas de tu PWA.

Mejora del Renderizado y los Core Web Vitals

Con los archivos clave configurados, el siguiente paso es optimizar el renderizado y el rendimiento. Googlebot indexa el contenido en dos fases: primero rastrea el HTML estático y luego procesa el JavaScript. Las PWAs que dependen exclusivamente de Client-Side Rendering (CSR) pueden experimentar retrasos en la indexación. Además, el 53% de los usuarios móviles abandona un sitio si tarda más de 3 segundos en cargar. Mejorar el rendimiento no solo acelera la indexación, sino que también mejora la experiencia del usuario y el SEO.

Implementación de Server-Side Rendering (SSR) o Prerendering

El Server-Side Rendering asegura que todo el contenido de la página, incluidos los textos y enlaces internos, esté disponible en el HTML inicial. Esto permite que Googlebot rastree el contenido sin depender del procesamiento de JavaScript. Por ejemplo, Netflix logró mejorar sus métricas de adquisición en un 50% al pasar de CSR a SSR. Walmart también descubrió que SSR permitía a los usuarios acceder al contenido más rápido que con CSR, según sus pruebas internas.

Para PWAs grandes o con cambios frecuentes, Google sugiere el Dynamic Rendering, que consiste en servir una versión SSR a los bots y una versión CSR o híbrida a los usuarios. El renderizado híbrido combina lo mejor de ambos mundos: envía HTML estático inicialmente (ideal para bots y métricas como LCP) y luego permite que JavaScript "hidrate" la página para una experiencia más interactiva. Aunque Google no establece un límite exacto, se estima que las páginas deben renderizar su contenido en unos 5 segundos para que el rastreador capture la información de forma efectiva.

Mejora de las Puntuaciones de Core Web Vitals

Después de optimizar el renderizado, es crucial trabajar en las métricas que afectan directamente la experiencia del usuario.

Los Core Web Vitals son indicadores clave que Google utiliza para medir la calidad de la experiencia del usuario. El Largest Contentful Paint (LCP) evalúa el tiempo que tarda en cargarse el elemento visual más grande de la página. En el 73% de las páginas móviles, este elemento es una imagen, pero el 35% de estas no se detecta en la respuesta inicial del HTML. Para mejorar el LCP, incluye imágenes críticas con etiquetas <img> que usen los atributos src o srcset y fetchpriority="high".

El Interaction to Next Paint (INP), que ha reemplazado al FID como métrica de respuesta, mide cuánto tarda la página en reaccionar a las interacciones del usuario. Tareas largas (más de 50 ms) bloquean el hilo principal y afectan negativamente al INP. Para solucionarlo, divide estas tareas con scheduler.yield() sin alterar su orden en la cola. Otra estrategia es reemplazar elementos pesados, como vídeos de YouTube, con "fachadas" estáticas que solo cargan el recurso completo cuando el usuario interactúa.

El Cumulative Layout Shift (CLS) analiza la estabilidad visual. El 66% de las páginas web tienen al menos una imagen sin dimensiones explícitas, lo que provoca cambios de diseño. Siempre incluye los atributos width y height en etiquetas <img> y <video> para que el navegador reserve espacio antes de cargar el recurso. Además, evita animar propiedades CSS como top, left o margin, y utiliza en su lugar transform: translate() para evitar desplazamientos inesperados.

Optimización de Metadatos y Estructura de URL

Una vez que se ha trabajado en el rendimiento y la renderización, el siguiente paso clave es optimizar los metadatos y la estructura de las URLs. Esto es fundamental para no perder oportunidades de indexación. Googlebot procesa las aplicaciones web progresivas (PWAs) en dos fases: primero analiza el HTML sin procesar y, posteriormente, ejecuta el JavaScript para renderizar el contenido completo. Por ello, elementos como canonical, rel=amphtml y los códigos de estado HTTP deben estar presentes en el HTML inicial. Si estos elementos se generan únicamente después de ejecutar el JavaScript, podrían no ser detectados o sufrir retrasos importantes. Aquí te explicamos cómo implementar metadatos dinámicos y crear URLs optimizadas.

Implementación de Etiquetas Meta Dinámicas

Las etiquetas meta más importantes (Title, Description, Canonical y Hreflang) deben incluirse directamente en el HTML inicial y no depender únicamente de JavaScript. Aunque etiquetas como noindex y hreflang pueden ser procesadas en la segunda fase de indexación, es mejor que estén disponibles desde el principio mediante Server-Side Rendering (SSR) o Dynamic Rendering. Esto garantiza que los rastreadores las identifiquen de inmediato, sin esperar a que se ejecute el JavaScript.

Si tu PWA utiliza renderización del lado del cliente (Client-Side Rendering), puedes recurrir a librerías que actualicen las etiquetas meta en tiempo real mientras los usuarios navegan. Sin embargo, ten en cuenta que esta técnica solo será efectiva durante la segunda fase de indexación, que puede retrasarse. Para páginas críticas o contenido nuevo, siempre es mejor optar por SSR.

Creación de URLs Limpias y Rastreables

La estructura de las URLs es igual de importante que los metadatos para lograr una buena indexación. Cada pieza de contenido en tu PWA debe tener una URL única y descriptiva, evitando el uso de fragmentos como # o #!, ya que estos son ignorados por los bots debido a que el navegador los procesa localmente sin comunicarlos al servidor. John Mueller, Search Advocate de Google, ha señalado que las PWAs con renderización del lado del cliente pueden ser:

mucho más complicadas que un sitio HTML estático

y que esto representa:

un equilibrio entre un desarrollo más sencillo y una experiencia de usuario atractiva, pero con un SEO más complejo.

Para mantener la experiencia de una Single Page Application sin sacrificar la rastreabilidad, utiliza la History API para actualizar dinámicamente las URLs en la barra de direcciones mientras los usuarios navegan. Además, asegúrate de usar enlaces HTML estándar (<a href="...">) para la navegación interna. Googlebot no sigue de manera fiable eventos onclick en elementos como <span> o <div>, y estos métodos no transmiten PageRank.

Por último, genera un archivo sitemap.xml que incluya todas las URLs dinámicas de tu PWA. Esto permitirá que los motores de búsqueda descubran rápidamente cualquier contenido nuevo.

Seguimiento del Progreso y Medición de Resultados

Después de implementar mejoras en el renderizado y los metadatos, es fundamental comprobar si estas acciones están teniendo un impacto positivo en la visibilidad de tu PWA. El seguimiento constante garantiza que las optimizaciones realmente se traduzcan en un aumento del tráfico orgánico. Según Gary Illyes, Search Advocate de Google, el sistema de indexación Caffeine realiza múltiples tareas como rastreo, renderizado, extracción de enlaces y metadatos, y construcción del índice. Supervisar estas etapas te ayudará a identificar posibles cuellos de botella. Aquí te explicamos cómo usar Lighthouse para evaluar tus avances.

Ejecución de Auditorías con Lighthouse

Lighthouse es una herramienta clave para medir el rendimiento técnico de tu PWA. Disponible en Chrome DevTools y PageSpeed Insights, incluye una categoría específica para PWAs que verifica aspectos esenciales como el registro del service worker y la validez del manifiesto. También cuenta con una sección de SEO que evalúa elementos críticos en la página.

En Lighthouse 10, la puntuación de rendimiento se calcula principalmente a partir de tres métricas: Total Blocking Time (30%), Largest Contentful Paint (25%) y Cumulative Layout Shift (25%). Para obtener resultados precisos, siempre ejecuta las auditorías en modo incógnito y evita interferencias. Las puntuaciones se clasifican de la siguiente manera: entre 90 y 100 es "Buena", de 50 a 89 "Necesita Mejoras", y por debajo de 49 es "Deficiente".

Integrar Lighthouse en tu flujo CI/CD puede ayudarte a detectar problemas de rendimiento y SEO antes de lanzar cambios al público. Si Lighthouse identifica que el elemento Largest Contentful Paint es una imagen, considera usar precarga y formatos modernos como WebP. Además, asegúrate de que tu manifiesto incluya un start_url y que el service worker gestione correctamente la página, ya que ambos son esenciales para la instalabilidad y la indexación.

Monitorización del Estado de Indexación en Search Console

Además de las auditorías técnicas, revisa el estado de indexación en Google Search Console. El informe de indexación de páginas te permite verificar cuántas URLs han sido rastreadas e indexadas correctamente por Google.

La herramienta de inspección de URL es especialmente útil para PWAs con gran dependencia de JavaScript. Con ella, puedes revisar la versión "en vivo" de una página y confirmar si una ruta específica se considera la versión canónica. Si encuentras errores de indexación, utiliza la opción "Validar corrección" para que Google vuelva a rastrear las URLs afectadas, un proceso que generalmente toma unas dos semanas.

Filtra el informe por sitemaps para centrarte en las rutas más relevantes de tu PWA. Además, el informe de rendimiento te ayuda a rastrear clics e impresiones, permitiéndote evaluar si las mejoras de indexación se reflejan en una mayor visibilidad. Por ejemplo, el primer resultado orgánico en Google tiene un CTR promedio del 28,5%, lo que demuestra el impacto de mejorar tu posición.

Si realizas actualizaciones importantes o lanzas nuevas características, utiliza la función "Solicitar indexación" para acelerar el proceso de descubrimiento. También es recomendable revisar el informe de "Estadísticas de rastreo" regularmente, para garantizar que los requisitos de renderización de tu PWA no estén causando tiempos de espera en el servidor.

En Niom Solutions estamos preparados para implementar estas estrategias y optimizar la indexación de tu PWA de manera efectiva.

Resumen de los Pasos Clave

Para mejorar la indexación de una PWA, es importante implementar SSR (Server-Side Rendering) o un enfoque de renderizado híbrido. Asegúrate de usar URLs limpias mediante la History API y evita los fragmentos innecesarios en las direcciones (# o #!). Cada página debe contar con una URL única. Además, configura correctamente el archivo manifest.json y el service worker para garantizar la funcionalidad offline sin interferir con los rastreadores. No olvides que Google exige HTTPS para todas las PWAs, así que implementa una redirección 301 desde HTTP. Por último, utiliza etiquetas rel="canonical" para definir la versión preferida de cada URL y evitar problemas de contenido duplicado.

Después de ajustar la estructura técnica, el siguiente paso es optimizar el rendimiento de la PWA. Esto no solo mejora la experiencia del usuario, sino que también es clave para el SEO. De hecho, el 40% de los usuarios abandona una página si tarda más de tres segundos en cargar. Utiliza service workers para precargar datos y reduce el Time to Interactive (TTI), manteniéndolo por debajo de los 10 segundos en una red simulada 3G.

La supervisión continua es otro componente esencial. Chrome actualiza automáticamente el manifiesto cada 24 horas. Paralelamente, revisa Google Search Console con regularidad para identificar errores de rastreo e indexación. También es recomendable integrar auditorías con Lighthouse en tu flujo de trabajo, lo que te permitirá detectar problemas antes de que afecten al rendimiento orgánico.

Estos pasos son un complemento ideal a las técnicas explicadas en las secciones anteriores y ayudan a maximizar la visibilidad en Google. En Niom Solutions, aplicamos estas estrategias de forma sistemática para garantizar que cada PWA alcance un rendimiento óptimo y una indexación efectiva.

FAQs

¿SSR, prerender o renderizado dinámico: cuál elijo?

Para mejorar la indexación y el SEO de las PWAs, es aconsejable usar técnicas como el renderizado en el servidor (SSR) o el prerenderizado. Estas opciones aseguran que el contenido esté disponible para los motores de búsqueda, evitando los problemas asociados al renderizado dinámico en el cliente, que puede reducir la visibilidad en buscadores.

¿Por qué Google no indexa mi PWA aunque exista la URL?

Google podría tener dificultades para indexar tu PWA si surgen problemas de rastreo o renderizado. Esto puede suceder si no tienes un service worker configurado correctamente para gestionar la página y la URL de inicio. También puede deberse a fallos técnicos en la estructura del sitio o a que el contenido no sea visible para los rastreadores.

¿Qué debo permitir en robots.txt para que Googlebot renderice bien?

Es crucial permitir que Googlebot acceda a todas las áreas importantes de su sitio web. Evite configurar restricciones en el archivo robots.txt que puedan bloquear la indexación de contenido generado con JavaScript. Esto es especialmente relevante porque Googlebot sigue un proceso de renderización en dos fases para indexar correctamente las páginas de las aplicaciones web progresivas (PWA). Si bloquea este acceso, podría afectar negativamente la visibilidad de su contenido en los resultados de búsqueda.

Publicaciones de blog relacionadas

• Checklist: Lanzar tu Web en Menos de 12 Semanas

• Cómo Mejorar el UX/UI de tu Aplicación Web

• Web Lenta: 6 Soluciones para Acelerar tu Sitio

• Cómo Diseñar APIs RESTful para MVPs Exitosos