Come HTML5 può aiutare il posizionamento seo di un sito web.

Il logo di HTML5Se è vero che google sposta le sue ricerche verso una tipologia “user-content”, più basata sui contenuti che sul contenitore, allora le nuove specifiche dell’HTML5 serviranno tantissimo. Anzi, a dirla tutta, servono già da oggi.

Una delle novità dell’HTML5 sono i TAG SEMANTICI

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

Grazie quindi a questi nuovi tag possiamo avere una nuova tipologia di content model che possiamo chiamare ‘sectioning content‘. Ma cosa hanno adesso di tanto particolare questi tag da modificare il content model? Partiamo dal tag <HEADER>: questo tag contiene in genere l’intestazione del documento o il titolo, ed eventuale sottotitolo, della sezione che andiamo a scrivere, non influisce direttamente sul sectioning content; in un’ottica strutturale, può contenere i tag <h*> e anche i tag per la navigazione. Il tag <FOOTER> serve a contenere informazioni sulla sezione che lo contiene (copyright, autore, collegamenti correlati…), può contenere altre sezioni (<SECTION>) come appendici, note o altro; possono essere presenti anche più <FOOTER> all’interno di uno stesso elemento; quindi, questo tag non viene posizionato solo alla fine di un documento, come invece si può pensare. Uno dei tag HTML5 più importanti per la semantica web è il tag <SECTION> in quanto individua un raggruppamento tematico di contenuti , può contenere un titolo introduttivo proprio, non va sostituito al tag <DIV> per impostare graficamente la pagina; e non va a sostituire il tag <ARTICLE>. L’altro tag HTML5 importante dal punto di vista semantico è, appunto, il tag <ARTICLE>, che rappresenta una vera e propria sezione autonoma di un documento, ed è una parte ripubblicabile (interamente o in parte) in diverse pagine; nel caso di un blog,  possiamo definire l’elemento <ARTICLE> come un post, in cui possiamo anche decidere di pubblicare altri <ARTICLE>come articoli correlati al principale o commenti del principale, così da avere degli <ARTICLE> nidificati. Anche qui il tag <ARTICLE> non va a sostituire il <SECTION> anzi, questi due tag, non sono indipendenti l’uno dall’altro, in un documento possiamo avere sia un <ARTICLE> dentro un <SECTION> che viceversa. Un’altro tag dei sectioning content è il tag <ASIDE> che può rappresentare una parte di un documento che racchiude informazioni marginali, ma comunque correlate al contenuto della pagina, che possono essere considerate distinte; sempre nel caso di un blog, una sidebar laterale. Ultimo, ma non meno importante tra i tag semantici di HTML5, è il tag <NAV> che in sostanza contiene i link di navigazione; anche questo elemento, come il tag <HEADER, non va a sostituire i tag come <UL> o <OL>, bensì li racchiude; inoltre breadcumb e link a piè di pagina non devono essere inseriti nel tag <NAV> in quanto non contengono link principali. Per intenderci i link principali sono quelli contenuti nei grandi blocchi di navigazione come <HEADER> o <SECTION>. Qui di seguito una struttura ipotetica con i nuovi tag html5

struttura-html5

L’altra novità che lega SEO e HTML5 sono i “MICRODATA”.

I microdata sono pezzi di codice per i motori di ricerca che “etichettano”  un contenuto per descrivere un tipo specifico di informazione come, per esempio, informazioni su persone, eventi, o recensioni. Ogni tipo di informazione descrive uno specifico tipo di oggetto, come appunto una persona, un evento, o una recensione. I parametri fondamentali per i microdata sono 3: “itemscope” (che definisce un’oggetto), “itemtype” (che definisce una persona, o un evento, una recensione), “itemprop” (che definisce una proprietà dell’oggetto). Un esempio di microdata semplice è:

<div itemscope itemtype=”http://data-vocabulary.org/Person”>Mi chiamo <span itemprop=”name”>Vito Antonio Lioce</span> potete trovarmi come <span itemprop=”nickname”>vitolioce</sapn> su molti social network (come twitter ad esempio). Questo è il mio blog: <a href=”http://www.vitolioce.it” itemprop=”url”>www.vitolioce.it</a>; io sono un <span itemprop=”role”>Web developer – Libero Professionista</span></div>

esempio di rich-snippet

ATTENZIONE: per utilizzare i microdata abbiamo bisogno di collegarci ad un “vocabolario” che contiene le proprietà del nostro oggetto. In questo esempio ho utilizzato l’oggetto itemscope definendolo come persona (http://data-vocabulary.org/Person), dicendo che mi chiamo Vito Antonio Lioce, che il mio nickname è vitolioce, l’URL del mio blog è http://www.vitolioce.it, e che sono un Web Developer. Esistono altri tipi di vocabolari, come per le recensioni (Review), prodotti (Product), eventi (Event) e organizzazioni (Organization); ognuno che definisce proprietà differenti.

Lascia un commento

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