fatti trovare dai tuoi clienti
Corso SEO & HTML: #05 Tag Link
Per essere in prima pagina su Google devi avere un sito veloce e scattante! Oggi ti spiego un trucco per rendere il caricamento delle pagine più veloce...
« Corso SEO & HTML: #04 Title, Keywords e Description
- Come si fa a velocizzare un sito web?
- Come snellire il tuo HTML?
- Come si usa il tag <link>?
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!
Tag <link>
Molto utile per accelerare la navigazione sul tuo sito
Il tag <link> definisce la relazione tra il file HTML corrente e una risorsa esterna, tipicamente usato per incorporare un foglio di stile nelle nostre pagine web, è un elemento "vuoto" cioè che contiene solo attributi.
Per maggiori informazioni sulla sintassi vedi la pagina web ufficiale W3C.
Se sei un programmatore saprai bene che non è mai una buona prassi fare un mega programma tutto dentro un unico file! Ogni linguaggio di programmazione mediamente evoluto prevede nel suo set di istruzioni un comando per importare porzioni di codice da file esterni:
- in C e in C++ esiste la direttiva #include
- in php similmente si hanno include() e require()
- in Java e in Python si usa la direttiva import
- in C# si incorporano le librerie esterne con la direttiva using
- ... in HTML si può usare il tag <link>
Sono tanti i motivi per cui i progetti informatici sono spesso costituiti da numerosi file uniti insieme:
- il codice è più leggibile grazie alla frammentazione;
- alcune parti di codice si possono riutilizzare in altri progetti più facilmente;
- tante persone possono lavorare insieme a un grande progetto, ognuno sviluppando una parte diversa di codice;
- ogni tipologia di file ha una funzione diversa e specifica;
- ...ma soprattutto nel caso dei file HTML, può accelerare notevolmente il caricamento delle pagine di un sito web!
Se segui questa rubrica sulla SEO, avrai capito che per essere in prima pagina su Google devi avere un sito veloce! il tempo di caricamento del tuo sito deve essere minimo, idealmente le pagine del tuo sito dovrebbero caricarsi all'istante!
Ora ti spiego come fa il tag <link> a rendere il caricamento tanto veloce!
La cache del browser
Guadagna tempo caricando una volta sola
Il tag <link> consente al browser di azzerare il tempo di caricamento dei file che compongono la tua pagina web!
Ogni volta che apriamo un sito web o una risorsa multimediale da internet, il browser registra tutti i file scaricati in una directory temporanea (una cartella difficilmente accessibile all'interno del computer o dello smartphone).
A meno che non forziamo un nuovo caricamento (tipicamente con tasto F5) o che non sia specificato all'interno della risorsa stessa che deve essere ricaricata ogni volta, la seconda volta che il browser dovrà scaricare lo stesso file, lo andrà a "pescare" direttamente dalla directory dei file che aveva scaricato in precedenza.
Questo meccanismo prende il nome di "cache" ... chissà quante volte ti sarà capitato di sentir parlare di cache! «Se non ti funziona il sito devi cancellare la cronologia e caricare di nuovo!» Sì, perché tutto quello che è nella cronologia del tuo browser è memorizzato sul disco del tuo computer o nella memoria del tuo smartphone!
La cache rende il caricamento delle pagine di un sito web estremamente veloce perché tutte le informazioni sono già contenute all'interno del tuo dispositivo e non devi caricare nuovamente le stesse risorse!
Questo meccanismo vale certamente per i file HTML, per le immagini, per i video, ma sicuramente vale anche per gli script CSS e Javascript.
Ora ti chiederai come puoi sfruttare al massimo la cache per essere in prima pagina su Google!
Come usare il tag <link>
Quali sono le risorse web che si possono linkare alla pagina
La pagina web è composta principalmente dal un file HTML.
Il programmatore del sito web potrebbe scrivere tutte le informazioni necessarie dentro un unico file HTML, così facendo però la dimensione del file HTML diventerebbe enorme e ogni volta che l'utente fa click su qualcosa per navigare all'interno del sito, si troverebbe a caricare tante volte le stesse informazioni, rendendo la navigazione lenta, pesante e ridondante.
Quali sono le parti che si ripetono sempre all'interno di una pagina web?
Solitamente la veste grafica di un sito web è omogenea per tutta la navigazione di un sito, perciò la prima cosa da fare è creare un foglio di stile CSS che raccolga tutte le regole stilistiche per l'interfaccia grafica.
Il foglio di stile CSS contiene tutte le informazioni necessarie a dare un aspetto grafico personalizzato e accattivante al contenuto della tua pagina web: i colori, la grandezza del testo e il tipo dei caratteri, la posizione degli elementi, le immagini di sfondo, i bordi e tante altre cose... in questa rubrica sulla SEO, dopo aver parlato di HTML, approfondiremo anche l'argomento CSS, perciò iscriviti al canale per non perderti le notifiche!
Il primo caricamento sarà certamente impegnativo, ma la seconda volta sarà a tempo zero!
Un'altra cosa che è buona norma separare dall'HTML è il codice Javascript che si occupa di automatizzare la pagina web, ma per incorporare il codice Javascript si usa direttamente il tag <script> che vedremo la prossima volta.
Esistono anche siti web privi di automazione e che non eseguono codice Javascript al loro interno, ma ormai si tratta di rari casi!
Attenzione a non esagerare con la frammentazione: anche se l'uso della cache aiuta a caricare più velocemente le pagine web, ogni volta che il browser deve scaricare una nuova risorsa si perde del tempo nella chiamata HTTP, dunque bisogna sicuramente frammentare la pagina web in più file, ma al tempo stesso bisogna accorpare le porzioni di codice che devono essere caricate insieme.
Vediamo dunque come si usa il tag <link>:
Material design e Google Font
Il vantaggio di usare risorse condivise
Quando un utente atterra per la prima volta sul nostro sito, dovrà certamente caricare almeno una volta tutte le risorse necessarie!
A meno che... non utilizziamo risorse condivise!
Quando usiamo risorse condivise, come ad esempio Material design e Google Fonts — ma certamente potrei fare molti altri esempi — oltre al fatto che non consumiamo banda sul nostro Hosting, oltre al fatto che sono risorse di altissima qualità e che risolvono molti problemi nello sviluppo di un sito web, c'è una discreta probabilità che il visitatore abbia già caricato quei file navigando su altri siti web!
Dunque se un visitatore ha già caricato quelle risorse condivise che usiamo anche noi, sarà velocissimo anche il primo caricamento, poiché le informazioni necessarie al "contorno" saranno già memorizzate nella cache, sicché il browser dovrà caricare solo le informazioni utili!
Se non hai mai sentito parlare di Material Design o Google Fonts ti lascio alcuni link da visitare:
Fai molta attenzione quando usi risorse condivise! Assicurati di rifornirti presso fonti affidabili sia dal punto di vista della sicurezza informatica (se il tuo fornitore non è affidabile, potrebbe succedere che all'interno delle risorse condivise ci siano file infetti da virus), sia dal punto di vista della longevità (se il tuo fornitore cambia tecnologia il tuo sito web potrebbe smettere di funzionare)
Altri usi del tag <link>
Il tag <link> è molto utile per essere in prima pagina su Google
A dire il vero, il tag <link> è un vero jolly e può essere utilizzato per tantissimi altri scopi, molto utili per essere in prima pagina su Google!
Vediamo brevemente alcuni altri utilizzi del tag <link>:
- <link rel="stylesheet" ... />: specifica quali file CSS usare;
- <link rel="icon" ... />: indica una immagine da mettere accanto all'URL; storicamente la favicon è una icona piccolissima (16x16 pixel) ma con il tempo sono stati introdotti anche formati più grandi;
- <link rel="canonical" ... />: se la pagina web può essere richiamata con tanti URL diversi, indicare con canonical l'URL "ufficiale" che Google deve indicizzare nel proprio archivio;
- <link rel="alternate" ... />: la traduzione letterale di questo tipo di direttiva è che ci sono modi alternativi per fruire dei contenuti di questa pagina web, per esempio attraverso un feed RSS o ATOM;
- <link rel="pingback" ... />: il pingback è un protocollo che ti permette di ricevere una notifica quando un altro sito ti menziona.
Ti ho promesso che con questa guida non intendo farti diventare un hacker e neanche un webmaster professionale, ma siccome il tag <link> è molto potente, desideravo accennarti anche alcuni altri utilizzi che ne puoi fare nelle tue pagine web per essere in prima pagina su Google!
Se vuoi approfondire l'argomento, scrivimi privatamente o qui sotto nello spazio dedicato ai commenti.
Conclusioni
Hai capito che il tag <link> è estremamente potente e ti permette di essere in prima pagina su Google con maggiore facilità. Stai iniziando ad approfondire argomenti SEO di un certo livello sebbene siamo ancora all'inizio.
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.
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.