Slide del mio intervento al Search Marketing Connect 2016 - Come fare SEO con AngularJS

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

2. 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

3. 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?

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

5. 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ò…

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

7. 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.

8. SEO E ANGULARJS

9. 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.

10. 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

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

12. Con JavaScript disattivato nel browser

13. 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

14. 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»

15. …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…

16. COSA FUNZIONA? 4 PUNTI FERMI

17. 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

18. 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>

19. 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

20. 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

21. COSA È CAMBIATO RISPETTO AL
VECCHIO STANDARD DI CRAWLING?

22. 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

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

24. 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

25. 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.

26. 4 APPROCCI MODERNI ALLA SEO CON
ANGULARJS

27.  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

28.  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

29.  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»

30.  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

31. FASE DI TEST

32. 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.

33.  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
Testare e validare le implementazioni
 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

34. Testare e validare le implementazioni

35. 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

36. Contattami per progetti SEO seri!
searcus.chevemilano.com