fatti trovare dai tuoi clienti
Corso SEO & HTML: #14 Tag Nav
Menu di navigazione in una pagina HTML, qual è il miglior modo per sfruttare al massimo la SEO e dare visibilità sui motori di ricerca con il tag nav html5
« Corso SEO & HTML: #13 Tag Header
- Tag Nav, cos'è?
- Come creare un menu di navigazione in HTML5 ?
- Come creare un menu a tendina HTML e CSS?
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 Nav
Come creare un menu di navigazione in HTML5
I primi webmaster si divertivano a inventare menu di navigazione con strumenti più o meno di fortuna; spesso usavano le tabelle per impaginare in riga o in colonna i pulsantoni, spesso realizzati con immagini gif di discutibile gusto artistico! Per animare i menu si usavano script Javascript o peggio ancora dei programmi Java (Applet) o periodo nero del web... componenti activeX come animazioni Flash che interagivano con la pagina web tramite script ... spesso funzionanti solo su determinati browser ... e non su altri!
Insomma, un vero inferno!
Oggi si è capito che tutto questo è semplicemente dannoso, perciò si utilizzano altri sistemi, molto più eleganti dal punto di vista del codice, più flessibili dal punto di vista della responsività delle pagine web e soprattutto più efficaci dal punto di vista del posizionamento sui motori di ricerca.
Parecchi anni fa imparai a creare i menu di navigazione su un libro di Gianluca Troiani, autore estremamente preparato, facile da leggere e divertente da seguire (didatticamente parlando).
Sebbene io oggi consulti la sintassi delle definizioni CSS3 direttamente online sul portale W3Schools.com, se non hai mai "sporcato le mani" con il CSS ti suggerisco di partire da un buon libro come questo:
E cosa ho imparato da Gianluca Troiani in merito ai Menù? tante cose:
- fare i menu usando elenchi puntati (tag <ul> e tag <li>)
- dare un aspetto grafico ai menu usando solo CSS e HTML
- fare menu a tendina HTML senza Javascript solo con CSS
Quali vantaggi si hanno a fare i menu con liste ed elenchi puntati?
- codice HTML leggero (caricamento veloce)
- descrizione dei menu in un file CSS esterno (caricato una sola volta)
- assenza di script Javascript o altri con relative problematiche cross-browser quindi ancora una volta anche velocità
- esperienza utente migliorata
- rafforzamento delle parole chiave (se usati i menu con criterio)
Tutto ciò aumenta notevolmente la probabilità di essere in prima pagina su Google!
Se a questo aggiungiamo anche il tag <nav> introdotto con HTML5, aggiungiamo una notevole quantità di informazioni dal punto di vista semantico e otteniamo un vantaggio competitivo sui motori di ricerca rispetto a chi fa menù di navigazione improvvisati!
Quindi dal punto di vista dell'HTML un menu di navigazione andrebbe fatto così:
e questo è il risultato su un browser come Google Chrome:
Naturalmente una pagina web così brutta farebbe scappare chiunque! mancano tutte le definizioni CSS, che vedremo tra poco su questo Blog.
Dove vanno messi i menu
La volta scorsa abbiamo parlato di Tag Header e dicevamo che può essere una buona idea inserire i menu di navigazione all'interno dell'intestazione della pagina HTML.
Come vedi, anche nell'esempio di qui sopra ho inserito il tag <nav> all'interno del tag <header>.
Anche a livello di esperienza utente il webmaster deve attenersi a canoni più o meno riconosciuti per consentire agli utenti di trovare facilmente il menu per consentire agli utenti di navigare con disinvoltura, pena l'abbandono immediato e perenne della pagina web!
Dunque analizziamo quali sono le posizioni dove mettere i menu di navigazione in una pagina web:
- Menu principale (main): il menu principale deve essere posizionato in alto, nella Hero section che abbiamo visto la volta scorsa, per la versione desktop una buona idea è mettere le voci di navigazione in orizzontale subito sopra o subito sotto alla Hero section, talvolta potrebbero star bene proprio al centro sotto forma di grandi pulsanti; per la versione mobile si tende a nascondere il menù all'interno di un pulsante "Hamburger" (così chiamato perché è formato da tre linee orizzontali che ricordano vagamente un panino);
- Menu di sezione: all'interno di una pagina web e molto spesso all'interno della Home page, si possono raccogliere i principali articoli del Blog o i principali prodotti del portale di eCommerce e — invece che inserirli in un qualunque anonimo blocco <div> — è possibile utilizzare un blocco <nav> poiché in questo modo diciamo al crawler di Google che quello è un blocco di navigazione;
- Menu laterale (sidebar): spesso usato per raccogliere voci di archivio del Blog, categorie, tag cloud, e posizionati nella versione desktop a lato dello schermo, nella versione mobile, sacrificati altrove o assenti;
- Menu a piè di pagina (footer): il menu più noioso di tutti, che tipicamente troviamo in fondo alla pagina, può essere anche suddiviso in più colonne per ragioni estetiche, serve tipicamente a consentire agli utenti di trovare quelle pagine di utilità varie, consultabili per approfondire aspetti legali o rapporti con i clienti (customer services); nel footer troveremo la Policy sulla Privacy, le condizioni di vendita dell'eCommerce, le tariffe per le spedizioni, le FAQ (Frequently Asked Questions), il centro di assistenza, etc.
Naturalmente anche la gestione Desktop VS Mobile, ovvero dare un diverso aspetto ai menu visualizzati sul computer rispetto agli stessi menu visualizzati sugli smartphone o sui tablet, viene regolamentata tramite le definizioni CSS che vedremo in seguito.
Sitemap e menu a pié di pagina
In passato abbiamo parlato dell'importanza delle Sitemap ai fini del posizionamento sui motori di ricerca, quindi desidero condividere con te un piccolo ma importante segreto.
🗺 sitemap.xml è la tua mappa del tesoro
Siccome i crawler di Google scansionano tutti i link presenti in una pagina web, può essere una buona idea inserire in un punto freddo della pagina — appunto a pié di pagina — un link che punti alla sitemap ( tipicamente /sitemap.xml ) così da informare il motore di ricerca, piuttosto che gli utenti, dove trovare la lista completa delle pagine web del sito.
So già che mi dirai che la sitemap la puoi comunicare direttamente a Google tramite la Google Search Console, ma questo accorgimento lo adottiamo per aiutare e "semplificare la vita" a tutti i motori di ricerca diversi da Google, tipo Bing, DuckDuckGo, etc...
Conclusioni
Hai capito l'importanza di usare il tag <nav> — introdotto con HTML5 — abbinato alle liste non numerate <ul>, <li>! La prossima settimana in questo Corso SEO vedremo altri 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.