Come utilizzare il formato RDFa per il vostro sito

RDFa (Resource Description Framework in Attributes) è un formato per l’inserimento di affermazioni RDF nei file HTML, XHTML o altre varianti XML, che il World Wide Web Consortium (W3C) consiglia di usare come standard. I programmatori utilizzano il Resource Description Framework (RDF) per specificare meglio i contenuti delle pagine di un sito grazie ai metadati, in modo da permettere ai browser e ai crawler di comprendere le relazioni semantiche tra gli elementi. Ne consegue che il modello RDF è un componente importante del web semantico. Questo formato è stato sviluppato nel 2004 per essere utilizzato nei documenti XHTML, a cui è seguita nel 2008 la proposta ufficiale del W3C di utilizzare RDFa 1.0 come standard. A partire dalla versione 1.1, introdotta nel 2012 insieme ad una variante ridotta per principianti, conosciuta con il nome di RDFa Lite, RDFa è compatibile con il classico linguaggio HTML e HTML5.

RDF nel linguaggio HTML

RDFa rappresenta solo una delle tante possibilità che permettono di annotare le affermazioni RDF. Infatti, le espressioni RDF vengono inserite nel linguaggio di markup HTML per rendere i contenuti scritti dagli uomini leggibili dai motori di ricerca tramite dati strutturati. Questa integrazione è possibile grazie ad attributi espressi sotto forma di tag nel linguaggio HTML, che avvicinano RDFa agli altri formati del linguaggio semantico, come i microformati o i microdati. RDFa mette a disposizione la meta-sintassi per il markup semantico mentre, per descrivere con i metadati le relazioni tra gli elementi, serve un vocabolario condiviso e per questo i programmatori possono contare su diversi standard come FOAF, SKOS, Dublin Core o SIOC. Google, Bing, Yahoo e Yandex consigliano un markup basato su Schema.org, un vocabolario nato da un progetto comune dei principali motori di ricerca per uniformare i dati strutturati.

Applicazione del markup con RDFa

RDFa introduce una serie di nuovi attributi per l’inserimento dei metadati, che ampliano il vocabolario di base dei documenti scritti nei rispettivi linguaggi di markup (ad esempio HTML, XHTML o HTML5). Nella lista seguente sono indicati gli attributi di RDFa Lite:

Attributo

Descrizione

vocab

L’attributo vocab definisce il vocabolario desiderato alla base del markup degli elementi con RDFa (ad esempio Schema.org).

typeof

Con l’attributo typeof si assegnano agli elementi degli schemi precisi, chiamati “types”, secondo il vocabolario scelto.

property

Con l’attributo property vengono assegnate delle proprietà agli elementi.

resource

L’attributo resource consente ai programmatori di assegnare delle indicazioni agli elementi, chiamate “identifier”.

prefix

L’attributo prefix dà la possibilità ai programmatori di scegliere più di un vocabolario, qualora non bastassero i termini del primo vocabolario per realizzare il markup voluto.

A supporto degli attributi RDFa ci sono i tag HTML vuoti, cioè senza alcun valore semantico. I metadati si trovano perciò racchiusi tra gli elementi <div> e <span>. In genere tutte le affermazioni RDF possono essere inserite in tutti i tag HTML tramite RDFa, seguendo lo schema qui sotto:

Schema di base per la sintassi RDFa:
<div vocab="http://schema.org/" typeof="Schema">
  <span property="Proprietà">Testo</span>
<div>  

Mettere in evidenza l’indirizzo postale con RDFa

Il seguente codice indica i dati di contatto in un documento HTML:

Codice HTML di un indirizzo postale:
<p>
  Google Inc.<br>
  P.O. Box 1234<br>
  Mountain View, CA<br>
  94043<br>
  United States<br>
</p>

Mentre un visitatore in carne e ossa riconosce immediatamente che si tratta di un indirizzo in formato americano identificabile come testo di un paragrafo grazie al tag <p>, i programmi come browser e crawler hanno invece bisogno di metadati aggiuntivi per capire il significato delle informazioni:

RDFa markup of a mailing address:
<p vocab="http://schema.org/" typeof="PostalAddress"><br>
  <span property="name">Google Inc.</span><br>
  P.O. Box <span property="postOfficeBoxNumber">1234</span><br>
  <span property="addressLocality">Mountain View</span>,<br>
  <span property="addressRegion">CA</span><br>
  <span property="postalCode">94043</span><br>
  <span property="addressCountry">United States</span><br>
</p>

Nella riga 01 il tag HTML <p> svolge la funzione di elemento di supporto per gli attributi RDFa “vocab” e “typeof”. I programmi che leggono un codice evidenziato in questo modo comprendono così che per tutti gli elementi contenuti nei tag <p> è usato il vocabolario di Schema.org e che le informazioni sono ordinate secondo lo schema “PostalAddress” (indirizzo postale). Basandosi su Schema.org, ogni schema può essere dotato di proprietà specifiche, ad esempio è tipico che gli indirizzi postali contengano delle informazioni precise. Se devono essere messe in evidenza per essere scansionate dai motori di ricerca, si utilizza l’attributo RDFa “property”. In questo esempio le informazioni “name”, “postOfficeBoxNumber”, “addressLocality”, “adressRegion”, “postalCode” e “adressCountry” sono contrassegnate con i valori corrispondenti come proprietà di “PostalAddress”. Così anche un programma che legge il codice HTML comprende cosa significhino informazioni quali “Google Inc.” e “94043”.

Mettere in evidenza i contenuti delle pagine con RDFa per generare rich snippet

I dati strutturati sono utili soprattutto per le ricerche sul web. Se un sito utilizza il linguaggio semantico, i motori di ricerca riescono ad estrapolare le informazioni più importanti e ad utilizzarle per generare rich snippet, degli estratti dei contenuti di una pagina che ampliano i risultati di ricerca facendoli risaltare maggiormente nelle SERPs. In questo senso un’annotazione semantica contribuisce all’ottimizzazione di un sito per i motori di ricerca. Google supporta il markup in RDFa per generare rich snippet per i tipi di dati come prodotti, ricette, recensioni, software e articoli stampa. I rich snippet per i video sono supportati solo per i formati più recenti, quali microdati e JSON-LD. Se devono essere generati rich snippet per degli eventi, bisogna utilizzare un linguaggio di markup con JSON-LD. Vi presentiamo qui come strutturare i contenuti di una pagina per la creazione di rich snippet, prendendo come esempio l’annotazione semantica di una recensione di un prodotto.

Mettere in evidenza una recensione di un prodotto con RDFa

In genere le valutazioni dei prodotti che compaiono nei rich snippet delle SERPs presentano il nome del prodotto, l’immagine, una valutazione con stelle e una recensione con il nome dell’autore, il titolo e la data di pubblicazione. Il codice seguente mostra come mettere in evidenza queste informazioni tramite il formato RDFa, in modo che vengano scansionate facilmente dai motori di ricerca:

Markup in RDFa di una valutazione di un prodotto:
<div vocab="http://schema.org/" typeof="Product">
  <img property="image" src="www.servizio.it/immagine.jpg" alt="Descrizioneimmagine"/>
  <span property="name">Nome del prodotto</span>
  <div property="review" typeof="Review"> Review:
    <span property="reviewRating" typeof="Rating">
      <span property="ratingValue">5</span> -
    </span>
    <b>"<span property="name">Titolo della valutazione</span>"</b> von
    <span property="author" typeof="Person">
      <span property="name">Nome dell’autore</span>
    </span>, pubblicato il
    <meta property="datePublished" content="2006-05-04">4 maggio 2006
    <div property="reviewBody">Testo della valutazione</div>
    <span property="publisher" typeof="Organization">
      <meta property="name" content="Nome dell‘editore">
    </span>
  </div>
</div>

Nella riga 01 viene indicato come markup il vocabolario di Schema.org. L’attributo typeof definisce le informazioni dalle righe 01 a 17 come appartenenti allo schema standard “Product”. I prodotti, basandosi su Schema.org, possono avere una serie di proprietà (properties): in questo esempio al prodotto vengono assegnati e messi in evidenza semanticamente un nome (property="name"), un’immagine (property=“image“) e una recensione (property="review"). La sintassi di RDFa prevede che anche le proprietà possano essere descritte come schemi, dotati a loro volta di proprietà. In altre parole la proprietà “review” nella riga 04 può essere definita e meglio specificata come schema “review”.

Estratto:
<div property="review" typeof="Review"> Review:

Molte recensioni hanno delle valutazioni con stelle. Per renderle leggibili dai motori di ricerca, allo schema “Review” viene assegnata la proprietà “reviewRating”, che si può descrivere in qualità di schema “Rating” con la proprietà “ratingValue” e indicando un valore concreto (righe 05-06).

Estratto:
  <div property="review" typeof="Review"> Review:
    <span property="reviewRating" typeof="Rating">
      <span property="ratingValue">5</span> -

Altre proprietà dello schema "review” sono il titolo (property="name"), l’autore (property="author"), la data di pubblicazione (property="datePublished"), il testo della valutazione (property="reviewBody") e altre informazioni sull’editore (property="publisher"). L’autore e l’editore possono essere definiti con uno schema specifico (persona o organizzazione) tramite l’attributo typeof e dotate di proprietà (come “name”). È da tenere presente che in ogni attributo typeof subordinato può essere annidato tra tag HTML un attributo typeof sovraordinato.

Questi esempi mostrano quanto sia complesso il markup con RDFa, che seppure consenta un’annotazione semantica molto dettagliata, risulta più difficile da applicare rispetto a formati più moderni, come quello JSON-LD.


Prepara il tuo business per il successo online
Abbiamo ridotto ulteriormente i prezzi dei nostri strumenti pensati
per incrementare le tue vendite di fine anno.
Risparmia fino al 75%