HTML5 e SEO: novità posizionamento con il nuovo HTML5

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

Struttura di una pagina HTML4

Nuova struttura della pagina con HTML5

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.

Posted in Novità Tagged with: ,
4 comments on “HTML5 e SEO: novità posizionamento con il nuovo HTML5
  1. Spero che stavolta Internet Explorer non ritardi il supporto del nuovo standard, come è stato in passato. Ogni volta noi designer abbiamo dovuto creare delle regole ad hoc per permettere la corretta visualizzazione con il più famoso ed utilizzato browser al mondo. Sarebbe ora che si partisse tutti insieme con il piede giusto, per favorire veramente lo sviluppo di un web migliore!

  2. admin says:

    Quello che dici è corretto, ma sopra i webdesigner ci sono ragioni commerciali delle grandi case, quindi staremo a vedere. Ciao!

  3. Giorgia Nicolini says:

    Allo stato attuale siamo sicuri che con l’HTML5 sia più facile posizionarsi? E’ indubbio il vantaggio di avere un sito responsive ben fruibile dai dispositivi mobili, ma rimango ancora dubbiosa sul vantaggio rispetto all’XHTML per ciò che concerte il posizionamento. Bell’articolo comunque! A proposito, mi piacciono molto (parlando di SEO) i due links ai piedi dell’articolo contenenti i links agli altri articoli. Invece del solito “potresti leggere anche” o “potrebbe piacerti anche”. Un modo più pulito e meno confuso di trattenere gli utenti sul sito, che punta dritto al contenuto senza fronzoli. 🙂

  4. Andrea Infusino says:

    ciao Giorgia,
    grazie per il tuo punto di vista.
    Vorrei partire con una precisazione: questo articolo è del 2010 e ad oggi sull’HTML5 cresce l’attenzione, via via sempre maggiore, sia da parte degli sviluppatori che delle compagnie che sviluppano i nostri attuali browser.
    Inoltre saprai bene che i fattori di posizionamento, oltre 200 à-la-Google, sono molteplici.
    Per queste ragioni, un codice strutturato al meglio e in linea ai meccanismi più recenti a mio avviso dà una mano in tal senso, così come abbiamo visto per i microformati e il web semantico che sono oggi una realtà, anche questa, in espansione.

    Personalmente ho trovato molto interessante diverse caratteristiche dell’HTML5, più che in ambito SEO dove sto seguendo altri tipi di aggiornamenti ed evoluzioni, legate alle nuove funzionalità che consentono maggiore interazione con l’utente, sfruttando le potenzialità del browser, più che noiosi e complicati scrpt lato client e lato server. Uno fra i tanti è NodeJS che grazie alle sue caratteristiche e in comunione con HTML5 ti consente di creare una videochat o uno streaming in meno di 100 righe di codice.

7 Pings/Trackbacks for "HTML5 e SEO: novità posizionamento con il nuovo HTML5"
  1. seocosenza says:

    HTML5 e SEO: novità posizionamento con il nuovo HTML5 http://bit.ly/d023sC

  2. seocosenza says:

    #HTML5 e #SEO: novità #posizionamento con il nuovo HTML5 http://bit.ly/d023sC

  3. RT @seocosenza: #HTML5 e #SEO: novità #posizionamento con il nuovo HTML5 http://bit.ly/d023sC

  4. html5watcher says:

    RT @enricogualandi: RT @seocosenza: #HTML5 e #SEO: novità #posizionamento con il nuovo HTML5 http://bit.ly/d023sC

  5. RT @HTML5watcher: RT @enricogualandi: RT @seocosenza: #HTML5 e #SEO: novità #posizionamento con il nuovo HTML5 http://bit.ly/d023sC

Leave a Reply