Skip to content

Instantly share code, notes, and snippets.

@dreamorosi
Last active August 25, 2017 05:33
Show Gist options
  • Save dreamorosi/fee37cb048114c01348edf11eeac7184 to your computer and use it in GitHub Desktop.
Save dreamorosi/fee37cb048114c01348edf11eeac7184 to your computer and use it in GitHub Desktop.
Microdata state of the art

Microdata

Intro

Schema.org (anche conosciuto come Schema) è un vocabolario di microdati composto da tag che possono essere inclusi nel markup HTML di una pagina per migliorarne il posizionamento nella SERP.

Schema.org nasce da uno sforzo congiunto di Google, Microsoft, Yandex e Yahoo! mirato a creare uno standard comune che permettesse ai motori di ricerca di comprendere il contenuto delle pagine web in modo da migliorare la qualità dei risultati mostrati ai propri utenti. Come già accennato, Schema.org è solo uno dei tanti vocabolari di dati strutturati che a loro volta possono essere espressi tramite la notazione microdata. I microdati vengono inseriti nell'HTML al fine di arricchire la pagina di metadati che permetteranno ai motori di ricerca di mostrare delle schede informative direttamente direttamente nei risultati della ricerca. La presenza dei microdati in se per se pare non incidere in modo diretto sul posizionamento del sito all'interno dei risultati tuttavia la presenza di informazioni aggiuntive nel risultato stesso risulta in un sensibile aumento di click che a sua volta migliora il posizionamento della pagina.

Ricapitolando Schema.org mette a disposizione un particolare set (vocabolario) di dati strutturati sotto forma di coppie chiave=valore che aiutano i motori di ricerca a categorizzare ed inidicizzare il contenuto delle pagine web, Microdata invece è solo una delle varie notazioni che permettono di inserire metadata all'interno di HTML5. Quindi possiamo affermare che utilizzando la notazione Microdata secondo le direttive descritte e supportate dai motori di ricerca presenti nel vocabolario in Schema è possibile migliorare la propria SERP.

Utilizzo

Esempio di microdati all'interno di html ripreso da imdb.com

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Straight Outta Compton</h1>
  <div>
    <meta itemprop="contentRating" content="R">
    R
    <span class="divider">|</span>
    <time itemprop="duration" datetime="PT147M">2h 27min</time>
    <span class="divider">|</span>
    <span itemprop="genre">Drama</span>
    <span class="divider">|</span>
    <meta itemprop="datePublished" content="2015-08-14">  
    14 August 2015 (USA)
  </div>
</div>

Come è possibile notare dall'esempio sopra la descrizione di un'entità all'interno di una pagina richiede l'aggiunta di diversi tipi di attributo ai normali tag HTML. I tipi di attributi comunemente utilizzati sono:

  • itemscope: attributo che delimita l'entità descritta, viene in genere utilizzato sul tag più esterno e non ha valore.
  • itemptype: attributo che definisce il tipo di entità che si sta descrivendo. Il valore dell'attributo è un url alla specifica dello schema e oltre a indicare il tipo definisce anche quali siano gli itemprop accettabili all'interno dello scope.
  • itemprop: attributo che identifica le proprietà aggiuntive di un'entità. Il valore dell'attributo indica il tipo di proprietà, mentre il valore della proprietà stessa è il testo racchiuso nel tag.

In alcuni casi può essere necessario dover esprimere dei valori che sono impliciti o mancanti ma che sono comunque utili al fine dell'identificazione dell'oggetto. Per inserire valori non visibili all'utente si può utilizzare il tag <meta> in congiunzione con l'attributo content, questa pratica va utilizzata solo quando strettamente necessario, tant'è che sarebbe opportuno tenere a mente come regola generale di marcare soltanto ciò che è visibile all'utente

Esempio di contenuto implicito/mancante ma comunque fondamentale

<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>

In altri casi invece il valore di una proprietà può a sua volta essere un'entità. In questo caso, dopo l'attributo itemprop, si crea un nuovo itemscope e si linka lo schema nell'itemptype.

Esempio di entità all'interno di un'altra entità

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Straight Outta Compton</h1>
  <p itemprop="director" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">F. Gary Gray</span>
  </p>  
</div>

Nell'esempio sopra possiamo notare come il valore della proprietà director del tipo Movie possa essere specificato ulteriormente mediante il valore della proprietà name propria del tipo Person. In questo caso è stato possibile includere il tipo Person all'interno di Movie soltanto perché la proprietà director può facoltativamente essere espressa tramite il tipo Person, prima di utilizzare un tipo all'interno di un itemscope è sempre bene quindi consultare la documentazione e verificare che il tipo sia ammesso. I tipi presenti nello schema sono tutti figli del tipo Thing e possono essere divisi nelle seguenti macrocategorie:

  • Creative work
  • Event
  • Organization
  • Person
  • Place
  • Product

Su Schema.org è disponibile una lista completa di tutti i tipi disponibili.

Schema mette a disposizione diversi tipi di entità, ognuno con un proprio schema che ne descrive l'utilizzo e gli attributi ammessi che possono essere propri o ereditati. I tipi seguono una struttura gerarchica che va dal tipo più ampio a quello più specifico e che prevede che ogni tipo, oltre a definire una o più proprietà specifiche, erediti tutte le proprietà dei tipi soprastanti nella gerarchia. Questo concetto, se utilizzato correttamente e rispettando lo scope dell'entità, è di fondamentale importanza poiché permette di descrivere svariati tipi di informazione con un buon grado di precisione il cui limiti sono solo la specificità e l'eterogeneità del vocabolario utilizzato.

Case study: Settore Immobiliare

Nonostante Schema.org metta a disposizione diverse dozzine di tipi diversi che vanno da Book a Volcano passando per LikeAction, ad oggi non esiste nessun tipo specificatamente pensato per il markup di inserzioni di compravendita di immobili online. Facendo una ricerca sul tema emergono grossomodo due linee di pensiero circa i tipi da utilizzare all'interno di siti immobiliari e il discriminante sta nell'accezione semantica che si da all'entità Immobile nel contesto del sito web stesso. Da una parte si può decidere di porre l'accento sull'aspetto di compravendita dell'immobile e quindi utilizzare il tipo Offer o Product che portano con se tutta una serie di attributi propri delle transazioni mentre dall'altra si decide di trattare l'entità Immobile come un'inserzione riguardante un immobile vero e proprio e quindi utilizzare uno dei tipi specifici di Place a seconda della tipologia di immobile descritto.

Personalmente considero la seconda ipotesi più corretta, sopratutto in luce del fatto che i siti immobiliari non sono ecommerce ma piuttosto directory di immobili con caratteristiche annesse. Stando ad un thread all'interno della repo ufficiale di Schema.org che va avanti dal Gennaio 2015 (ultimo post risalente al 4 Luglio scorso) e al quale hanno preso parte decine di collaboratori e non, questa sembra essere anche la strada scelta dal progetto Schema.org che, dopo aver preso atto che non esiste ancora uno standard condiviso per l'utilizzo nel settore immobiliare, sta definendo nuovi tipi che verranno inseriti sotto la tipologia Place e che terranno presente delle esigenze correnti dei siti immobiliari in termini di metadati.

Allo stato attuale quindi, il tipo più indicato e adatto a qualsiasi tipo di immobile (e destinazione d'uso) è Accommodation la cui documentazione recita:

An accommodation is a place that can accommodate human beings, e.g. a hotel room, a camping pitch, or a meeting room.

Accommodation è un discendente di Thing > Place e definisce alcune proprietà utili come amenityFeature, floorSize e numberOfRooms. Essendo discendente diretto di Place sono presenti anche additionalProperty che permette di incorporare il tipo PropertyValue, address che ammette il tipo PostalAddress, geo che può essere espresso come tipo GeoCoordinates, hasMap e photo. È in oltre possibile esprimere anche la possibile compravendita dell'immobile utilizzando la proprietà potentialAction in congiunzione con i tipi SellAction e RentAction. Nei casi in cui sia appropriato e ci siano informazioni sufficienti che lo permettano è inoltre possibile utilizzare al posto del tipo Accommodation un tipo più specifico a scelta tra House e Apartment le cui rispettive descrizioni specificano:

A house is a building or structure that has the ability to be occupied for habitation by humans or other creatures

e

An apartment (in American English) or flat (in British English) is a self-contained housing unit (a type of residential real estate) that occupies only part of a building

Nessuna delle due porta alcuna proprietà utile o più specifica quindi è necessario valutare in primo luogo se vale la pena di introdurre la differenziazione o meno.

<div class="property-item" itemscope itemtype="https://schema.org/Accommodation">
  <h3 itemprop="name">Appartamento in centro storico</h3>
  <span itemprop="photo" itemscope itemtype="http://schema.org/ImageObject">
    <img src="appartamento.jpg" itemprop="contentUrl" />
  </span>
  <div>
    <span itemprop="floorSize" itemscope itemtype="http://schema.org/QuantitativeValue">
      Area
      <span itemprop="value">25</span>
      mq
      <meta itemprop="unitCode">MTK</meta>
    </span>
    Vani
    <span itemprop="numberOfRooms">4</span>
    Bagni
    <span itemprop="amenityFeature" itemscope itemtype="http://schema.org/LocationFeatureSpecification">
      <span itemprop="name">Bagni</span>
      <span itemprop="value">2</span>
    </span>
  </div>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Viale della Repubblica, 28</span>
    -
    <span itemprop="addressLocality">Sarzana</span>
  </div>
  <p itemprop="description">Lorem ipsum dolor sit amen, por eccidio hubris apolocia</p>
  <span itemprop="potentialAction" itemscope itemtype="https://schema.org/RentAction">
    <span itemprop="price">1200</span><meta itemprop="priceCurrency">EUR</meta>
  </span>
</div>

Esiste inoltre un tipo RealEstateAgent che potrebbe essere utilizzato sia in una pagina About dedicata all'agenzia ma anche nelle varie istanze dell'agenzia in tutto il sito come ad esempio il form di prenotazione visita immobile o la pagina Contatti, questo potrebbe aumentare la visibilità dell'agenzia stessa.

Sitografia

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment