Cómo mejorar el posicionamiento SEO de una página web Single Page Application
Las páginas web Single Page Application (también conocidas como SPA) se popularizaron enormemente en 2017 y todavía siguen siendo una de las principales opciones para diseñadores y desarrolladores web que quiere presentar un proyecto a la última. Sin embargo, es un formato que genera numerosos quebraderos de cabeza para los profesionales del posicionamiento web, ya que al construir toda la funcionalidad del sitio desde una única página, puede no resultar una opción óptima para los motores de búsqueda como Google. En este artículo, profundizamos en este problema y vemos cómo podemos solucionarlo.
Antes de comenzar, definamos rápidamente lo que es una SPA y la problemática en la que nos encontramos en cuanto a su posicionamiento en buscadores (SEO). SPA es un tipo de sitio web donde realmente sólo existe un archivo de entrada, el index, y todas las pantallas del sitio se presentan dentro de esa misma página. Las SPA tienen muchas ventajas, como la rapidez a la hora de mostrar contenido al usuario y a la hora de reaccionar ante la interacción, ya que el navegador no tiene que recargar la página entera cada vez que necesita mostrar una nueva pantalla al usuario, o almacenar un dato en la base de datos de lado del servidor. En nuestro artículo Single Page Application, todo un website desde única página encontrarás más información sobre este formato.
Posicionar una página SPA en buscadores, sin embargo, es harina de otro costal, ya que no suelen disponer de contenido en código HTML enviado por el servidor. Al servirse todas las rutas de la aplicación mediante el index, su HTML no presenta el contenido del sitio, sino que generalmente será JavaScript el que lo reciba, como datos en formato JSON. Así que, cuando un motor de búsqueda accede a la SPA sólo podrá obtener un marcado muy elemental, sin nada de contenido y mucho JavaScript.
Esto no aporta gran cosa a la hora de saber cuál es el asunto que se trata dentro de esta página y sus keywords y, por tanto…
… SPA no es la mejor opción si el SEO es tu prioridad
Aunque podemos ser tajantes y confirmar que si el SEO es prioritario es recomendable huir del formato SPA, también es cierto que todo tiene solución. Hoy Google es capaz incluso de ejecutar algún JavaScript del sitio web para entender mejor su contenido. Sin embargo, para obtener el mejor posicionamiento en buscadores conviene que el contenido se entregue mediante código HTML, no mediante JavaScript.
Obviamente, si queremos que nuestro sitio se comporte más como una aplicación que como un sitio de contenido, SPA es la mejor opción. Por suerte, a lo largo de los años, se ha avanzado en varias soluciones que pueden ayudar a conseguir el ansiado posicionamiento en una SPA. Aunque avisamos, ninguna de ellas es totalmente definitiva y todas requieren un trabajo extra para poder conseguir esos resultados mejorados.
Server side rendering
Como hemos comentaro, hoy Google es capaz de ejecutar código JavaScript para conseguir entender el contenido de una SPA. Sin embargo, generalmente no será suficiente para estar posicionados tal como nos gustaría. Entonces, ¿qué podemos hacer?
La solución se llama server side rendering o renderización del lado del servidor. Básicamente, consiste en la realización de un sistema por el cual el servidor es capaz de enviar un HTML con contenido para cada ruta de aplicación, independientemente que luego el sitio se comporte como una SPA, una vez que el usuario ha entrado en él.
El problema es que esta solución generalmente nos obliga a doblar nuestro trabajo: además de construir toda la aplicación con renderización del lado del cliente, tendremos que desarrollar toda la renderización del lado del servidor. Es por ello que diversos frameworks han comenzado a aportar soluciones para mitigar ese esfuerzo adicional. Es el caso de Angular Universal, para aplicaciones Angular, o NextJS para SPAs creadas con React.
En este punto también es interesante hablar del isomorphic rendering, que permite usar el mismo código JavaScript para renderizar del lado del servidor y del lado del cliente. Obviamente, si nuestra SPA requiere de SEO, sería aconsejable buscar una opción isomórfica, lo que nos ahorrará la necesidad de duplicar por completo el coste de desarrollo del proyecto.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.