Markup semantico
Il Markup semantico per dopare la vostra SEO
Il linguaggio HTML è, come il nome stesso lo indica, un linguaggio di TAG, di marcatori. Ci sembra evidente quanto sia importante conoscere l’utilità di ciascun tag, ovvero con quale scopo sono creati e come sono definiti negli standard.
Attenzione, si parla di markup semantico e non di semantica in sé che è un argomento ben più vasto che supera di gran lunga i confini del web (e le nostre stesse competenze).
L’utilizzo di un markup semantico ha diversi vantaggi, in particolar modo, per l’accessibilità, il trattamento, l’analisi e la visualizzazione di un documento. In questo articolo resteremo, naturalmente, entro i limiti del contesto dei motori di ricerca, poiché, effettivamente, il markup semantico presenta delle concrete opportunità per la vostra visibilità!
Struttura di un documento e del suo contenuto
Per essere più chiari, riportiamo qualche esempio concreto con diversi tag semantici:
- Tag h1, h2, h3, h4, h5 e h6: Tag che delimitano i titoli. H1 rappresenta il (i) titolo (i) più importante (i), h6, il (i) titolo(i) meno importante (i)
- Tag p: Tag che delimita un paragrafo
- Tag ol: Lista ordinata
- Tag blockquote: Citazione
In funzione del significato del vostro contenuto, sarà dunque necessario utilizzare i tag più adeguati.
Tag table, div e semantica
Una leggenda metropolitana afferma che l’utilizzo del tag div sia benefico per l’ottimizzazione organica di un sito al contrario del tag table. Semplicemente non è vero! Anzi al contrario, visto che il tag table sembra dare più senso a dei dati rispetto a un tag div.
Link tra markup semantico e motori di ricerca
I motori di ricerca analizzano il codice HTML prima di generare la loro classifica di posizionamento. L’obiettivo è di capire il senso stesso di un documento così da posizionarlo correttamente e proporre dei risultati rilevanti ai loro utenti.
I tag del linguaggio HTML sono gli alleati dei motori di ricerca per soddisfare le loro esigenze di rilevanza. Come abbiamo già evocato, quando questi tag sono utilizzati con giudizio, permettono di analizzare in maniera più accurata la struttura di un documento, come anche di ponderare più facilmente l’importanza di un’informazione.
Per quanto riguarda l’ottimizzazione del vostro sito, sarà dunque necessario che le vostre pagine:
- Trattino il tema a cui mirate
- Contengano le parole chiave a cui mirate e che siano posizionate, semanticamente parlando, in maniera strategica nel vostro documento. Ovvero, bisognerà che le vostra parole chiave siano delimitate dai tag che attribuiscono loro importanza.
Esempio di markup semantico
Ecco un esempio di buon utilizzo dei tag h1, h2, h3 ,p ,ul , ol e li.
<h1>Gli elefanti delle foreste</h1>
<p>In questa sezione, affronteremo gli argomenti meno conosciuti sugli elefanti delle foreste.</p>
<h2>L'habitat</h2>
<p>Gli elefanti delle foreste non vivono negli alberi ma tra gli alberi.</p>
<h2>L’alimentazione</h2>
<p>Gli elefanti delle foreste non mangiano gli stessi alimenti di giorno e di notte.</p>
<h3>L'alimentazione notturna</h3>
<p>La notte, gli elefanti delle foreste mangiano gli alimenti seguenti:</p>
<ul>
<li>Topi</li>
<li>Serpenti</li>
<li>Ragni</li>
</ul>
<h3>L’alimentazione giornaliera</h3>
<p>Il giorno gli elefanti delle foreste mangiano altri alimenti. Ecco la lista degli alimenti in ordine di preferenza:</p>
<ol>
<li>Erba</li>
<li>Fieno</li>
<li>Felci</li>
</ol>
CSS e markup semantico
Il linguaggio CSS permette di modificare la visualizzazione dei tag. Per tale ragione, la scelta di utilizzare un tag o un altro dovrà farsi prima di tutto in funzione del senso stesso del tag piuttosto che della sua visualizzazione di default sul vostro navigatore.
