Struttura dei contenuti web: semantica, SEO e accessibilità

Il primo passo nella progettazione di un sito web consiste nell’organizzare i contenuti che dovranno essere fruiti dagli utenti e nello stabilire in che modo dovranno disporsi all’interno del layout. La strutturazione dei contenuti avviene per mezzo di un linguaggio di markup descrittivo (tipicamente HTML) che consente di definire il ruolo di ogni elemento della pagina. Questo procedimento coinvolge diversi aspetti di rilievo, tra i quali la semantica, la SEO e l’accessibilità.

Quando si parla di semantica in relazione alla struttura di un sito web ci si riferisce all’organizzazione logica delle componenti del layout e alla suddivisione del testo in unità logiche. L’HTML prevede da sempre l’uso di appositi marcatori per distinguere le differenti tipologie di contenuto (testi, immagini, contenitori ecc.) e identificare le varie parti di un testo (titoli, paragrafi, link, elenchi puntati e numerati ecc.). Ma è solo con l’introduzione della versione 5 del linguaggio di marcatura che il valore semantico è stato esteso anche agli elementi che definiscono la struttura fisica della pagina; l’HTML5, infatti, consente di specificare appostiti tag per marcare intestazioni, pié di pagina, barre di navigazione, sezioni, articoli e così via, stabilendo un’attinenza più stretta con il contenuto presente al loro interno.

La strutturazione semantica del content model, quindi, non ha a che fare con il modo in cui sono presentate visivamente le componenti di un documento web, ma con il significato che hanno per le tecnologie che devono leggerle e comprenderle, cioè gli user agent, come ad esempio i browser. Per capirci: il titolo principale di una pagina è tale perché è marcato con un tag h1 e non come un semplice testo di grandi dimensioni formattato in grassetto; l’intestazione del sito è tale perché il contenitore che la racchiude è marcato con un tag header e non come un generico div posto in cima alla pagina a cui assegniamo class=”header”.

Curare la semantica è importante perché consente agli user agent di riconoscere e interpretare le singole aree dei documenti web e gli elementi che ne fanno parte. Non parliamo solo dei browser, ma anche dei crawler dei motori di ricerca, come Googlebot. Chi si occupa di SEO sa benissimo quanto sia importante strutturare i contenuti in maniera opportuna per agevolare la scansione dello spider di Google e favorire il posizionamento del sito. Negli anni il lavoro di ottimizzazione SEO on page si è molto evoluto, spostando l’attenzione dal concetto di keyword a quello di entità. Anche i linguaggi di marcatura sono progrediti in questa direzione, consentendo l’utilizzo dei dati strutturati (Schema.org) che permettono di indicare a Google, in modo esplicito e non ambiguo, quali sono le entità, le relazioni tra entità e le azioni presenti in un documento.

Grazie a queste tecnologie e ai continui miglioramenti dell’algoritmo, il motore di ricerca è diventato sempre più bravo nel capire il contenuto dei documenti web e nello stabilire il suo grado di pertinenza e di rilevanza in relazione alle intenzioni di ricerca dell’utente. E riesce a fare questo anche se la semantica delle pagine non è perfettamente curata; in alcuni casi, addirittura in presenza di evidenti errori nella strutturazione degli elementi. Cito ad esempio la discussione riportata di recente in un articolo su Search Engine Journal in cui ci si interroga su quanto siano più efficaci le intestazioni (h1, h2 ecc.) rispetto al testo formattato; la risposta è sintetizzabile in una frase riportata nell’articolo: “Search engines are now smart enough to realize what are headings or titles, even if we don’t explicitly tell them” (I motori di ricerca sono ora abbastanza intelligenti da capire quali siano le intestazioni o i titoli, anche se non li indichiamo esplicitamente).

Questo potrebbe indurre i progettisti di siti web a pensare di potersi disinteressare della strutturazione semantica dei contenuti, visto e considerato che per la presentazione visiva basta la formattazione tramite fogli di stile e per la SEO si può contare sulle capacità interpretative del motore di ricerca. Ma sarebbe un grave errore sotto ogni profilo.

Strutturare i contenuti utilizzando i tag semantici previsti dal linguaggio di marcatura produce un codice formalmente corretto che può essere letto e compreso più facilmente da tutte le tecnologie. I vantaggi sono notevoli:

• i browser e le applicazioni client (come i gestori di posta) possono eseguire un rendering più preciso delle pagine;
• i motori di ricerca sono avvantaggiati nella scansione e nella classificazione dei documenti, con enormi benefici lato SEO;
• le tecnologie assistive (come i lettori di schermo e i browser braille) riescono a capire meglio il contenuto e possono sostenere in modo più efficace la navigazione da parte degli utenti diversamente abili.

L’ultimo punto non è affatto da sottovalutare. Infatti, un prerequisito per ottenere l’accessibilità dei siti web è proprio l’uso semantico del codice di marcatura. I dispositivi impiegati dalle persone con disabilità funzionano al meglio solo se ogni elemento della pagina è correttamente individuato dal tag più adatto a esprimerne la funzione all’interno del documento.

Accessibilità vuol dire pieno accesso alle informazioni e ai servizi disponibili in Rete da parte di tutte le categorie di utenti. Non è esattamente questo lo scopo di una buona progettazione web?