(Estratto da Paolo Sordi, Progettare per il Web, Carocci editore, Roma, 2013, per gentile concessione dell’Editore.)
Senza HTML5, il progettista ha due possibili soluzioni per aggiungere forza semantica alle pagine web, peraltro entrambe tuttora valide (e non conflittuali) e accettate dai principali motori di ricerca.
Una prima soluzione sono i microformats (notare il prefisso nel nome). Nati per iniziativa di un gruppo di progettisti e sviluppatori, i microformat hanno offerto per anni una risposta pragmatica all’estensione semantica dell’HTML: l’utilizzo degli attributi class e rel per includere valori derivati da standard già adottati in altri contesti. Un esempio è hCard (http://microformats.org/wiki/hcard), il microformat per rappresentare persone, aziende, organizzazioni, derivato da vCard (http://www.ietf.org/rfc/rfc6350.txt), un formato di dati sviluppato dall’Internet Engineering Task Force (IETF) e utilizzato da un gran numero di applicazioni che gestiscono, importano ed esportano contatti (proviamo a esportare un numero di telefono dalla nostra rubrica: otterremo un bigliettino elettronico in formato vCard).
Per rappresentare e descrivere un contatto in una pagina web attraverso hCard, occorre semplicemente utilizzare la sintassi di marcatura HTML a partire da un elemento radice con classe vcard e quindi applicare le classi opportune ai diversi blocchi di contenuto:
<div class="vcard"> <span class="fn">Paolo Sordi</span> <div class="org">Infolet</div> <a class="email" href="mailto:psordi@infolet.it">psordi@infolet.it</a> <div class="tel">+3906</div> </div>
La seconda soluzione, promossa dal W3C, consiste nel ricorrere all’estensibilità di XHTML attraverso RDFa (Resource Description Framework in attributes). In pratica, in una marcatura XHTML si può aggiungere un vocabolario RDF (il framework sviluppato dal W3C per l’interscambio di dati sulla Rete) ed esprimerlo attraverso l’utilizzo di attributi negli elementi, in maniera simile a quanto abbiamo visto succedere per la struttura XML della Really Simple Syndication. Trasformata in XHTML+RDFa, la marcatura del nostro articolo potrebbe per esempio avvantaggiarsi del già conosciuto schema Dublin Core per descrivere più semanticamente la risorsa pubblicata:
<div xmlns:dc="http://purl.org/dc/elements/1.1/"> <h1 property="dc:title">Barack Obama rieletto presidente</h1> <p><time datetime="2012-11-07" property="dc:created">7 novembre 2012</time> - di <span property="dc:creator">Mario Rossi</span></p> <div property="dc:description"> <p>Barack Obama è stato rieletto per un secondo storico mandato alla Casa Bianca. Con i 9 grandi elettori del Colorado e i 13 della Virginia</p> </div> </div>
Dall’estate del 2009, Google, insieme a Yahoo, ha iniziato a supportare sia microformats che RDFa: da quel momento, in base alla marcatura HTML (o XHTML che fosse), i motori di ricerca hanno dunque iniziato ad avere la possibilità di capire se il contenuto indicizzato fosse una persona piuttosto che una recensione di un libro, un evento piuttosto che una ricetta culinaria, e a restituire risultati di ricerca in grado di fornire indicazioni intelligenti (rich snippets) sulla natura del contenuto ricercato e trovato.
Ma soprattutto Google, Yahoo, Microsoft hanno cominciato a costruire e rendere disponibili vocabolari RDF (http://schema.org) per condividere linguaggi comuni di descrizione e strutturazione dei dati sul Web cui far riferimento nella scansione semantica della Rete. Ed è proprio qui che entrano in gioco i microdata HTML5.
Microdata HTML5
I microdata sono il gioco di sponda perfetto di HTML5 per integrare nel linguaggio di marcatura ipertestuale gli schemi con i quali i motori di ricerca stanno mappando e mapperanno semanticamente i contenuti del Web, perché da un lato risolvono il problema dell’assenza nei microformats di un meccanismo di estensibilità dell’HTML, dall’altro evitano la complessità di scrittura di RDFa (tanto complessa che il W3C ha sentito la necessità di rilasciarne una specifica ‘alleggerita’ chiamata RDFa Lite).[1]
Estendere semanticamente HTML5 è un’operazione che si risolve in tre attributi: itemscope, itemtype, itemprop, e due mosse: il richiamo di un vocabolario RDF disponibile su schema.org e l’inserimento dei rispettivi valori per le proprietà dei contenuti da marcare. Nella pratica, se volessimo riscrivere in HTML5 il nostro biglietto da visita elettronico, lo faremmo così:
<div itemscope="itemscope" itemtype="http://schema.org/Person"> <span itemprop="name">Paolo Sordi</span> <div itemprop="affiliation">Infolet</div> <a itemprop="email" href="mailto:psordi@infolet">psordi@infolet</a> <div itemprop="telephone">+390685225</div> </div>
Con itemscope indichiamo che quella struttura racchiusa nell’elemento div descrive un contenuto particolare; con itemtype e il corrispondente valore indichiamo che quel contenuto particolare è una persona; con gli attributi itemprop e i corrispondenti valori esprimiamo le proprietà relative alla persona, in conformità della sintassi prevista nel vocabolario su http://schema.org/Person.
Gli schemi possono anche essere integrati gli uni con gli altri, o meglio, per parlare il linguaggio del markup: nidificati gli uni negli altri. Pensiamo di dover pubblicare sul Web una recensione di un libro e immaginiamo di volere renderla visibile in maniera intelligente a strutturata ai motori di ricerca, in modo che dai risultati sia immediatamente evidente anche per chi ha effettuato la ricerca che quel contenuto parla di quel libro e lo valuta in una certa maniera. Schema.org ovviamente dispone di uno schema generale per descrivere i prodotti intellettuali (CreativeWork: http://schema.org/CreativeWork), ma (ancora più ovvio) offre anche uno schema più specifico per quel sottoinsieme di prodotto intellettuale che è un libro: Book (http://schema.org/Book). Inoltre, dispone di un altro vocabolario, Review (http://schema.org/Review), che serve a rappresentare recensioni di prodotti (un disco, un’applicazione software, un film, e, naturalmente, un libro tra gli altri prodotti possibili). Per scrivere la nostra recensione a beneficio dei motori di ricerca (e di conseguenza a beneficio dei navigatori che potranno trovarla), non dobbiamo fare altro che utilizzare i due schemi contemporaneamente, annidandoli l’uno nell’altro:
<article itemscope="itemscope" itemtype="http://schema.org/Book"> <h1 itemprop="name">Una cosa divertente che non farò mai più</h1> <img itemprop ="image" src="https://photo.goodreads.com/books/1290204786l/9734610.jpg" title="Una cosa divertente che non farò mai più" /> <span itemprop="author">David Foster Wallace</span>, <span itemprop="datePublished">1997</span> <div itemprop="review" itemscope="itemscope" itemtype="http://schema.org/Review"> <span itemprop="reviewRating">5</span> <p itemprop ="reviewBody">Le logiche viziose del consumismo viste dalla prospettiva disperante di una crociera ai Caraibi. Insuperabile Wallace, la mente migliore della sua generazione. Davvero.</p> <p>di <span itemprop="author">Paolo Sordi</span></p> </div> </article>
Per cogliere la logica della struttura dei microdata utilizzati è sufficiente seguire la gerarchia del Document Object Model (DOM) del documento HTML: un elemento article, che dichiara di descrivere un libro, descrive nei suoi primi quattro elementi discendenti (h1, img, span, span) il nome, l’autore, l’immagine e la data di pubblicazione di quel libro; quindi, descrive una recensione nel quinto elemento discendente (div), che a sua volta dichiara di descrivere nei suoi elementi discendenti le proprietà della recensione: la valutazione (il voto in una scala da uno a cinque), il testo e l’autore. Proprio quest’ultima proprietà, author, evidenzia bene il diverso significato che lo stesso valore assume in ragione del rapporto gerarchico di discendenza degli elementi HTML ai quali è attribuito: il contenuto ‘Paolo Sordi’ è compreso dai motori di ricerca quale autore della recensione (e non del libro) in quanto l’elemento span che lo marca è discendente diretto di un elemento p discendente diretto di un elemento div che descrive lo schema di una recensione. Al contrario, il contenuto ‘David Foster Wallace’ può essere compreso come autore del libro (e non della recensione) perché l’elemento span che lo marca è discendente diretto di un elemento article che descrive lo schema di un libro.
La nidificazione di vocabolari può in teoria arrivare a ulteriore livelli di profondità. Immaginiamo di volere aggiungere un contatto email dell’autore della recensione dal quale possa ricavarsi un bigliettino elettronico vCard:
<article itemscope="itemscope" itemtype="http://schema.org/Book"> <h1 itemprop="name">Una cosa divertente che non farò mai più</h1> <img itemprop ="image" src="https://photo.goodreads.com/books/1290204786l/9734610.jpg" title="Una cosa divertente che non farò mai più" /> <span itemprop="author" >David Foster Wallace</span>, <span itemprop="datePublished">1997</span> <div itemprop="review" itemscope="itemscope" itemtype="http://schema.org/Review"> <span itemprop="reviewRating">5</span> <p itemprop ="reviewBody">Le logiche viziose del consumismo viste dalla prospettiva disperante di una crociera ai Caraibi. Insuperabile Wallace, la mente migliore della sua generazione. Davvero.</p> <p>di <span itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"><span itemprop="name">Paolo Sordi</span> - <a itemprop="email" href="mailto:psordi@infolet.it">psordi@infolet.it</a></p> </div> </article>
Nell’effettuare l’indicizzazione, il motore di ricerca ricava grazie all’HTML esteso metadati decisivi sui contenuti, classificandoli in item distinti con proprietà distinte in base ai tipi di vocabolari inclusi nel DOM. La rappresentazione schematica di questa scansione semanticamente arricchita, quella che poi viene utilizzata per restituire appunto i rich snippets, ce la offre Google (http://www.google.com/webmasters/tools/richsnippets):
Item Type: http://schema.org/book name = Una cosa divertente che non farò mai più image = http://photo.goodreads.com/books/1290204786l/9734610.jpg author = David Foster Wallace datepublished = 1997 review = Item( 1 ) Item 1 Type: http://schema.org/review reviewrating = 5 reviewbody = Le logiche viziose del consumismo viste dalla prospettiva disperante di una crociera ai Caraibi. Insuperabile Wallace, la mente migliore della sua generazione. Davvero. author = Item( 2 ) Item 2 Type: http://schema.org/person name = Paolo Sordi email text = psordi@luiss.it href = mailto:psordi@luiss.it
[1] Formati semantici contro
Messi da parte i microformat, che se non altro hanno avuto il merito storico di aver sensibilizzato gli autori a un potenziamento semantico della marcatura, la coesistenza di RDFa e microdata ha generato una sorta di guerra di religione tra i fautori dei due formati. I microdata nascono come componente di HTML5 in risposta ai limiti dei microformats e come soluzione al livello di difficoltà posto dalla scrittura di attributi RDF in HTML, un linguaggio noto per la sua semplicità, come abbiamo più volte sottolineato. D’altra parte, RDF è una raccomandazione del W3C dal 2004, una tecnologia matura e ampiamente diffusa sul Web, sulla base della quale costruire pagine semantiche. Inoltre, RDFa Lite, raccomandazione dal giugno 2012 (http://www.w3.org/TR/rdfa-lite/), introduce vocabolari RDF in HTML allo stesso livello di semplicità di scrittura dei microdata, ponendosi come un’alternativa del tutto equivalente. Manu Sporny elenca un buon numero di ragioni per preferire RDFa Lite ai microdata (http://manu.sporny.org/2012/mythical-differences/); Bruce Lawson, nel tirare le somme dello scontro, bilancia i vantaggi dell’adozione dell’uno o dell’altro formato (http://www.brucelawson.co.uk/2012/talismanic-fight-between-rdfa-and-microdata/). Per coerenza e continuità di trattazione su HTML5, noi concentreremo l’attenzione sui microdata, ma RDFa Lite sono un’alternativa da tenere comunque in seria considerazione.