fatti trovare dai tuoi clienti
Corso SEO & HTML: #08 Script Javascript
Come aumentare la visibilità delle pagine web usando il Javascript e gli script di automazione ... o meglio come evitare di perdere posizioni su Google!
« Corso SEO & HTML: #07 Meta Viewport
- Che cos'è Javascript?
- È vero che l'uso di Javascript riduce la visibilità sui motori di ricerca?
- Come usare gli script per essere in prima pagina sui motori?
In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici quali sono i tag HTML fondamentali di ogni pagina web per farti capire come è fatto un sito web in modo da sfruttare al meglio le conoscenze sulla SEO ed essere in prima pagina su Google, senza farti necessariamente diventare un webmaster o un hacker!
Script Javascript
Cosa sono gli script in una pagina HTML
Faccio subito una premessa: il tema è estremamente vasto che servirebbe un intero corso per parlare di script e di Javascript, oggi ti illustrerò solo alcuni aspetti legati alla SEO in modo da evitare errori grossolani.
Il Javascript è un linguaggio di programmazione che ricorda il Java nel suo nome, ma è una cosa decisamente diversa! La sua storia è molto travagliata e se ti interessa ti invito ad approfondire sulla Pagina Wikipedia dedicata al Javascript.
Originariamente le pagine web erano dei documenti statici, come i fogli stampati di una rivista, ognuno scaricava la stessa versione di pagina e una volta caricata la pagina HTML quella rimaneva tale e quale fino al successivo caricamento.
L'unico modo che l'utente aveva per interagire con il web era mediante i moduli (i <form>) che vedremo tra qualche settimana in questa rassegna sull' HTML per la SEO.
Non ha tardato a manifestarsi interesse per creare animazioni, transizioni, effetti di movimento comparsa e scomparsa, cambio di colore, movimento di oggetti, fluttuazione di elementi, comparsa di popup interni alla pagine, etc.
La tecnologia ha visto mutare più volte l'infrastruttura e non esisteva ancora una regolamentazione che definisse degli standard chiari, in base al browser che l'utente utilizzava si potevano sfruttare diverse tecnologie e i webmaster dovevano prevedere diversi strumenti per poter garantire la stessa esperienza su tutti i browser differenti!
Fai qualche ricerca su Google scrivendo la parola chiave "Cross Browser" e vedrai quanti strumenti sono disponibili per risolvere il problema del passaggio da un browser all'altro!
Si usava molto il Flash Player per creare movimenti e animazioni e non era raro vedere il pulsante "👉🏻Scarica qui Flash Player", perché se non avevi scaricato quel programma il sito non funzionava!
Con il tempo si è capita l'importanza di trovare uno standard e in questo ha avuto un ruolo fondamentale il W3C (World Wide Web Consortium) che ha raccolto le migliori tecnologie e le ha "imposte" ai costruttori dei browser, sia per semplificare la vita ai webmaster, sia per rendere l'esperienza degli utenti sempre meno stressante.
È così che si è definito l'attuale assetto che sembra essere vincente e sta durando da parecchi anni: HTML5 + CSS3 + Javascript
- Html5 è il linguaggio che stabilisce la struttura e i contenuti di una pagina web
- Css3 è il linguaggio che definisce come gli elementi della pagina web devono apparire esteticamente
- Javascript è il linguaggio che descrive le azioni che devono essere eseguite sul browser, sulla pagina web che è stata caricata, dal caricamento in avanti
Ajax e web 2.0
La grande potenza del Javascript nel web 2.0
L'enorme differenza tra la "old economy" e la cosiddetta "new economy" che ha caratterizzato i primi anni 2000, risiede in una funzione del linguaggio Javascript tanto banale quanto potente!
AJAX (acronimo di Asynchronous JavaScript and XML) che si basa sull'oggetto XMLHttpRequest è quel meccanismo che consente alle pagine HTML di caricare elementi dalla rete per modificare la pagina HTML dinamicamente senza dover "ricaricare la pagina".
Prima della sua invenzione, qualsiasi interazione con il web passava attraverso il caricamento di una nuova pagina e questo — oltre che estremamente lento — rendeva l'esperienza complessiva di navigazione frustrante e poco intuitiva.
Per implementare la tecnica AJAX nelle pagine web occorre uno script Javascript che esegua determinate operazioni in seguito al comportamento dell'utente durante la navigazione o anche semplicemente dopo un certo tempo dal caricamento della pagina web.
JQuery
Gli script per tutti con semplicità e funzionalità Cross-browser
Per risolvere problematiche di compatibilità tra i vari Browser (Cross-browser) e per semplificare lo sviluppo di problematiche comuni alla maggior parte degli sviluppatori web, è stato realizzato un framework, un pacchetto software, che contenesse strumenti di facile utilizzo, scritto in Javascript, per la manipolazione degli elementi delle pagine HTML a runtime (mentre l'utente sta navigando).
L'avvento di jQuery, e in seguito di pacchetti ad esso correlati come jQuery UI, hanno consentito anche ai webmaster meno inclini alla programmazione di creare siti web con funzionalità eccezionali, di inserire effetti di fade, scroll, microinteractions, cambio colore al passaggio del mouse, ma anche gestire in modo semplice le chiamate Ajax per modificare dinamicamente i contenuti in seguito a specifiche azioni dell'utente!
Javascript come fare
Come si inserisce uno script nel codice HTML
È possibile inserire gli script Javascript in qualunque punto del codice HTML, sia nel tag <head> che nel tag <body>, ma siccome il codice eseguibile Javascript non contiene parole chiave, non descrive contenuti da visualizzare come invece fanno i titoli, i testi, le immagini o le tabelle, preferisco inserire anche gli script Javascript nel tag <head>.
Ci sono due possibilità per inserire codice Javascript in una pagina HTML:
- possiamo richiamare un file esterno con estensione .js mediante il tag <script>
- possiamo aprire il tag <script> e scrivere direttamente codice Javascript all'interno della pagina HTML
Naturalmente consiglio sempre di usare un file esterno, sia per alleggerire il file HTML e caricare una volta sola codici ripetitivi (ricordiamo che il browser salverà in cache il file .js), sia perché semanticamente è più corretto separare la struttura (HTML) dalla automazione (Javascript).
Vediamo alcuni esempi:
Caricamento di un file esterno, nella fattispecie carica il framework di jQuery:
<script src="jquery.js" />
Comando di un avviso sul browser:
<script> alert( "welcome" ); </script>
Inserimento dello snippet di codice per Google Analytics:
<script async src="https://google../js?id=UA-********-*"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-********-*');
</script>
Javascript e SEO
Come sfruttare il Javascript per essere in prima pagina su Google
Oggi vado un po' contro corrente perché il Javascript non può farti guadagnare punti sulla SEO, semmai può farteli perdere! Allora ti spiego brevemente perché il tuo sito può ricevere penalizzazioni se usi il Javascript ... o meglio se lo usi in modo improprio!
Ricordati che Google ha "disseminato il web" di crawler, piccoli programmini che perlustrano la rete alla ricerca delle informazioni, per classificarle, indicizzarle e inserirle (eventualmente) nell'indice del motore di ricerca!
Un tempo i crawler non erano capaci di eseguire il codice Javascript o Flash che era contenuto all'interno delle pagine web e tutto quello che veniva mostrato in seguito ad un caricamento Ajax, per il browser non esisteva affatto!
Se un elemento parte nascosto e poi viene fatto comparire con l'esecuzione di codice Javascript ... per il crawler è nascosto e basta e non viene preso in considerazione, quindi se contiene parole chiave ... beh questo non verrà valutato!
Insomma, hai capito che la pagina HTML deve contenere le informazioni importanti già di suo, le parole chiave devono essere caricate insieme all'HTML e il javascript deve "limitarsi" a creare effetti grafici di piccola entità, non di stravolgere la struttura o il contenuto della pagina stessa!
Ma oggi i crawler sono molto più potenti e riescono anche a eseguire il Javascript e questo può essere una lama a doppio taglio!
Se prima i contenuti caricarti in modo asincrono (parliamo sempre di tecniche Ajax che modificano il contenuto della pagina web dopo il primo caricamento) venivano ignorati, oggi addirittura possono essere interpretati come trappole per i visitatori, tipiche di pagine web sponsorizzate da banner "Click Bait!" ... leggiti l'articolo che ho scritto al riguardo: «Click Bait: L'arma segreta per farsi del male da soli!»
Conclusioni
Hai capito che il meta tag <script> è estremamente potente, al punto che ha creato un vero ciclo economico con il Web 2.0. Tuttavia dentro il tag <script> sono racchiusi sia gioie che dolori! Usare male il codice Javascript può impedirti di essere in prima pagina su Google!
Anche la prossima settimana saremo all'interno del tag <head> — dove quello che scriviamo serve solo al browser e al crawler di GoogleBot — per parlare di un argomento assai importante in termini di SEO, quindi fai click su "Seguimi" per ricevere una notifica!
Ti do appuntamento alla prossima settimana, nel frattempo metti un like se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati.
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.