¿Qué son aplicaciones de una sola página? Es la traducción al español de single-page application (SPA), usa JavaScript para controlar el ciclo de vida de la página. Es una aproximación al diseño web en el que cada nueva página de contenido se carga no desde páginas HTML nuevas, sino que se genera dinámicamente a través de la habilidad de JavaScript de manipular los elementos DOM de la página existente.
Esta tecnología permite que los navegadores carguen las vistas sin tener que volver a cargar todo.
Y también que se diseñen elementos como transiciones personalizadas entre partes de la aplicación.
Google explica que las single-page apps utilizan un patrón de arquitectura web, que se llama app shell model.
Donde las partes compartidas del Interface de usuario en el código, como menús, encabezados, pies de página y otros… se cargan cuando se carga inicialmente la app de una sola página.
Y las diferentes vistas se cargan de forma dinámica en este “cascarón”. Lo que reduce la cantidad de data que se tiene que enviar a la red.
Una SPA, por definición, es una aplicación que, para reducir los tiempos de carga e incrementar la experiencia de usuario, carga la aplicación en el navegador de los usuarios y realiza peticiones asíncronas a diferentes servicios para realizar la funcionalidad, obtener los contenidos, etc.
Es decir, el HTML de nuestra aplicación se genera en la parte cliente (navegador) usando intensivamente Javascript.
Por lo general, cuando Googlebot accede a una página, obtiene el html, localiza los enlaces que contiene, los visita y va indexando todos los recursos (textos, imágenes, documentos, etc) que va encontrando en todos ellos.
Si el bot accede a una SPA, no va a encontrar un HTML indexable, sino una “carcasa” vacía y, por tanto, el SEO de dicha aplicación va a verse perjudicado.
Además, nuestras aplicaciones actuales incluyen nuevas formas de mostrar la información que no son precisamente amigables para los bots de los buscadores.
Los “scrolls infinitos” que van cargando contenidos al usuario según va haciendo scroll vertical, el “lazy loading” de las imágenes o los contenidos de widgets de terceros (sobre todo de redes sociales) hacen que podamos perder SEO si no prestamos atención a su indexación.
Posible soluciones
- Server Side Rendering (SSR)
- Hybrid Rendering
- Dynamic Rendering