I motori di ricerca, a cominciare da Google, stanno diventando sempre di più il regno di spammer presenti ai primi posti dei risultati solo perchè hanno creato pagine ultra-ottimizzate sebbene quasi mai pertinenti con la nostra ricerca.
Uno dei modi più efficaci per risolvere questo problema è creare dei motori di ricerca più “intelligenti” che possano capire meglio i contenuti e il significato della nostra pagina così da interpretare nella maniera corretta la nostra query per mostrarci i risultati più adeguati.
Per aiutare i motori di ricerca in questo compito piuttosto arduo – spesso è difficile capirsi fra umani, figuriamoci con una macchina… – possiamo sfruttare ancora una volta le grandi potenzialità offerte da HTML5 in ambito semantico, in particolare utilizzando alcuni tag utili a strutturare la nostra pagina e ad assegnare un peso e un significato diverso alle varie sezioni
Segmentazione della pagina
Le novità di HTML5 in ambito semantico sono molteplici: in questo tutorial introduttivo vogliamo analizzare i nuovi tag introdotti per l’organizzazione della struttura della pagina che aiutano i motori di ricerca ad individuare le parti più importanti da quelle ripetitive e meno importanti.
Ecco, prima d tutto, i tag:
- header: uno dei campi più importanti in ambito SEO, è possibile inserire qui del testo ma anche – anzi, soprattutto – i nostri H1, H2 e link più importanti
- nav: parte di navigazione, solitamente il menu per le varie sezioni del sito
- article: il “corpo” principale della nostra pagina, ovvero la parte dove è presente il contenuto, suddiviso eventualmente in header, footer e sezioni
- section: un “pezzo” di articolo, diciamo un paragfrafo o meglio un “capitoletto”, un gruppo di paragrafi omogenei
- aside: altro elemento molto importante per il SEO, rappresenta parti “laterali” della pagina e che dunque richiedono un’attenzione minore dai parte dei motori di ricerca. Ci si potrebbero mettere, ad esempio, i banner o link pubblicitari
- footer: simile all’header, è il “piede” di ogni pagina dove di solito vengono inseriti elementi ripetitivi come il copyright, altri link di navigazione, contatti, etc.
Chiaramente al codice da noi indicato andrà poi associato un CSS per posizionare gli elementi nella maniera che desideriamo. Inoltre, visto che non tutti i browser riconoscono i tag HTML5, suggeriamo di “avvolgere” i tag in
per garantire una compatibilità il più possibile totale con vecchi browser.
SEO e HTML5
E tutto questo con il SEO che cosa c’entra? Come forse i più esperti tra i lettori avranno già intuito, avere la possibilità di “segmentare” la pagina assegnando alle varie sezioni una importanza diversa (article sarà certo più importante di aside o footer) è una vera e propria manna dal cielo per chi deve far capire ai motori di ricerca quali parti della pagina e quali contenuti sono fondamentali e devono essere indicizzati meglio. In un mondo in cui il futuro (se non il presente) sarà dominato da chi farà capire meglio agli spider il significato delle proprie pagine evitare che contenuti estranei “sporchino” il significato o ragguppare in sections i concetti omogenei potrebbe essere fondamentale in un ottica di posizionamento sui motori di ricerca.
Come detto in precedenza, inoltre, per ora non abbiamo fatto altro che analizzare la superfice di quello che HTML5 offre in relazione al web semantico e al SEO: i due ambiti principali in cui le nuove tecnologie del web ci verranno in aiuto sono i microformats e Accessible Rich Internet Applications, uno standar W3C per definire ancora meglio “ruoli” e significati delle varie parti di un documento web – argomenti di futuri tutorial e articoli!
p.s. Se avete trovato utile questo post, condividete e commentate , grazie! 😉
