Come fare SEO con AngularJS

SEO CON ANGULARJS
Come aiutare Google ad indicizzare un sito sviluppato con AngularJS

Giovanni Sacheli @evemilano
 Partner @ Searcus Swiss Sagl
 Blogger @ evemilano.com
 Consulente SEO dal 2009
 Svolgo SEO audit tecnici per siti
multilingua in Svizzera, Italia,
Danimarca, Germania, Francia
e UK.
 Professore Web Marketing alla
Franklin University Switzerland
di Lugano
 Seminari e Workshop aziendali
SEO Advanced e AdWords
 Relatore al SEO Tool Day, La
Settimana della Formazione,
Advanced SEO Tool
 Docente SEO per Full Metal
Marketing

Rendering lato client
Sviluppo rapido app dinamiche
Richiede un fine-tuning per la
generazione di URL SEO friendly
AngularJS è un framework JavaScript
per lo sviluppo di applicazioni Web
client side.
Pur essendo relativamente giovane
(la versione 1.0 è stata rilasciata nel
2012), il progetto ha riscosso un
notevole successo.
Non è da sottovalutare l’influenza che
ha avuto nel successo di Angular il
fatto che sia supportato da Google.
AngularJS
Cos’è AngularJS? Cosa cambia?

Diffusione AngularJS
Quasi mezzo milione di siti web sviluppati in AngularJS. Fonte: https://trends.builtwith.com/javascript/Angular-JS

AngularJS gioie e dolori
AngularJS fornisce molte funzionalità ed è uno strumento relativamente semplice
ma potente per sviluppare rapidamente applicazioni web:
–Il rendering lato client delle pagine,
–lo scambio asincrono dei dati,
–aggiornamenti dei contenuti senza un aggiornamento della pagina,
–la costruzione di un modello HTML –
…sono tutte funzioni utili che hanno portato questi framework in JS,
però…

Però… se vuoi ricevere traffico organico da Google…
Devi creare con queste tecnologie una struttura accessibile agli spider dei
motori di ricerca.

Framework in JS? Solo quando serve!
 Servono maggiori
competenze
tecniche per ottenere
gli stessi risultati in
termini di output HTML
e quindi visibilità
organica rispetto ad
altri linguaggi web.
 Evita una landing in
AngularJS, usalo
quando e se serve!
 Se sviluppi con un
framework JavaScript
preventiva tempi duri
per competere in SERP.

Motori di Ricerca e JavaScript
I motori di ricerca non amano JavaScript, è risaputo…
Servono maggiori risorse per scansionare e renderizzare i contenuti invece che
scansionarli già renderizzati. Google ha le risorse per farlo.
Non tutti I MdR hanno queste risorse. Se il tuo target è in Russia e vivi di
Yandex allora evita JS.

Cosa cambia per i MdR? Il rendering della pagina
 Simple HTML page call
 Browser invia richiesta HTTP
 Web server contatta Database
 Web server compila HTML
 Web server fornisce HTML +
CSS
 AJAX page call
 Browser invia Javascript call
 Ajax engine interpreta la call e
invia richiesta HTTP
 Web server contatta Database
 Web server fornisce JavaScript
 Ajax Engine interpreta risposta
JavaScript
 Crea HTML + CSS
 Modifica il DOM

Codice HTML di un sito Angularjs. Trova il testo!
 http://www.pso-trieste.eu/#/home  view-source:http://www.pso-trieste.eu/#/home

Con JavaScript disattivato nel browser

La tag ng-App – A Kind of Magic
 La tag ng-app crea la
magia: indica ad
AngularJS come
manipolare il DOM.
 La tag ng-app è una
direttiva nel modulo ng
di AngularJS che indica
al framework quale
elemento del DOM
dovrà modificare.
 La tag ng-App può
agire a livello di:
– Intera pagina
– Singola tag
– Singolo div

Nell’ultimo anno Google ha fatto
progressi migliorando le sue capacità
di crawling e rendering di pagine web
e siti sviluppati in Javascript.
Oggi Googlebot (in teoria) esegue il
rendering delle pagine web come se
fosse un browser. Hai presente
Google Chrome?
Google e AngularJS – una «relazione complicata»

…And then, we also do content
rendering. And this is something
that Google has talked about a
lot in the past couple of years.
It’s new for us over the past few
years. It’s a big deal for us that
we are much closer to taking
into account the JavaScript and
CSS on your pages…
–How Google Works –
Paul Haahr, Software
engineer at Google, @ SMX
Aprile 2016
–PS: non assomiglia ad
Alessandro Cecchi Paone?
Le intenzioni ci sono…

Googlebot segue i redirect in JavaScript
Googlebot considera i redirect JavaScript con la funzione “window.location” nello
stesso modo di un redirect 301 dal punto di vista dell’indicizzazione.
NOTA: in alcuni test mi è capitato che:
–Se redireziono con 301 un URL verso altro URL con hashbang, Google indicizza
URL senza hashbang e quanto lo segue.
Es redirect 301: da http://ciccio.it/#!/shop a http://ciccio.it/#!/online
Google indicizza http://ciccio.it
–Se redirezioni con 302 un URL verso altro URL con hashbang, Google indicizza
URL con hasbang.
Es redirect 302: da http://ciccio.it/#!/shop a http://ciccio.it/#!/online
Google indicizza http://ciccio.it/#!/online

Googlebot segue i link in JavaScript
Funzione «onClick» inserito nella tag «a»
<a href=“...” on-click=“funzione1()”>Link</a>
Funzione «javascript:window.location» all’interno della tag «a»
<a href=“javascript:funzione1();”>Link</a>
Funzione “javascript:openlink()” esterna alla tag «a» ma chiamate
all’interno dell’attributo href
<div href=“javascript:funzione1();”> </div>
<div href=“http://pippo.pluto.com/aaa” on-
click=“funzioneCheNavigaIlLink()”>Link</div>

Google è in grado di interpretare
elementi di layout ed elementi
comuni di una pagina web, ma non
prova ad eseguire gli eventi in
JavaScript per vedere cosa succede.
È necessario fornire link HTML
classici in tag «a». Contenuti che
richiedono l’esecuzione di un evento
attraverso un link esterno alla tag
«a» potrebbero non venire indicizzati.
Utilizzando altri metodi si rischia
che Googlebot ignori quegli elementi,
oppure addirittura smetta del tutto di
scansionare la pagina.
Googlebot non esegue eventi

Googlebot ha un tempo massimo
di attesa per eseguire JavaScript.
Contenuti che impiegano più di 4
secondi per essere renderizzati
potrebbero non venire indicizzati.
Googlebot non aspetta all’infinito

COSA È CAMBIATO RISPETTO AL
VECCHIO STANDARD DI CRAWLING?

Cosa è cambiato?
Per dirla brevissima…Prima Google consigliava di usare il pre-rendering delle
pagine, ora invece dice che possiamo anche farne a meno.
–vatti a fidare! - NdR

Il vecchio schema di Scansione AJAX (deprecated)
https://webmasters.googleblog.com/2009/10/proposal-for-making-ajax-crawlable.html - https://goo.gl/xwPBKd

Il vecchio schema di Scansione AJAX (deprecated)
Processo Esempio URL
1. URL “stateful” di partenza generato dal framework JS
example.com/contact.html#state
2. Google e Bing propongono di aggiungere il
FRAGMENTTOKEN (!) dopo il dash (#) per riconoscere il
contenuto in JS. Il nuovo URL viene definito Pretty URL
example.com/contact.html#!AJAX
3. I crawler mappano i Pretty URL nell’indice, ma in fase di
crawling richiedono al web server gli Ugly URL, sostituiscono
l’hashbang (#!) Con ?_escaped_fragment_=
example.com/contact.html?_escaped_fragment_=AJAX
4. Quando il web server riceve la richiesta per un Ugly
URL attiva un headless browser che renderizza la pagina JS e
crea una istantanea HTML da fornire agli spider con lo stesso
DOM che avrebbe una pagina renderizzata da un browser
client. I motori di ricercano indicizzano sul Pretty URL il
contenuto ricevuto
example.com/contact.html#!AJAX

E oggi? Renderizzo o no le mie pagine?
Ti consiglio di si.
–Meglio avere il controllo totale di quello che viene “renderizzato”, servendo a
Google degli snapshot HTML.
–Sugli SNAPSHOT HTML si lavora alla SEO in modo classico.
–Dovrebbe essere più facile rilevare e diagnosticare eventuali problemi
durante i test SEO.
–Ricorda: se Google prova a renderizzare JS, gli altri MdR arrancano.

4 APPROCCI MODERNI ALLA SEO CON
ANGULARJS

 Genera istantanee delle tue pagine utilizzando
PhantomJS (un headless browser) e crea un
livello di cache personalizzato
 Non usare hashbang negli URL
 Non usare escaped fragment negli URL
 Assicurati che ogni pagina abbia un Friendly URL
con le History API HTML5 (quindi senza #!)
 Inserisci tutti i Friendly URL in una sitemap.xml
ed inviala a GSC
 Usa <meta name="fragment" content="!" />
 Servi l’istantanea HTML quando viene richiesto il
Friendly URL (canonico) da un user-agent dei
motori di ricerca
 Gli utenti (browser) ricevono la pagina senza
pre-rendering
 Il sito web https://www.redbullsoundselect.com/
segue questa tecnica alla data in cui scrivo.
1. Pre-rendering con PhantomJS – il metodo più elegante

 Mantieni il parametro ? _escaped_fragment_ =
per fornire le istantanee renderizzate. Googlebot
sta ancora elaborando le richieste di questo
parametro
 Gli utenti (browser) ricevono la pagina senza pre-
rendering sul Pretty URL (con hashbang)
 Fornisci a Google Search Console una sitemap.xml
con tutti i Pretty URL (con hashbang)
2. Continua con la vecchia direttiva – il metodo classicone

 Fai renderizzare AngularJS da Google, senza
nessun tipo di pre-rendering e vedi cosa succede.
Gli altri motori di ricerca si dispiaceranno
 Usa le HTML5 history API per togliere l’hashbang
dall’URL visibile nel browser, e fornisci a Google
Search Console la sitemap.xml con tutti i Friendly
URL (canonici). La maggior parte degli
sviluppatori concorda sul fatto che non sia il
massimo avere l’hashbang negli URL, aggiunge
complessità alla SEO di un sito
 Se non vuoi usare URL con hashbang ma vuoi
informare Google che il tuo sito contiene AJAX
allora devi includere questa meta tag dentro la
tag head delle pagine
 <meta name="fragment" content="!" />
3. Lascia renderizzare Google – il metodo «alla spera in
DIO»

 Non sviluppare niente in AngularJS 1.x
 Passa direttamente ad Angular 2.0. Angular 2.0
include nativamente funzioni di server rendering,
con risultati simili a quelli ottenuti con React
 Note: il server di PhantomJS deve essere
installato nella stessa macchina che ospita il web
server. In alternativa esisteono servizi esterni di
rendering con PhantomJS, come ad esempio
Prerender.io. Questo servizio a pagamento (gratis
fino ad un massimo di 250 pagine in cache) è
particolarmente utile quando il web server non
riesce a gestire il rendering di molte pagine con
tempi di risposta accettabili.
4. Anglar 2.0 – il metodo moderno

Testare e validare le implementazioni
 Una volta che avrai testato e validato il pre-rendering con un crawler, potrai passare alla modalità “SEO
classica”, ottimizzando i soliti aspetti di un sito in HTML che già conosciamo.
 Prima però devi verificare che il pre-rendering funzioni perfettamente. Per il test puoi usare la riga di comando
e lanciare (se sei in locale)
 curl 'http://localhost:9090/?_escaped_fragment_=
 Il web server dovrebbe mostrarti lo snapshot HTML della homepage (indirizzo “/”). In alternativa procurati un
crawler.

 CONTROLLA LA CACHE DI GOOGLE!!!!
– Verifica sempre i contenuti salvati nella
cache (cache:www.ciccio.com)
 USA FETCH AS GOOGLE!!!!
– Se usi hashbang testa URL con
escaped_fragment
– Se usi friendly URL testa i friendly URL
 USA GOOGLE SEARCH CONSOLE!!!!
– Inserisci in sitemap.xml gli URL finali lato
utente (con hasbang se lo usi, oppure i
friendly URL)
 SCANSIONA IL SITO CON UN CRAWLER JS
FRIENDLY!!!!
– Screaming Frog è tuo amico!
– Assicurati che gli URL con ?
_escaped_fragment_ = rispondano status
code 200

Esempi di siti web in AngularJS
https://www.madewithangular.com/
https://www.eduonix.com/blog/web-programming-tutorials/top-15-websites-and-
apps-built-with-angularjs/
https://wappalyzer.com/applications/angularjs
https://trends.builtwith.com/websitelist/Angular-JS
https://www.coderfactoryacademy.edu.au/posts/top-sites-built-with-angularjs

Contattami per progetti SEO seri!
searcus.chevemilano.com

Come fare SEO con AngularJS

More Related Content

What's hot (19)

Similar to Come fare SEO con AngularJS (20)

More from Giovanni Sacheli (6)

Come fare SEO con AngularJS