Angular e SEO: luci e ombre del framwork di Google che Google non premia

Il toolkit sponsorizzato da Google permette uno sviluppo e una gestione dinamica e flessibile di siti web molto complessi, ma essendo scritto in Java Script non può essere letto dai bot dei motori di ricerca. Vediamo come funziona il popolare framework e quali sono le possibili soluzioni in ottica SEO.

Angular: il language framework promosso da Google

Avete un sito fantastico, pieno di contenuti ben strutturati e ricco di funzionalità per l’e-commerce che molti concorrenti vi invidiano, ma siete sconosciuti o quasi a Google? Provate a chiedere al vostro sviluppatore. La chiave del mistero ce l’hai lui e molto probabilmente la risposta sarà: Angular. Parliamoci chiaro, niente contro il Language Framework promosso da Google e realizzato da molti tra i migliori sviluppatori al mondo: Angular è un linguaggio formidabile per costruire siti complessi e particolarmente customizzati, con ottime grafiche e una grande varietà di widget.

Il motivo per cui negli ultimi anni questo framework ha riscosso un enorme successo sta nella rivoluzione di paradigma che ha portato: un classico sito in PHP o HTML si basa su richieste HTTP che dal client (il browser) vanno al server e questo risponde passando le pagine richieste (che in parte attinge da un database), salvo che si appoggi su una CDN la quale servirà più velocemente i dati prendendoli da una cache.

Con Angular il funzionamento è molto diverso: il rendering è affidato in larga parte al client stesso tramite AJAX, senza caricare il server con l’esecuzione del rendering. Chiaramente questo è un vantaggio per le prestazioni.

C’è tuttavia un problema di non poco conto: i bot di Google non vedono le pagine scritte con Angular.

Perché I bot di Google non vedono Angular?

Poiché Angular ha tutto ciò che si può desiderare per realizzare un sito internet complesso, strutturato e con una buona UX, eccetto l’essenziale ai fini di Google: la leggibilità da parte del motore di ricerca, al quale appaiono solo delle righe in Java Script.

Il risultato è che quel sito sarà praticamente come inesistente, almeno per il search engine, e impossibile da indicizzare. In questo caso le strade da intraprendere sono due: eseguire un intervento radicale, che significa se non rifare il sito da capo, quanto meno attuare procedure molto complesse per rendere i settaggi funzionali; oppure intervenire alla radice per far sì che il codice diventi leggibile dai bot dei moori di ricerca, e quindi sia indicizzabile.

Come funziona Angular: pregi e difetti

Ma facciamo un passo alla volta e vediamo che cosa è Angular, perché non è visibile proprio a Google, che ne ha supportato lo sviluppo, e cos’è, ma soprattutto può fare, uno smart layer. 

Da quando è apparso sul mercato nel 2016 (nato dal precursore AngularJS rilasciato nel 2010), Angular 2 ha avuto un crescente successo tra gli sviluppatori di tutto il mondo e si è imposto come uno dei framework in Java Script più utilizzato.

Un sondaggio di StackOverFlow nella propria comunità di sviluppatori ha evidenziato come il linguaggio di gran lunga preferito negli ultimi sette anni sia proprio JavaScript, sia per il backend sia per il frontend, tanto per applicazioni desktop quanto per quelle mobile, senza trascurare il versante server.

Il motivo della preferenza per Java Script, e di conseguenza per Angular, risiede nella possibilità di gestire con maggiore flessibilità e dinamicità la sempre crescente complessità delle funzionalità e delle applicazioni dei siti internet. In particolare, Angular si propone come un toolkit per l’ottimizzazione del linguaggio HTML con l’eliminazione, come si è visto, di molti passaggi e la sostanziale standardizzazione di altri.

L’architettura di Angular

Come abbiamo detto Angular è un noto framework web scritto in JavaScript – è nato come libreria di questo – per poi proseguire la sua evoluzione autonomamente. La sua architettura è di tipo modulare e si basa quindi sulla composizione di strutture a partire da elementi semplici. Vediamo in estrema sintesi quali sono gli elementi di cui si compone:

  • Moduli: si tratta di un contenitore capace di ospitare al suo interno altri moduli
  • Componenti: il modulo è un elemento che è deputato a gestire un determinato ambiente, detto vista, e gestire il flusso di dati da e verso questa.
  • Template. Il template è un pezzo di codice HTML che ha lafunzione di renderizzare il componente al quale è associato
  • Metadati: sono le informazioni che permettono di collegare il componente con il template
  • Direttive: sono delle istruzioni attraverso le quali è possibile customizzare il codice e decidere come renderizzarlo
  • Servizi: si tratta di istruzioni che hanno lo scopo di guidare alcune importanti operazioni, come ad esempio il recuper di dati dal server modulare. Questo è dovuto a come è progettata la sua struttura. Moduli plugin, lazyloading, contenuti dinamici e così via: l’architettura modulare di Angular offre un livello di scalabilità invidiabile.

     

  • Tooling: Angular è un framework veramente completo, ricco di funzionalità è modalità di sviluppo che lo rendono sotto questo aspetto una soluzione davvero interessante.
  • TypeScript: Se conoscete JavaScript, allora lavorare con TypeScript sarà facile per voi perché rappresenta la versione più innovativa di ECMAScript.
  • Modelli: con Angular, è possibile ottenere modelli che sono versioni migliorate di HTML. Questi modelli presentano una leggera curva di apprendimento, ma di solito è più pulito del markup JavaScript e delle API quando si guarda il codice.
  • Risposta del server: Angular è un framework ottimizzato per migliorare le prestazioni della CPU. Angigular è un framework agile che è in grado di supportare anche il caching.
  • Architettura MVVM: L’architettura Model-View-ViewModel e Model View Controller offre una base super reattiva e veloce per un’applicazione. Poiché si tratta di modelli di progettazione, la responsabilità degli sviluppatori di app è quella di impostare il codice di conseguenza.

Potremmo invece definire Angular “bad” per i seguenti aspetti:

  • Semplicità: Angular è facile da usare, ma non è sempre così semplice. Occorrre valutare bene se la curva di apprendimento necessaria per padroneggiarlo vale la pena in base ai progetti che si stima di realizzare con questo framework.
  • Framework pesante: su questo aspetto c’è da dire che la completezza va di pari passo con il peso. La grande quantità di componenti e servizi di cui si compone lo rendono piuttosto pesante.
  • Migrazione: Il porting di jQuery/legacy js all’architettura Angular è difficile, e questo è il motivo per cui molti evitano di scegliere Angular per i loro progetti. Oltre a questo, Angular ha un ciclo di vita di sviluppo molto veloce e iterativo, con conseguente lancio frequente di nuove versioni di Angular e il rischio di mancata retrocompatibilità che ne consegue

Quando Google declassa un sito nel ranking

Tornando al problema della difficile lettura di Angular da parte dei crawler, si può dire che il “baco”, ai fini ricerca risiede proprio in questo: il sito apparirà come una sequenza di righe in JavaScript, letteralmente inintelligibili per Google. Il motore di ricerca è infatti semantico e non discrimina i contenuti in Java Script.

Non solo: Google non avvisa del problema il web site owner, ovvero non segnala che ai fini dell’indicizzazione il sito è scritto “male”, e non infligge neanche la massima penalizzazione, ovvero la non-indicizzazione (che sarebbe già un segnale evidente). Semplicemente lo declassa nel ranking, rendendolo di fatto poco visibile o scarsamente rintracciabile per gli utenti che effettuano una ricerca coerente con i contenuti del sito stesso.

Alcune possibili soluzioni

Se si decide di optare per Angular è bene sapere che la strada verso il ranking nelle prime posizioni sarà tutta in salita. Ciò detto negli anni sono state studiate diverse solizioni per ovviare alla mancata leggibilità dei siti scritti con questo framework. Tecniche più o meno artificiose, workaround da bottega dell’alchimista e così via,

L’altra soluzione è l’installazione di uno smart-layer che lasciando inalterata l’architettura e le funzionalità base del sito rimetta le cose in ordine ai fini della lettura dei contenuti semanticamente rilevanti da parte di Google e quindi ai fini dell’indicizzazione. 

È quel che fa iSmart Frame: senza andare ad incidere nella configurazione del sito – operazione che rischierebbe di comprometterne il delicato ecosistema – trasforma in HTML e renderizza il JavaScript, mantenendo inalterati i Java di animazione. In altri termini, non cambiando nulla nel framework, si limita a renderlo leggibile a Google. Non solo: iSmartFrame migliora nettamente la user experience del sito, fondamentale per la conversion, aumentando un altro dei parametri cari a Google ai fini dell’indicizzazione, ovvero la velocità di caricamento.

iSmartFrame: come risolvere i problemi di visibilità

Così, chi continua a preferire e a trovare più rispondente alle proprie esigenze Angular – ed è il caso delle aziende più grandi e strutturate e degli e-commerce più complessi e bisognosi di molte funzionalità – potrà tranquillamente utilizzare l’ambiente di sviluppo supportato da Google.

Per emendarne l’invisibilità al principale motore di ricerca, basterà aggiungere uno strumento di immediata e facile applicazione come iSmartFrame, che si applica efficacemente come un layer fra l’utente e il CMS originario, senza toccare quest’ultimo. Tale unione di strumenti e soluzioni consentirà di avere un sito di prima qualità per ricchezza di funzionalità e accuratezza dei contenuti, che sarà premiato, proprio per questo, anche da Google.