Come già sapete il mondo del posizionamento siti sui motori di ricerca è una scienza oscura, fatta di credenze più o meno fondate, tanti test e rapidissimi cambiamenti negli algoritmi e nei parametri che determinano il ranking delle pagine web. Certamente oggi vi presento una lista che aiuterà le pagine web sopratutto nel senso dell’ottimizzazione onpage.
Nell’aria c’è un grosso cambiamento, la tecnologia si sta muovendo e il web, che già evolve in modo rapido, segue a ruota: ciò è enfatizzato dal rilascio della versione 5 del linguaggio HTML. Vediamo cosa cambia con HTML4:
Struttura di una pagina HTML4
Nuova struttura della pagina con HTML5
Ciò che balza sicuramente agli occhi è l’introduzione di nuovi tags, nonchè una struttura ben più chiara e leggibile rispetto a prima dovuta proprio ai nuovi tags e non più ai div i quali, per quanto organizzati bene nel codice e col css, a volte sono un pò ridondanti e affollati.
In definitiva i tag sono organizzati come segue:
<body>
<header>…</header>
<nav>…</nav>
<article>
<section>
…
</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>
Scendiamo ora nel dettaglio e cerchiamo di capire un pò meglio ciascuna sezione della pagina, d’ora in avanti tag:
HEADER: è quivalente al h1, e può contenere più tag al suo interno. Possiamo quindi trovare più intestazioni, paragrafi e link che avranno un maggiore peso all’interno dell’identificazione dell’argomento principale della pagina. Questo tag andrà a braccetto col tag <title> livello semantico.
Esempio:
<header>
<hgroup>
<h1>Titolo dell’articolo</h1>
<p>By SEOCosenza.com</p>
</hgroup>
</header>
oppure, più semplice:
<header>
<h1>Indicazioni SEO</h1>
<h2>Nuovi tag</h2>
</header>
NAV: è il tag preposto a contenere gli elementi di navigazione della pagina. Molto importante poichè esso sarà di sicura indicazione agli spider e ai motori di ricerca per capire la navigazione all’interno del sito e dare una stima delle pagina correlate e della loro importanza relativa e assoluta nel sito. Probabilmente questo tag avrà una certa rilevanza vista la sitemap di ogni sito (magari un giorno sostitutiva?)
Un esempio:
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/services”>Servizi</a></li>
<li><a href=”/about”>Chi Siamo</a></li>
</ul>
</nav>
ARTICLE: è la vera innovazione di HTML5. Questo tag incorporerà tutto quel testo e quei tags che rappresentano il corpo vero e proprio della pagina. Ciascuna pagina, inoltre, avrà uno o più tags <article>, pensa ad un archivio per cui gli spider avranno indicazioni maggiori sull’indicizzazione di tali contenuti e capiranno come seguire le pagine indicate come approfondimento.
Da questo tag, mi aspetto che venga considerato come un approfondimento del meta-description.
Per esempio:
<article>
<a href=”link”>Anchor text</a>
<br />
Informazioni
</article>
SECTION: è un tag per definire sezioni e sottosezioni della pagina. Fornisce indicazioni informative sulle sezioni di una pagina che puoi strutturare ad albero e al cui interno puoi inserire intestazioni, link e paragrafi.
<section>
<h1>Sezione 1</h1>
<section>
<h1>Sezione 1.1</h1>
<section>
<h1>Sezione 1.1.1</h1>
</section>
</section>
</section>
ASIDE: altro tag importante. Con esso ci accorgiamo come la release di HTML5 svada in direzione “content” con degli spunti quasi tratti dal mondo dei blog.
<aside>
<h1>Archivio</h1>
<ul>
<li><a href=”/2010/04/”>Aprile 2010</a></li>
<li><a href=”/2010/03/”>Marzo 2010</a></li>
<li><a href=”/2010/02/”>Febbraio 2010</a></li>
</ul>
</aside>
FOOTER: finalmente un tag per specificare il footer della pagina!
<footer>Footer e crediti</footer>
In definitiva quello che è molto interessante è che il codice HTML5 si sta muovendo in una direzione di sviluppo a componenti.
Già il linguaggio rappresenta un albero, o grafo, e l’introduzione di questi tag, sopratutto per i webdesigner, può rappresentare un’importante svolta in merito di layout della pagina e della sua costruzione. Infatti, secondo me, regge ancor di più oggi il paragone con il design pattern composite, indicando un documento HTML come un insieme specifico di tag, ciascuno dei quali assolve ad un particolare compito funzionale, oltre che di rappresentazione.
Prima di lasciarvi, voglio indicarvi un paio di strumenti per testare il supporto di HTML5 sui browser: html5test.com e caniuse.com.
HTML5 e SEO: novità posizionamento con il nuovo HTML5 http://bit.ly/d023sC