Condividi:

Guida introduttiva a schema.org utilizzando Microdata  

  

0

La maggior parte dei webmaster ha familiarità con i tag HTML utili ad indicare al browser come visualizzare le informazioni incluse negli stessi.

Ad esempio:

Ad esempio, <h1> Avatar </h1> indica al browser di visualizzare la stringa di testo "Avatar" in un formato di intestazione 1.

Tuttavia, il tag HTML non fornisce alcuna informazione su cosa significhi quella stringa di testo: "Avatar" potrebbe riferirsi al film in 3D di enorme successo o potrebbe riferirsi a un tipo di immagine del profilo e questo può rendere più difficile la ricerca ai motori per visualizzare in modo intelligente i contenuti pertinenti a un utente.

Schema.org fornisce una raccolta di vocabolari condivisi che i webmaster possono utilizzare per contrassegnare le loro pagine in modi che possono essere compresi dai principali motori di ricerca: Google, Microsoft, Yandex e Yahoo!

Utilizzi il vocabolario schema.org insieme ai formati Microdata, RDFa o JSON-LD per aggiungere informazioni ai tuoi contenuti web.

Questa guida ti aiuterà a farti conoscere Microdata e schema.org in modo da poter iniziare ad aggiungere markup alle tue pagine web. Sebbene questa guida si concentri sui microdati,  troverai alcuni esempi anche in RDFa e JSON-LD. 

  1. Come eseguire il markup dei tuoi contenuti utilizzando i microdati
    a) Perché utilizzare i microdati?
    b) itemscope e itemtype
    c) itemprop
    d) Oggetti incorporati
  2. Utilizzo del vocabolario di schema.org
    a) tipi e proprietà di schema.org
    b) Tipi, testo e URL previsti
    c) Testare il tuo markup
  3. Argomento avanzato: versioni delle informazioni comprensibili dalla macchina
    a) Date, orari e durate
    b) Enumerazioni e riferimenti canonici
    c) Informazioni mancanti / implicite
    d) Estensione di schema.org

 

 

1. Come contrassegnare i tuoi contenuti utilizzando micro

 

1a. Perché utilizzare i microdati?
Le tue pagine web hanno un significato sottostante che le persone capiscono quando leggono le pagine web. Ma i motori di ricerca hanno una comprensione limitata di ciò che viene discusso in quelle pagine. Aggiungendo tag aggiuntivi all'HTML delle tue pagine web, tag che dicono "Ehi motore di ricerca, queste informazioni descrivono questo film, luogo, persona o video specifico", puoi aiutare i motori di ricerca e altre applicazioni a comprendere meglio i tuoi contenuti e visualizzarlo in modo utile e pertinente. I microdati sono un insieme di tag, introdotto con HTML5, che ti consente di farlo.

 

1b. itemscope e itemtype
Cominciamo con un esempio concreto. Immagina di avere una pagina sul film Avatar, una pagina con un collegamento al trailer di un film, informazioni sul regista e così via. Il tuo codice HTML potrebbe essere simile a questo:

 
<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Per iniziare, identifica la sezione della pagina che parla del film Avatar. Per fare ciò, aggiungi l'elemento itemscope al tag HTML che racchiude le informazioni sull'elemento, in questo modo:

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Aggiungendo itemscope, stai specificando che l'HTML contenuto nel blocco

<div> ... </div>

riguarda un particolare elemento.

Ma non è poi così utile specificare che c'è un argomento in discussione senza specificare che tipo di elemento è. È possibile specificare il tipo di articolo utilizzando l'attributo itemtype immediatamente dopo itemscope.

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Ciò specifica che l'elemento contenuto nel div è in realtà un film, come definito nella gerarchia dei tipi di schema.org. I tipi di elementi vengono forniti come URL, in questo caso http://schema.org/Movie.

1c. itemprop
Quali informazioni aggiuntive possiamo fornire ai motori di ricerca sul film Avatar? I film hanno proprietà interessanti come attori, regista, valutazioni. Per etichettare le proprietà di un articolo, utilizza l'attributo itemprop. Ad esempio, per identificare il regista di un film, aggiungi itemprop = "regista" all'elemento che racchiude il nome del regista. (C'è un elenco completo di tutte le proprietà che puoi associare a un film su http://schema.org/Movie )

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Nota che abbiamo aggiunto ulteriori tag ... per allegare gli attributi itemprop al testo appropriato sulla pagina. I tag non cambiano il modo in cui le pagine vengono visualizzate da un browser web, quindi sono un comodo elemento HTML da usare con itemprop.

I motori di ricerca ora possono capire non solo che http://www.avatarmovie.com è un URL, ma anche che è l'URL del trailer del film di fantascienza Avatar, diretto da James Cameron.

 

1d. Oggetti incorporati
A volte il valore di una proprietà di un elemento può essere esso stesso un altro elemento con il proprio insieme di proprietà. Ad esempio, possiamo specificare che il regista del film è un elemento di tipo Person e che Person ha le proprietà name e birthDate. Per specificare che il valore di una proprietà è un altro elemento, inizia un nuovo ambito di elementi immediatamente dopo l'itemprop corrispondente.

 
<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

2. Utilizzo del vocabolario schema.org

2a. tipi e proprietà di schema.org
Non tutte le pagine web riguardano film e persone: oltre ai tipi di film e di persone descritti nella sezione 1, schema.org descrive una varietà di altri tipi di elementi, ognuno dei quali ha il proprio insieme di proprietà che possono essere utilizzate per descrivere il articolo.

Il tipo di elemento più ampio è Thing, che ha quattro proprietà: nome, descrizione, URL e immagine. Tipi più specifici condividono proprietà con tipi più ampi. Ad esempio, un luogo è un tipo più specifico di cosa e un'attività locale è un tipo più specifico di luogo. Gli elementi più specifici ereditano le proprietà del loro genitore. (In realtà, un LocalBusiness è un tipo più specifico di Luogo e un tipo più specifico di Organizzazione, quindi eredita le proprietà da entrambi i tipi padre.)

Ecco una serie di tipi di articoli di uso comune:

  • Lavori creativi: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries ...
  • Oggetti non di testo incorporati: AudioObject, ImageObject, VideoObject
  • Evento
  • Organizzazione
  • Persona
  • Luogo, Locale, Affari, Ristorante ...
  • Prodotto, offerta, offerta aggregata
  • Review, AggregateRating

Puoi anche vedere un elenco completo di tutti i tipi di elementi, elencati in una singola pagina.

 

2b. Tipi, testo e URL previsti
Ecco alcune note da tenere a mente quando aggiungi il markup schema.org alle tue pagine web.

Di più è meglio, ad eccezione del testo nascosto. In generale, più contenuti esegui il markup, meglio è. Tuttavia, come regola generale, dovresti contrassegnare solo il contenuto visibile alle persone che visitano la pagina web e non il contenuto in div nascosti o altri elementi della pagina nascosti.
Tipi previsti vs testo. Quando esplori i tipi di schema.org, noterai che molte proprietà hanno "tipi previsti". Ciò significa che il valore della proprietà può essere esso stesso un elemento incorporato (vedere la sezione 1d: elementi incorporati). Ma questo non è un requisito: va bene includere solo testo normale o un URL. Inoltre, ogni volta che viene specificato un tipo previsto, va bene anche incorporare un elemento che è un tipo figlio del tipo previsto. Ad esempio, se il tipo previsto è Luogo, va bene anche incorporare un LocalBusiness.
Utilizzando la proprietà url. Alcune pagine web riguardano un elemento specifico. Ad esempio, potresti avere una pagina web su una singola persona, che potresti contrassegnare utilizzando il tipo di elemento Persona. Altre pagine contengono una raccolta di elementi descritti in esse. Ad esempio, il sito della tua azienda potrebbe avere una pagina che elenca i dipendenti, con un collegamento a una pagina del profilo per ogni persona. Per pagine come questa con una raccolta di elementi, dovresti contrassegnare ogni elemento separatamente (in questo caso come una serie di persone) e aggiungere la proprietà url al collegamento alla pagina corrispondente per ogni elemento, in questo modo:

<div itemscope itemtype="http://schema.org/Person">
  <a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
  <a href="bob.html" itemprop="url">Bob Smith</a>
</div>

2c. Testare il tuo markup
Proprio come un browser web è importante per testare le modifiche al layout della tua pagina web e un compilatore di codice è importante per testare il codice che scrivi, dovresti anche testare il tuo markup schema.org per assicurarti che sia implementato correttamente. Google fornisce uno strumento di test per i rich snippet, che puoi utilizzare per testare il markup e identificare eventuali errori.

 

 

3. Argomento avanzato: versioni delle informazioni comprensibili dalla macchina
Molte pagine possono essere descritte utilizzando solo gli attributi itemscope, itemtype e itemprop (descritti nella sezione 1) insieme ai tipi e alle proprietà definiti su schema.org (descritti nella sezione 2).

Tuttavia, a volte la proprietà di un elemento è difficile da comprendere per una macchina senza ulteriore disambiguazione. Questa sezione descrive come fornire versioni delle informazioni comprensibili dalla macchina durante il markup delle pagine.

  • Date, orari e durate: utilizza il tag dell'ora con datetime
  • Enumerazioni e riferimenti canonici: usa il tag link con href
  • Informazioni mancanti / implicite: usa il meta tag con il contenuto.

 

3a. Date, orari e durate: utilizza il tag dell'ora con datetime
Le date e gli orari possono essere difficili da capire per le macchine. Considera la data "04/01/11". Significa l'11 gennaio 2004? 4 gennaio 2011? O il 1 aprile 2011? Per rendere le date univoche, utilizza il tag time insieme all'attributo datetime. Il valore dell'attributo datetime è la data specificata utilizzando il formato AAAA-MM-GG. Il codice HTML riportato di seguito specifica la data in modo univoco come 1 aprile 2011.

<time datetime="2011-04-01">04/01/11</time>

È inoltre possibile specificare un'ora all'interno di un giorno, utilizzando il formato hh: mm o hh: mm: ss. Gli orari sono preceduti dalla lettera T e possono essere forniti insieme a una data, in questo modo:

<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

Vediamolo nel contesto. Di seguito è riportato un codice HTML che descrive un concerto che si terrà l'8 maggio 2011. Il markup dell'evento include il nome dell'evento, una descrizione e la data dell'evento.

<div itemscope itemtype="http://schema.org/Event">
  <div itemprop="name">Spinal Tap</div>
  <span itemprop="description">One of the loudest bands ever
  reunites for an unforgettable two-day show.</span>
  Event date:
  <time itemprop="startDate" datetime="2011-05-08T19:30">May 8, 7:30pm</time>
</div>

Le durate possono essere specificate in modo analogo utilizzando il tag time con l'attributo datetime. Le durate sono precedute dalla lettera P (sta per "periodo"). Ecco come specificare un tempo di cottura della ricetta di 1 ora e mezza:

<time itemprop="cookTime" datetime="PT1H30M">1 1/2 hrs</time>

H è usato per designare il numero di ore e M è usato per designare il numero di minuti.

Gli standard di data, ora e durata sono specificati dallo standard di data/ora ISO 8601.

 

3b. Enumerazioni e riferimenti canonici: usa link con href
Enumerazioni
Alcune proprietà possono accettare solo un insieme limitato di valori possibili. I programmatori spesso chiamano queste "enumerazioni". Ad esempio, un negozio online con un articolo in vendita potrebbe utilizzare il tipo di articolo Offerta per specificare i dettagli dell'offerta. La proprietà disponibilità può in genere avere solo uno dei pochi valori possibili: Disponibile, Non disponibile, Preordina e così via. Proprio come i tipi di elementi vengono specificati come URL, anche i possibili valori per un'enumerazione su schema.org possono essere specificati come URL.

Ecco un articolo in vendita, contrassegnato con il tipo di offerta e le proprietà pertinenti:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <span itemprop="availability">Available today!</span>
</div

Ed ecco lo stesso elemento, ma utilizzando link e href per specificare in modo univoco la disponibilità come uno dei valori consentiti:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <link itemprop="availability" href="http://schema.org/InStock"/>Available today!
</div>

Schema.org fornisce enumerazioni per una manciata di proprietà: in genere, ovunque ci sia un numero limitato di valori tipici per una proprietà, c'è un'enumerazione corrispondente specificata in schema.org. In questo caso, i valori possibili per la disponibilità sono specificati in ItemAvailability.

 

Riferimenti canonici
In genere, i collegamenti vengono specificati utilizzando l'elemento . Ad esempio, i seguenti collegamenti HTML alla pagina di Wikipedia per il libro Catcher in the Rye.

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  by <span itemprop="author">J.D. Salinger</span>
  Here is the book's <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia page</a>.
</div>

Come puoi vedere, itemprop = "url" può essere utilizzato per specificare un collegamento a una pagina su un altro sito (in questo caso Wikipedia) che parla dello stesso elemento. I collegamenti a siti di terze parti possono aiutare i motori di ricerca a comprendere meglio l'elemento che stai descrivendo sulla tua pagina web.

Tuttavia, potresti non voler aggiungere un link visibile sulla tua pagina. In questo caso, puoi invece utilizzare un elemento link, come segue:

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  by <span itemprop="author">J.D. Salinger</span>
</div>

 

3c. Informazioni mancanti / implicite: usa il meta tag con il contenuto
A volte, una pagina Web contiene informazioni che sarebbe utile contrassegnare, ma le informazioni non possono essere contrassegnate a causa del modo in cui vengono visualizzate sulla pagina. Le informazioni possono essere trasmesse in un'immagine (ad esempio, un'immagine utilizzata per rappresentare una valutazione di 4 su 5) o un oggetto Flash (ad esempio, la durata di un video clip), oppure può essere implicita ma non dichiarata esplicitamente nella pagina (ad esempio, la valuta di un prezzo).

In questi casi, utilizza il metatag insieme all'attributo content per specificare le informazioni. Considera questo esempio: l'immagine mostra agli utenti una valutazione di 4 stelle su 5:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <img src="four-stars.jpg" />
  Based on 25 user ratings
</div>

Ecco di nuovo l'esempio con le informazioni sulla valutazione contrassegnate.

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
    <img src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
    <meta itemprop="bestRating" content="5" />
    Based on <span itemprop="ratingCount">25</span> user ratings
  </div>
</div>

Questa tecnica dovrebbe essere usata con parsimonia. Utilizza meta con contenuto solo per informazioni che non possono essere contrassegnate in altro modo.

 

3d. Estensione di schema.org
La maggior parte dei siti e delle organizzazioni non avrà motivo per estendere schema.org. Tuttavia, schema.org offre la possibilità di specificare proprietà o sottotipi aggiuntivi rispetto ai tipi esistenti. Se sei interessato a farlo, leggi di più sul meccanismo di estensione di schema.org.

Questa discussione è stata modificata 3 settimane fa da cositeweb
Parlaci della tua Idea