fatti trovare dai tuoi clienti
Corso SEO & HTML: #13 Tag Header
Intestazione di una pagina HTML e intestazione di un articolo di Blog, dal punto di vista grafico sono normali blocchi, ma dal punto di vista semantico ...
« Corso SEO & HTML: #12 Tag Body
- Header, cosa è?
- Che cosa significa Header per un crawler?
- Come fare un Header HTML?
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 Header
L'intestazione della pagina web, o di un articolo
Chi proviene dalla vecchia scuola, era abituato a usare nelle proprie pagine web il tag <div> o semplicemente era abituato ad aprire la pagina HTML di un sito con tag <h1> per scrivere il titolo e tag <h2> per il sottotitolo!
A un certo punto è arrivato il protocollo HTML5 e con esso una serie di innovazioni che hanno stimolato i webmaster a prestare maggiore attenzione alla semantica del codice HTML!
Se dal punto di vista sintattico un tag <div> è esattamente identico a un tag <header>, dal punto di vista semantico sono due cose estremamente diverse:
- il tag <div> è un generico blocco che può contenere qualsiasi cosa;
- il tag <header> è un blocco che contiene l'intestazione di una pagina web o di un articolo.
Sia ben chiaro, dal punto di vista sintattico <div> e <header> sono interscambiabili, dunque la pagina web avrà lo stesso aspetto sia che venga usato uno o l'altro tag... l'utente non noterà nessuna differenza!
Ma dal punto di vista del crawler e del motore di ricerca, usare un tag <header> invece che il solito tag <div> fa un'enorme differenza, perché Google viene informato che in quel blocco troverà informazioni sull'intestazione di una pagina web o di un articolo di Blog!
Le informazioni riguardanti la semantica interessano l'intestazione, come ogni altro pezzo di HTML che vedremo nelle prossime settimane.
Cosa scrivere nell'intestazione
Siccome questo è un corso SEO intendo porre l'attenzione su quelle informazioni che servono per aumentare la visibilità sui motori di ricerca.
Dunque la domanda che dobbiamo porre è: cosa scrivere nell'intestazione per essere in prima pagina su Google?
Gli elementi che devono essere presenti nell'intestazione sono sicuramente il titolo con tag <h1> e la tagline con tag <h2>; in genere, all'interno dell'intestazione — e dunque all'interno del tag <header> — viene inserito il menu con tag <nav> (che vedremo più nel dettaglio la prossima volta); infine è possibile inserire un breve paragrafo che riassuma il contenuto della pagina, ben fornito di parole chiave e frasi chiave e un bell'elenco puntato <ol> o <ul> con la lista dei sottotitoli dei vari paragrafi che incontreremo nel corpo della pagina!
Dal punto di vista del fattore umano nella SEO, non possiamo dimenticare che l'intestazione — in termini di aspetto grafico e user experience — deve generare un EFFETTO WOW!!! e dunque occorre inserire nell'intestazione anche elementi grafici come immagini di copertina o video immersivi che catturino l'attenzione fin dal primo istante.
Però attenzione! In genere le immagini di forte impatto o peggio ancora i video, necessitano di sorgenti ad alta risoluzione e dunque difficilmente riusciamo a compattare le belle fotografie in pochi kilobyte! Questo è un grande problema in termini di SEO, poiché i file multimediali di grosse dimensioni hanno bisogno di lunghi tempi di attesa per essere scaricati, elaborati e infine mostrati al pubblico!
Lunghi tempi di attesa corrispondono spesso a una penalizzazione SEO!
Di recente sono stati imposti vincoli estremamente difficili da rispettare per i fornitori di hosting in termini di velocità di trasmissione dati e responsività intesa come tempo di risposta del server!
Per ricevere una penalizzazione bastano pochi decimi di secondo e ogni giorno gli standard di Google diventano più severi!
Tempi di caricamento
I tempi di caricamento per fortuna sono suddivisi in più gruppi:
- First Contentful Paint (FCP) : è la metrica più generica, ovvero quanto tempo passa, prima che l'utente possa vedere la prima schermata. Rappresenta la prima fase dell'esperienza utente!
- Speed Index (SI) : è un'altra metrica molto importante e indica il tempo che occorre affinché la prima fascia in alto delle pagina sia interamente caricata. È molto simile l FCP ma nel frattempo che la pagina si sta caricando, la parte in alto (chiamata "above the fold" che corrisponde all'header) potrebbe mutare, ad esempio per la presenza di banner pubblicitari.
- Largest Contentful Paint (LCP) : è una metrica un po' strana che indica quanto tempo occorre per caricare l'elemento più "largo", solitamente si tratta del banner che abbiamo nell'header, chiamata anche sezione Hero (o Hero Section).
- Time to Interactive (TTI) : simile a FCP ma stavolta occorre che le funzionalità per interagire (menù cliccabili o moduli compilabili) siano effettivamente funzionanti. In genere gli script intervengono per attivare tutte le funzioni sul caricamento completato, per evitare di lavorare su oggetti non ancora presenti sulla pagina.
- Total Blocking Time (TBT) : simile al TTI, indica per quanto tempo l'utente viene inibito dal compiere azioni, dovute al fatto che la pagina deve completare il caricamento delle parti essenziali all'interattività.
- Cumulative Layout Shift (CLS) : questo non è un tempo ma un valore numerico che indica un punteggio, talvolta è causa di forti penalizzazioni, ci ricorda anche il concetto di Click Bait, durante il caricamento della pagina possono essere introdotti nell'intestazione degli elementi che compaiono in ritardo (come ad esempio banner pubblicitari pay-per-click), posizionati strategicamente laddove l'utente tende a cliccare in modo compulsivo, senza aspettare il completo caricamento della pagina!
Per esempio la login di un servizio di posta elettronica, azione che si compie quotidianamente, se si attende troppo tempo il tasto si sposta e il click avviene sul banner pubblicitario invece che sul tasto login!
È possibile tenere monitorati questi parametri (e moltissimi altri) mediante lo strumento di Google chiamato Page Insight Speed.
Questi sono gli aspetti che devi tenere maggiormente in considerazione quando crei l'intestazione di una pagina web.
Tag <header> negli articoli
Il tag <header> può essere usato anche per creare l'intestazione di un articolo di Blog, i ragionamenti che vanno fatti non si discostano molto dall'intestazione principale della pagina web, ma se questa intestazione si trova fisicamente al di sotto della prima schermata da visualizzare, ha sicuramente un minore impatto sulla SEO, a patto che il tempo di caricamento complessivo della pagina sia sempre contenuto.
Conclusioni
Hai capito l'importanza di usare il tag <header> — introdotto con HTML5 — in modo opportuno! La prossima settimana in questo Corso SEO vedremo come creare un buon menu di navigazione sfruttando al massimo tutti i Tag HTML5 di descrizione semantica delle pagine web, con particolare attenzione al tema SEO, in modo da portare i tuoi siti web in prima pagina su Google, 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.