H1 come logo o titolo principale?

L’uso corretto dei tag heading all’interno di una pagina web è di estrema importanza per avere una strutturazione dei contenuti semantica e lineare. Attraverso questi tag i crawler possono determinare le sezioni e la loro suddivisione logica:

• <h1> determinerà l’argomento principale della pagina
• <h2> per le varie sezioni dell’argomento
• <h3> per le sottosezioni
• ecc…

L’approccio semantico

Fatta questa premessa, nel corso degli anni sono nate due principali metodologie per quanto riguarda la taggatura del titolo principale.
Ammettiamo di avere in un sito di un distributore di carburante una sezione prodotti che elenca i servizi principali con relativa descrizione in questo ordine esatto: rifornimento benzina, lavaggio auto, cambio gomme, snack e bibite.

L’approccio più classico è quello di attribuire il tag <h1> alla prima voce (rifornimento benzina) e agli altri servizi il tag consecutivo <h2> (in quanto è bene usare solo un <h1> per pagina). Il problema sta nel fatto che se analizziamo la strutturazione ottenuta, gli heading dopo il titolo principale dovrebbero corrispondere a sezioni dell’argomento ma non è corretto dire che lavaggio auto, cambio gomme, snack e bibite sono sottosezioni di rifornimento benzina ma bensì della macro sezione prodotti.
Una corretta divisione vedrebbe come titolo principale prodotti e le sezioni correlate ad esso come titoli secondari.

Per venire incontro a questa esigenza (e non solo) senza dover necessariamente specificare visivamente nella pagina l’argomento principale (sarebbe poco utile all’utente specificare prodotti come titolo principale) sono nate delle tecniche CSS come Cover-up span, BIR o My Latest take che consentono ad esempio di utilizzare il logo del sito non solo graficamente ma anche come riferimento semantico del titolo principale.

Utilizzando questi metodi possiamo associare una corretta descrizione all’<h1> e “mascherarlo” con il logo del sito. Avremo di conseguenza la possibilità di offrire all’utente una pagina senza testo aggiuntivo e un’interpretazione semantica del codice contestuale alla pagina (ad esempio “I nostri prodotti”).

Il dibattito

Il problema di queste tecniche è che utilizzano proprietà CSS per mascherare contenuti testuali e a detta di alcuni possono essere interpretate come un tentativo di keyword stuffing. In effetti uno sviluppatore potrebbe nascondere parole chiave non attinenti al contenuto per cercare di aumentare il traffico al proprio sito (quello che si faceva nei primi siti web utilizzando “suonerie per cellulari” in qualsiasi progetto). La mia personale esperienza è che ho usato ed uso tutt’ora queste tecniche solo ed unicamente per garantire un alto grado di interpretazione semantica ed accessibilità e così facendo non ho mai (credo, nessuno può darmi la certezza) ricevuto penalizzazioni o quant’altro ma ho sempre invece ottenuto ottimi risultati: un progetto sviluppato che fa forte uso di questi sistemi ha un posizionamento eccellente (prime posizioni con una keyword con competitività di quasi tre milioni di risultati).

Cosa usare allora?

Il mio consiglio è innanzitutto, come sempre, di valutare progetto per progetto come e dove si può intervenire e di utilizzare la tecnica che reputate meno invasiva e più accessibile tra le tante. Se l’uso di questi metodi ha un fine corretto nel rispetto delle ricerche dell’utente avete poco da preoccuparvi ma dato che nessuno di noi può conoscere l’esatto funzionamento attuale e futuro degli algoritmi che caratterizzano i crawler, dove possibile è meglio cercare di utilizzare una grafica che ci consenta di riprodurre le parti semantiche direttamente con il codice HTML.

Segnalo anche un curioso sondaggio in cui gli utenti si confrontano sulla problematica.