AngularJS SEO: come ottimizzare siti in AngularJS per Google

Hai realizzato il tuo sito con AngularJS e vuoi capire come ottimizzarlo per Google? Nella guida AngularJS SEO ti spiego le migliori soluzioni per procedere alla corretta ottimizzazione.

Indice della Guida AngularJS SEO:

• Che cos’è AngularJS
• Vantaggi di AngularJS
• Perché AngularJS è problematico per la SEO
• Come ottimizzare AngularJS per la SEO
• SEO e AngularJS in sintesi

Che cos’è AngularJS?

AngularJS è un framework JavaScript sviluppato e mantenuto da Google, che consente il caricamento di contenuti da una singola pagina (Single Page Applications).

La sua popolarità è in continuo aumento e questo comporta anche la continua evoluzione di tools di supporto per gli sviluppatori.

Questa definizione potrebbe risultare enigmatica se non hai familiarità con i linguaggi di programmazione, quindi cerchiamo di entrare più nel dettaglio per fare chiarezza.

I siti web vengono costruiti con il codice e i tre linguaggi di codice più comuni e utilizzati sono:

• HTML: linguaggio di markup che definisce le modalità di formattazione del contenuto di una pagina web;
• CSS: linguaggio che gestisce lo stile e la presentazione grafica di una pagina web;
• JavaScript: comunemente abbreviato in JS, è un linguaggio di programmazione lato client, utilizzato per la creazione di effetti dinamici su un sito.

Uno dei motivi principali per cui i siti utilizzano JS, è che il codice risulta più facile da gestire e riutilizzare rispetto alle pagine HTML / CSS standard.

Inoltre JavaScript permette di aggiungere molte funzionalità alle pagine di un sito, tra cui:

• banner interattivi;
• caroselli di immagini;
• zoom per elementi visivi;
• ecc.

E’ anche facile da scalare e consente ai programmatori di apportare tutte le modifiche necessarie per migliorare l’esperienza utente in tempi rapidi.

Un sito basato su AngularJS non memorizza le singole pagine come file separati, carica invece il contenuto che gli utenti richiedono lato client, tramite una singola applicazione.

Ciò significa che, invece di caricare una nuova pagina per visualizzare contenuti diversi, sostituisce semplicemente il contenuto all’interno della stessa pagina.

Tutte le interazioni con il contenuto avvengono quindi sulla medesima pagina tramite chiamate AJAX. Ecco perché queste proprietà web sono chiamate Single Page Applications (SPA).

Vantaggi di AngularJS

Creare applicazioni e siti web con AngularJS presenta diversi vantaggi tecnici, tra cui:

• Registrazione delle callback: con questo framework non avrai più bisogno di preoccuparti delle funzioni di callback e velocizzerai i tempi di sviluppo;
• Modifica del DOM semplificata: quando si lavora con AJAX, una tra le pratiche più difficili riguarda la gestione delle manipolazioni di basso livello che si possono fare al DOM. Con AngularJS potrai descrivere nel dettaglio come l’applicazione dovrà comportarsi in base a quale azione e pagina senza doverti preoccupare di altro;
• Spostare dati da e alla nostra interfaccia: altro aspetto complesso è tenere traccia di tutti i dati che un’applicazione CRUD, molto basata agli effetti AJAX, può scatenare. Richieste, moduli da compilare e molto altro succede all’interno dell’applicazione. Avere un framework che ti aiuta a gestire ogni aspetto non può che essere d’aiuto;
• Minore codice di inizializzazione: tendenzialmente il codice necessario all’interno di un’applicazione AJAX è veramente tanto. Tutti questi scambi vengono facilitati con l’integrazione di questo framework, che permette così di abbattere i tempi di sviluppo della propria applicazione.

Tali vantaggi comportano che gli sviluppatori commettono meno errori e di conseguenza i team tecnici dedicano meno tempo a rivedere il codice per correggerlo.

Per gli utenti meno tecnici i punti di sopra significano:

1. Il contenuto carica molto più velocemente, poiché non è necessario caricare un nuovo codice HTML ad ogni richiesta. Ciò si traduce in un’esperienza utente migliore in termini di percezione di velocità di caricamento dei contenuti.
2. Velocizzare il processo di sviluppo web, poiché il programmatore deve creare solo una pagina e successivamente controlla il resto con JavaScript.

Tuttavia, i siti realizzati con AngularJS non sono semplici da ottimizzare dal punto di vista SEO, poiché sono privi di tutti gli elementi necessari per farli posizionare bene su Google.

Perché AngularJS è problematico per la SEO

Per capire i motivi per cui AngularJS è complesso da gestire dal punto di vista SEO, dobbiamo prima capire come Google effettua il rendering di JavaScript.

Il processo prevede essenzialmente 2 passaggi:

1. Il motore di ricerca indicizza il contenuto HTML della pagina così com’è, senza l’elemento JavaScript;
2. Successivamente esegue il rendering del contenuto JS della pagina e lo analizza.

Affinché ciò accada, Googlebot deve prima scansionare l’URL e successivamente aggiungerlo in una coda di attesa per il rendering JS.

Il crawler può impiegare dalle 2 alle 4 settimane per tornare su quell’URL ed eseguire il rendering JavaScript.

Sebbene questo metodo permetta a Google di eseguire efficacemente la scansione dei contenuti JS di un sito, eventuali modifiche ai contenuti potrebbero non essere rilevate per addirittura un mese.

Questa circostanza, insieme alle peculiarità proprie di AngularJS, crea non pochi ostacoli all’ottimizzazione SEO per i motori di ricerca.

Inoltre, chiamando il contenuto tramite connessioni API, la Single Page Application rimuove tutti i contenuti dal codice effettivo della pagina.

A differenza di una pagina HTML tradizionale che contiene tutto il contenuto del sito, una SPA include solo la struttura di base della pagina e il contenuto viene mostrato tramite una chiamata API dinamica.

Infatti, se provi a visualizzare il codice sorgente oppure la cache di Google durante questo lasso di tempo, quello che vedrai sarà appunto una pagina bianca.

In ottica SEO questo è un grosso ostacolo, poiché la pagina non contiene l’HTML effettivo nel codice sorgente e di conseguenza sono assenti tutti quegli elementi che Google dovrebbe indicizzare (contenuti testuali, immagini, ecc.) per ottenere le migliori performance in termini di posizionamento.

Cosa può fare allora un consulente SEO per ottimizzare o siti realizzati in AngularJS?

Come ottimizzare AngularJS per la SEO

Esistono diverse soluzioni per garantire che un sito realizzato con AngularJS venga sottoposto a scansione e indicizzato in modo corretto da Google:

• Rendering Dinamico
• Rendering Statico Iniziale
• Google CodeLabs e #PushState
• Rendering lato Server con Angular Universal

Rendering Dinamico

Il rendering dinamico è un’opzione che consiste nel creare una versione HTML del sito da inviare a Google per la scansione e il rendering.

Stando alle dichiarazioni ufficiali, generalmente Google non considera il rendering dinamico come cloaking se genera contenuti simili a quelli visti dall’utente.

Il rendering dinamico è attualmente inserito come soluzione valida anche nella documentazione ufficiale di Google.

In questo modo è possibile creare una versione estremamente veloce delle pagine web per la scansione e l’indicizzazione, offrendo allo stesso tempo agli sviluppatori front-end la possibilità di aggiungere qualsiasi elemento desiderino per migliorare l’esperienza utente.

L’idea di creare una versione separata del sito, consente di risparmiare tempo di produzione e permette al team di sviluppo di concentrarsi sul front-end, mentre al team SEO di ottimizzare la versione in HTML.

Esistono alcuni servizi, come ad esempio Prerender.io e Huckabuy.com, che consentono di creare versioni cache delle pagine che Google può correttamente scansionare e indicizzare.

Google offre anche una soluzione che sfrutta Renderton, un codelab open source basato su Headless Chromium.

Il problema che sorge con il pre-rendering, è che Google potrebbe deprecarlo non garantendo l’indicizzazione futura delle pagine (per tale ragione è sempre meglio chiedere una consulenza SEO professionale per scegliere la soluzione migliore).

Ciononostante è probabile che Google continuerà a supportare questa opzione e potrebbe addirittura sceglierla come suo metodo preferito, poiché consente di accelerare il processo di scansione e il rendering delle pagine web.

Rendering Statico Iniziale

Questo metodo consente di lasciare alcuni elementi fondamentali per la SEO (tag H1, contenuto testuale, ecc.) nel codice sorgente e di conseguenza Google può rilevarli prima del rendering JS.

Qual è la differenza tra rendering statico iniziale e rendering dinamico?

Nel primo caso viene fatto il rendering della prima visualizzazione dell’app nel back-end e viene fornito un HTML statico. Poi, per ogni visita successiva, viene caricata la versione con il framework JavaScript.

La criticità principale di questo metodo è che Google tende a visitare il sito più di una volta, e può quindi rimanere bloccato in un loop e sprecare così crawl budget nel tentativo ripetuto di accedere al sito.

Quando si opta per questa implementazione, bisogna quindi augurarsi che il rendering iniziale venga percepito durante la prima scansione.

Purtroppo, anche questa soluzione può rivelarsi inadatta in alcune occasioni, in base alle risorse caricate e alla velocità di erogazione, e non è sempre in linea con il comportamento di Googlebot.

Google CodeLabs e #PushState

Codelabs di Google guida gli sviluppatori attraverso gli elementi SEO più importanti che dovranno essere visualizzati su una pagina.

Le best practice principali sono:

• Utilizzare #PushState e le API History per modificare l’URL;
• Aggiungere elementi importanti (meta tags, rel canonical, ecc.) sia sulla pagina che tramite il DOM;
• Assicurarsi che tutti i link interni siano mostrati nel codice di base e non come on-click events;
• Caricare dinamicamente il contenuto.

Il problema principale di questo metodo è che il rendering del contenuto potrebbe richiedere più tempo per il caricamento.

Inoltre, dovrai personalizzare il tool di web analytics per assicurarti che stia tracciando ogni visita come una visualizzazione di pagina unica.

Rendering lato server con Angular Universal

Un ulteriore soluzione consiste nell’utilizzare l’estensione Angular Universal per creare versioni statiche delle pagine di cui fare il rendering lato server.

Queste risultano perfettamente scansionabili e indicizzabili da Google.

SEO e AngularJS in sintesi

AngularJS è un framework per applicazioni web client side, sviluppato da Google e basato su JavaScript.

Offre incredibili opportunità per migliorare la user experience e ridurre i tempi di sviluppo web. Allo stesso tempo presenta diverse problematiche che vanno gestite dal punto di vista SEO.

Un sito creato con AngularJS carica tutto il suo contenuto su un’unica pagina. Il template rimane invariato e soltanto la copia viene ricaricata, per mostrare le informazioni richieste dal visitatore.

Le applicazioni a pagina singola non contengono gli elementi di codice necessari per far eseguire la scansione e l’indicizzazione del contenuto da parte di Google.

Fortunatamente però, la scelta di servizi SEO professionali può superare questo ostacolo ricorrendo alle seguenti opzioni:

• Usare il rendering dinamico con una piattaforma, come Prerender.io o Huckabuy;
• Creare un ibrido AngularJS e HTML che prende il nome di Rendering Statico Iniziale;
• Utilizzare Google CodeLab per aggiungere gli elementi essenziali per l’ottimizzazione On Page;
• Usare l’estensione Angular Universal per creare versioni statiche delle pagine del sito perfettamente scansionabili e indicizzabili da Google.

Qualunque metodo scegliete per ottimizzare il vostro sito, il mio consiglio è sempre quello di lavorare in sinergia con un team di sviluppo esperto, per ottimizzare al meglio i siti dei propri clienti.