Semantica HTML5 per la SEO

Elementi html5

La semantica è la materia che studia i significati delle parole e delle frasi, ma alcune moderne applicazioni utilizzano i capisaldi della materia per realizzare una struttura di significati valida per alcuni gli elementi HTML (si parla quindi di semantica HTML5) che compongono la pagina.

Come linea guida generale, possiamo dividere gli elementi HTML in:

  • generici o ambigui: dividono gli spazi della pagina in parti ma non li identificano in nessuna maniera. Solitamente vengono utilizzati per pura funzionalità pratica. I più usati sono <div> e <span>.
  • semantici o identificabili: segnalano la funzione e la posizione di uno spazio di codice all’interno della pagina. Di norma si possono dividere in elementi strutturali (header, nav, section, footer, ect) e tag semantici del testo (tag H1, H2, em, strong, ect).
Semantica HTML

Elementi non semantici

I tag <div> e <span> proprio in funzione della loro natura non semantica sono gli strumenti perfetti per operare all’interno degli elementi semantici.

Dividere una sezione in ulteriori spazi, utilizzare le parti per riposizionare nello spazio visuale gli elementi, come nel caso dei layout flexbox, senza lasciare altre indicazioni semantiche non vuol dire che il peso in termini di posizionamento degli elementi non venga modificato.

La distanza di un termini da un altro, di un’immagine dal testo o la capacità di portare più in alto o più in basso un elemento, ha un peso da un punto di vista SEO. A questo peso non si aggiungono implicazioni semantiche (a meno che il div o lo span non contengano a loro volta del testo, naturalmente).

Quando si prende in considerazione un tag non semantico bisogna ricordare che è vero che di per sé non possiede un valore strutturale, ma ciò che è contenuto potrebbe averne.

Elementi semantici

Tutti gli elementi semantici HTML fanno parte della struttura, ma per comodità li divideremo in elementi che fanno parte della struttura della pagina, da quelli che fanno parte della struttura del documento.

Gli elementi che servono per realizzare la struttura della pagina non sono visibili e nascono per contenere altri elementi. I tag di questo tipo sono:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>

Gli elementi della semantica HTML5 che fanno parte della struttura del documento sono tutti visibili nella pagina e sono i:

  • Titoli (da H1 ad H6) danno ordine agli argomenti della pagina.
  • <strong> da un peso maggiore alle parole della frase.
  • <em> da enfasi alla frase.
  • <del> segnala volontariamente una sezione del testo da considerare un esempio di errore.
  • <ins> da utilizzare dopo un tag <ins> per indicare che è la correzione del precedente inserimento
  • <mark> evidenzia visivamente il testo.
  • <abbr title=”inserisci qui il titolo”>Acronimo</abbr> Si utilizzare per indicare il titolo completo dell’acronimo visibile.
  • <cite> segnala una citazione (che non diventa dunque testo duplicato?).
  • <q> citazione breve, o quote. Si usa per segnalare che si è concordi con una frase citata.
  • <ul> e <ol> elenchi puntati e numerati.
  • <figure> un’immagine che è inclusa all’interno di una sezione semantica.
  • <figcaption> elemento testuale che accompagna un tag <figure>.

<header>

Il tag header viene utilizzato per contenere elementi introduttivi e necessari per il proseguimento della navigazione. Generalmente il primo contenitore con elementi visibili posto nella pagina.

Da non confondersi con il tag <head>, il tag header si trova all’interno del <body> della pagina e spesso contiene il tag <nav>.

<main>

Durante la prima stesura del testo non avevo segnalato <main> tra i tag principali, per un motivo pratico. Si tratta di un tag importante che viene generato automaticamente nelle pagine dei CMS, e anche acquistando un tema HTML è presente.

Quello che è bene sapere invece è che sebbene il significato sia chiaro, si tratta del contenuto principale del <body> la possibilità di errore nel caso in cui si voglia realizzare una pagina da sé è alto.

Come mi ricorda il SEO Marco Silvestri, <main> non può essere un discendente di nessuno degli elementi citati nell’articolo, e non può esserci più di un tag del genere per pagina.

Molto spesso i problemi nascono quando si è inserito un tag <header> e ci si confonde nella discendenza dei tag; per farla breve, <header> sta sempre dentro <main>.

<nav>

Nav contiene i link del menu di navigazione ed è contenuto (ma non come regola assoluta) all’interno di <header>. La peculiarità di questo tag è di dare indicazione riguardo a quali argomenti abbiano maggiore importanza e maggiore attinenza con la home.

<section>

Section è probabilmente uno dei tag più bistrattati, nonostante semplifichi molto la leggibilità dei titoli per i bot. Ogni sezione infatti è un argomento a sé, che potrebbe contenere diversi indicatori capaci di segnalare due o più temi centrali, e di conseguenza anche un numero multiplo di tag H1.

<article>

La funzione di <article> è chiara e i CMS inseriscono i propri articoli direttamente all’interno del tag. Article è nidificabile, ci sono essere tag interni ad altri tag article, e ogni elemento nidificato rappresenta un settore a parte.

Il classico esempio di article interni ad altri è il caso dei commenti dei blog, in cui ogni commento rappresenta un testo a sé (da qui il grande valore dei commenti?).Per segnalare la data di un tag del genere è possibile usare una formattazione di questo tipo:

 time pubdate datetime="2019-31-07T19:99-08:00"></time>

<aside>

All’interno di <aside> bisogna posizionare tutti gli elementi che riguardano solo marginalmente la pagina. Un buon esempio riguarda le sidebar dei siti WordPress, che contengono informazioni generiche ripetute su più pagine.

Anche la creazione di call to action commerciali o comunque non strettamente connesse all’argomento della pagina (ma del sito si) può essere gestita all’interno di un’area considerata esterna alle sezioni o agli articoli presenti.

<footer>

Come tag <footer> è forse il più famoso tra quelli descritti, ma pochi ne conoscono la reale funzione. Dovrebbe essere utilizzato per indicare l’appartenenza del sito ad una persona o ad un’azienda, segnalare il copyright, la presenza di particolari licenze, e appendici o elenchi esterni alla funzionalità delle pagine.

Di fatto il footer non è da considerarsi come una sezione, in un modo ancora più estremo del tag <aside>. Qualora ce ne fosse bisogno, è possibile inserire più tag footer e non devono per forza essere tutti presenti nella sezione più bassa della schermata.

Per controllare che sia inserito correttamente, basta non trovarne traccia in un software outiliner.

Gli outliner, come HTML Outliner, visualizzano la struttura delle sezioni e i titoli della pagina.

Indici (h1, h2, h3)

Per maggiori informazioni, leggete pure l’articolo linkato dal titolo di questa sezione.

<strong> (grassetto)

La reale funzione di strong non è molto chiara, dovrebbe aumentare l’importanza (il peso) delle parole segnalate in questo modo, ma la possibilità di abusarne potrebbe limitarne l’effetto reale.

In ogni caso, da quando si è scelto di sostituire l’indicazione <b> (bold) con <strong> il segnale semantico risulta chiaro (ma non la potenza).

<em> enfasi

Che abbia un valore semantico è certo, anche se teoricamente inferiore al grassetto. In ogni caso se uno screen reader incontra un carattere in corsivo (un tempo segnalato come <i> italics), cambia l’intonazione della voce.

<del> e <ins>: cancella e riscrivi

Per indicare graficamente una correzione del testo, o per avere un metodo con una valenza semantica e la praticità dell’HTML da utilizzare per realizzare delle offerte in pieno stile e-commerce, potete usare i tag <del> e <ins>.

Errore risolto

<mark> (evidenziatore)

Un altro segnale visivo più che semantico, visto che non ci sono studi o informazioni in merito ad un aumento di importanza di parole evidenziate con <mark>. Ma come per gli altri elementi HTML, Google riconosce e segnala anche i colori.

Sappiamo per certo che alcune combinazioni di colori vengono percepite come “errate” perché limitano la visibilità delle lettere, ma non si hanno notizie più dettagliate di così in merito.

Questo è un testo evidenziato

<abbr> Abbreviazione

Non ho mai fatto caso a siti di buona qualità che utilizzino questo tag, anche se era un tag ben presente nei forum, molti anni fa. In ogni caso si tratta di una risorsa in più.

 FGCS

<blockquote>

Un buon lavoro di citazione potrebbe portare un vantaggio al sito, sempre se che la fonte originale sia autorevole. In caso contrario, non sposterebbe molto.

E a quanto conferma il nostro seo engineer di fiducia l’utilizzo di <blockquote> previene da problemi di duplicazione del testo.

W3schols dice:
Semantics is the study of the meanings
of words and phrases in a language.

Semantic elements = elements with a meaning.

<cite> <q> citazioni

Si tratta di tag di compendio a blockquote, sopratutto perché prevengono, in determinati casi, dalla paura di utilizzare del contenuto che finirebbe per esser considerato duplicato.

Bisogna utilizzare <cite> per segnalare il titolo

<ul> e <ol> elenchi puntati e numerati

Si tratta di un fatto assodato che Google veda di buon occhio gli elenchi, tanto che sempre più spesso troviamo degli elenchi tra i risultati visibili nei risultati di ricerca, in altro, perché segnalati da appositi dati strutturati o per scelta del motore di ricerca.

<figure> e <figcaption>

Seguendo la descrizione del tag, <figure> è un elemento a se stante della pagina, che risulta correlato alla sezione in cui è inserito ma la cui presenza non influisce sulla struttura del documento.

In poche parole, può essere un bene aggiungere un’immagine ad una sezione, ne potenzia l’impatto semantico, ma l’immagine di per sé non fonda un nuovo spazio nel sito, ma è sempre da considerarsi come un elemento interno.

Il <figcaption> serve per rendere visibile la funzione dell’immagine, o per correlarla con informazioni aggiuntive che ne aumentano l’importanza informativa.

starstarstarstarstar4.00 / 4 voto / i

Related Posts

Se ti è piaciuto l'articolo, iscriviti alla Newsletter

2 pensieri su “Semantica HTML5 per la SEO

  1. SEOProf dice:

    Buongiorno Francesco,
    ottima guida agli elementi HTML rilevanti a fini SEO. Spesso ci si dimentica che ne esistono molti altri rispetto ai soliti. Sarebbe interressante avere a disposizione qualche caso studio SEO dove vengono impiegati i meno conosciuti, come ad esempio .

    Buon lavoro,
    Federico Magni (aka SEOProf)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.