Ottimizzare le pagine per la SEO: Gatsby e AWS, una combinazione perfetta

Uno degli aspetti più importanti da curare oggi nel web, soprattutto se hai intenzione di sviluppare un blog, è la SEO.

In passato non era molto semplice ottimizzare un blog se dovevi gestire i dati dinamici provenienti da un DB ma oggi la storia è diversa e abbiamo diverse soluzioni da poter usare.

Per il nuovo sito abbiamo deciso di usare React con l’ausilio del framework Gatsby, Strapi per il backend/backoffice e MongoDB nella versione managed di AWS.

Una volta scelti gli strumenti da usare ci siamo concentrati su come ottimizzare le pagine per la SEO e qui abbiamo analizzato diverse strade.

Una possibile soluzione era quella di usare il SSR (Server Side Rendering) che ci consente di superare uno dei limiti dei bots, ovvero il dover eseguire codice JS. Analizzando come il bot di Google lavora, volevamo evitare di far eseguire il codice JS a Google a ogni richiesta della pagina (Client Side Rendering) come nello schema sotto:

Questo processo, infatti, è molto più lungo ed esigente di risorse rispetto ad analizzare una semplice pagina html e avrebbe comportato il superamento della soglia massima di pagine che il bot può analizzare in un arco di tempo.

Google, che gestisce il 90% delle ricerche web, impiegherebbe troppo tempo con il suo bot ad analizzare tutte le pagine e il risultato è che l’indicizzazione non sarà completata.

Il server side rendering ha però la necessità di chiedere i dati al backend a ogni richiesta e questo avrebbe comportato la necessità di rendere il backend scalabile e avrebbe richiesto una soluzione dedicata al di là del semplice hosting.

Abbiamo dunque scelto di utilizzare un altro metodo, lo SSG (Static Site Generator), che ci consente di fare un rendering delle pagine statiche in fase di build.

Questa soluzione ci consente di riversare il nostro sito web su un bucket S3, godere di ottime prestazioni, soprattutto in ottica SEO, e scalabilità abbattendo i costi di mantenimento dell'infrastruttura.

Ogni volta che viene aggiunto o modificato il contenuto, verrà eseguita una pipeline su GitLab che avvierà la build del progetto, generando pagine html statiche che andrà a riversare su un bucket S3 a cui abbiamo collegato CloudFront per la CDN.

Grazie a uno dei punti di forza di Gatsby, la Incremental Build, possiamo risparmiare tempo durante la fase di build generando, di volta in volta, solo le pagine aggiunte o modificate. Le prestazioni dei servizi AWS e il loro costo contenuto permette di risparmiare anche sul fronte economico.

Infatti, S3 ha un costo di 1€ per 4GB all’anno e 1€ per 2M di richieste in lettura e, se a questo aggiungiamo anche il fatto che la CDN ridurrà il numero di richieste in lettura, possiamo renderci conto di quanto sia conveniente.

In conclusione, Gatsby e AWS sono stati la perfetta combinazione per ottenere un sito sicuro e dalle elevate prestazioni.

Un risultato che sicuramente farà felice i bot di Google.