Aplicaciones web progresivas (PWA) y optimización de motores de búsqueda (SEO)

Progressive Web App (PWA) es un software de aplicación entregado a través de la web. Está construido utilizando tecnologías web estándar como HTML, CSS, JavaScript, etc. Los PWA se usan comúnmente para aumentar la tasa de conversión y el tráfico del sitio web. A partir de 2021, las PWA son compatibles (total o parcialmente) con Google Chrome, Apple Safari, Firefox para Android y Microsoft Edge.

Al ser un desarrollo relativamente nuevo, la optimización de PWA todavía conduce a resultados positivos en la mayoría de los casos y tiene estadísticas asombrosas. PWA Stats informa constantemente sobre los beneficios logrados por los servicios que implementaron PWA.

En general, según el informe TOP 30 PWA, “la tasa de conversión promedio para las aplicaciones web progresivas fue un 36 % más alta que la de las aplicaciones móviles nativas”.

Los PWA son grandes ayudantes cuando se trata de marketing en línea. Es por eso que son populares entre la multitud de SEO. Sin embargo, al igual que React y SEO, la combinación de PWA SEO tiene sus dificultades. En este artículo, arrojaremos luz sobre cómo funcionan las PWA con SEO.

Ejemplos y principales beneficios de PWA

Cualquier servicio web puede ser una PWA. Hay tres requisitos principales para eso:

1. Se ejecuta bajo HTTPS.
2. Incluye un manifiesto de la aplicación web.
3. Implementa un trabajador de servicio.

El objetivo principal de PWA es proporcionar una funcionalidad superior para cada usuario. Aquí está la lista de las principales ventajas que ofrecen las PWA:

1. PWA trae nuevas oportunidades y crecimiento a literalmente cualquier negocio. Combina lo mejor de las cualidades de la aplicación y la web, responde y puede funcionar en cualquier dispositivo, y no requiere necesariamente una red rápida.
2. La seguridad de la capa de transporte lo hace seguro.
3. El trabajador del servicio (un script especial que su navegador ejecuta en segundo plano) permite que las PWA funcionen en modo fuera de línea.

Veamos algunos de los mejores ejemplos de adopción de PWA:

Recomendado para usted: los marcos más populares para crear aplicaciones web progresivas (PWA).

1. Starbucks

El sistema de pedidos de PWA de Starbucks es simple y fácil de usar. Se parece a su aplicación nativa, pero tiene la capacidad de ejecutarse sin conexión cuando un usuario navega por el menú y agrega elementos al carrito. El mejor beneficio de esta solución es el hecho de que PWA es casi dos veces más pequeña que la aplicación estándar de Starbucks. Debido a eso, la empresa aumentó significativamente el número de usuarios de la web.

2. Pinterest

Después de que se descubriera que solo el 1 % de los usuarios móviles de Pinterest descargan una aplicación e inician sesión debido a su bajo rendimiento, la aplicación móvil se reconstruyó sobre la base de la tecnología PWA. Gracias a eso, indicadores como el tiempo dedicado, los ingresos publicitarios y las interacciones principales han aumentado hasta un 40% - 60%.

3. súper

La aplicación web de Uber se reconstruyó como una PWA con el objetivo de brindar un servicio rápido en redes de baja velocidad y en teléfonos inteligentes antiguos que no son compatibles con la aplicación nativa de Uber. Gracias a eso, una aplicación central súper liviana se carga en alrededor de 3 segundos en redes 2G.

La importancia del SEO

SEO tiene que ver con la optimización de su sitio web para los motores de búsqueda (SE). Su objetivo principal es mejorar la clasificación del sitio web en los resultados de búsqueda y atraer a los visitantes. Se basa en algoritmos SE y utiliza palabras clave para ayudar a los motores de búsqueda a mostrar contenido relevante y atraer a un público objetivo a los sitios web. Así es como el SEO puede traer tráfico orgánico a su sitio web, que es el mejor de su tipo. A diferencia del tráfico directo y pagado, puede convertir a la mayoría de sus visitantes en sus clientes y consumidores.

SEO para aplicaciones web progresivas: ¿cuál es el problema?

A pesar de todos los beneficios que brinda PWA, muchos propietarios de sitios web aún dudan en implementar la tecnología. Hay dos razones principales para ello:

1. El miedo a cambiar el sistema existente que ya funciona bien.
2. Poca comprensión de cómo funciona PWA con SEO.

Como dijo John Mueller (analista de Google), “los PWA actualmente no tienen ninguna ventaja en la Búsqueda de Google”.

Muchos PWA se construyen utilizando marcos JS que no son conocidos por su naturaleza compatible con SEO.

Entonces, a diferencia de los sitios web tradicionales basados ​​en HTML, los PWA dependientes de JavaScript son un desafío para el SEO. Es por eso que no ofrecen ninguna ventaja en términos de capacidad de búsqueda. Sin embargo, contrariamente a la creencia popular, esto no significa que los motores de búsqueda no puedan indexar las aplicaciones web progresivas. Solo tienes que usar diferentes técnicas para eso.

Representación del lado del servidor y representación del lado del cliente

La mayoría de los sitios web utilizan la representación del lado del servidor (SSR). Es el enfoque más simple en el que la página se representa en el lado del servidor en lugar de representarse en el navegador. Sin embargo, todo el HTML se carga cada vez que un usuario solicita la página, lo que puede ser problemático cuando la conexión a Internet no es lo suficientemente estable o rápida.

Los PWA basados ​​en JavaScript utilizan la representación del lado del cliente (CSR), donde el contenido se representa en el navegador del cliente. No envía una página HTML completa cada vez que un usuario solicita la página. El archivo JavaScript muestra solo la parte necesaria de la información de la página en el navegador del cliente. Es por eso que la página carga más rápido incluso con una mala conexión a Internet.

Sin embargo, ¿por qué muchos propietarios de sitios web aún se niegan a utilizar la RSE? El problema es el robot de Google. Puede leer el contenido del sitio web en el código que es completamente visible en el documento HTML. La CSR, en su caso, se basa completamente en la capacidad de un motor de búsqueda para procesar JavaScript. Es por eso que existe la opinión de que las aplicaciones de RSE no se pueden indexar. Sin embargo, de hecho, entre todos los motores de búsqueda, Google es el mejor en el procesamiento de JavaScript.

Sin embargo, esto todavía no significa que el problema con JavaScript y SEO esté resuelto: Google admite que el procesamiento de JS no es perfecto. Es decir, el proceso de rastreo de una página basada en JavaScript lleva más tiempo que el de una página HTML. De hecho, esto significa que tendrás que esperar más tiempo para que el contenido de JavaScript aparezca en las páginas de resultados del motor de búsqueda.

Todo esto dificulta que los propietarios de sitios web mejoren la experiencia de usuario de sus visitantes y optimicen su contenido para los motores de búsqueda.

¿Cómo implementar PWA sin perder la optimización de su motor de búsqueda?

Te puede interesar: Magento PWA Studio: ¡La herramienta de aplicación web progresiva para Magento!

1. Aplicar representación dinámica

La representación dinámica muestra diferentes versiones de contenido para diferentes fuentes. El visitante obtiene una versión CSR y el rastreador obtiene una versión renderizada del lado del servidor. Esto permite mejorar la indexación de páginas basadas en JavaScript por parte del bot de Google. De esta manera, brindará la experiencia de usuario más conveniente para sus clientes sin arriesgar el SEO del sitio web.

2. Combine SSR y CSR

Asegúrese de que el rastreador vea las partes más importantes del contenido (que definitivamente deben pasar a los motores de búsqueda) utilizando la representación del lado del servidor. El rastreador recogerá esta información tan pronto como descubra la página. La información restante se procesará automáticamente a través de la representación del lado del cliente durante la segunda etapa del proceso.

3. Cree su PWA utilizando un marco JavaScript compatible con SEO

Nuestra gran recomendación es GatsbyJS. Es bastante fácil crear un sitio web de PWA utilizando este marco (así como convertir el sitio web existente de Gatsby en un PWA). Pre-renderiza su sitio web en un paso de construcción para un rendimiento brillante y sin retrasos, incluso si la conexión a Internet es lenta. Gracias a eso, sus visitantes obtienen una experiencia de navegación similar a la de una aplicación.

4. Recurra a soluciones PWA listas para usar

Hoy en día, las PWA son más asequibles que nunca. Por lo tanto, si no quiere perder mucho tiempo y recursos en el desarrollo de PWA, puede usar algunas soluciones de PWA listas para usar que están hechas de acuerdo con los principios de SEO y probadas exhaustivamente, para que pueda estar seguro de la calidad. del código

5. Estudio PWA

PWA Studio se lanzó en 2019 como un estándar de tecnología web diseñado para brindar una experiencia similar a la de una aplicación. De hecho, no es exactamente una solución lista para usar: es más bien una colección de herramientas y funciones para el desarrollo de PWA. Esta solución es bastante compleja e impresionante, pero requiere ajustes adicionales.

6. EscandiPWA

ScandiPWA es una solución de código abierto, basada en React y Redux. Está diseñado con el objetivo de mejorar los sitios web con velocidad y la capacidad de trabajar sin conexión. También se actualiza constantemente, por lo que siempre obtendrá nuevas funciones.

7. Escaparate de Vue

Esta es una de las primeras soluciones PWA disponibles en el mercado. En realidad, Vue Storefront es una solución universal todo en uno, pero requiere recursos de mantenimiento adicionales.

¿Cómo evitar errores relacionados con SEO durante la implementación de PWA?

Para desarrollar una PWA bien diseñada que lo ayude a ganar en SEO al brindar una experiencia de usuario mejorada, debe:

1. Realizar auditoría SEO. Esto ayudará a detectar y solucionar todos los problemas relacionados con el SEO.
2. Consulta con especialistas en SEO. Cuando construye su PWA usando React (por ejemplo), sus especialistas en SEO deben saber exactamente cómo combinar React y SEO. De esta manera evitará la mayoría de los posibles problemas que pueden aparecer después de la implementación.
3. Cíñete a los principios fundamentales de SEO cuando desarrolles PWA. En el artículo relacionado con Progressive Web Apps SEO, publicado por Google, la empresa da consejos sobre cómo construir PWAs indexables. Algunos de ellos son como tales:
   • Cada página debe estar disponible a través de una URL específica. Gracias a eso, cada página se rastreará de forma independiente.
   • El sitio web debe tener un diseño receptivo y estar optimizado para dispositivos móviles.
   • Utilice la mejora progresiva. Gracias a esa estrategia, las PWA funcionan bien incluso en navegadores antiguos.
   • Verifique cómo Google muestra su página usando Google Search Console regularmente. Por lo tanto, siempre sabrá cuándo es el momento de actualizar o cambiar algo.
   • Esté atento al tiempo de carga de la página. Google mide la velocidad de carga de cada página, y si la velocidad de carga de su página se ralentiza, Google la bajará de rango.

También te puede interesar: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

La línea de fondo

La optimización de PWA ofrece muchas oportunidades para el marketing en línea y genera crecimiento para la gran mayoría de las empresas. De hecho, la mejor práctica de SEO que suele aplicar PWA es la interfaz fácil de usar: responde, está estructurada y se procesa rápidamente. Sin embargo, los PWA todavía no brindan una ventaja directa al SEO, y los problemas relacionados con el SEO son los que impiden que muchos comerciantes implementen PWA en sus sitios web. Por eso es importante tener cuidado y utilizar diferentes técnicas como el renderizado dinámico, la combinación de SSR y CSR, o soluciones PWA listas para usar. También debe involucrar a los especialistas en SEO en el proceso desde el principio.

Como puede ver, puede utilizar tanto SEO como PWA combinándolos con éxito. También se debe tener en cuenta que PWA es un tipo de software joven e innovador, por lo que se esperan mejoras.

 Este artículo está escrito por Ivan Jones. Ivan es especialista en SEO en Clockwise.Software con más de 5 años de experiencia en la industria. Conoce los matices que lo han ayudado a mantener los sitios web en la parte superior de los resultados de búsqueda de Google durante años. Al ser un ávido aprendiz, está interesado en probar nuevos enfoques que puedan beneficiar los resultados de SEO.