Guide
- Argomenti di html MUST:
- https://css-tricks.com/almanac/
- https://www.html.it/guide/guida-css-di-base/
Strumenti
- Editor: https://code.visualstudio.com/ oppure https://www.sublimetext.com/
- https://caniuse.com/
- Sass e Koala
Categoria: Markup
schema.org e microdata
Benchè l’html5 orbiti attorno al concetto di “semantica”, i nuovi tag inseriti non sono sufficienti ad affrontare le necessità di catalogazione e analisi dei risultati dei motori di ricerca.
Per questo possiamo arricchire i nostri tag con degli attributi ad-hoc, detti microdati, che consentono di specificare al meglio il contesto e il significato di alcuni particolari tipo di dati.
Le principali risorse a cui fare riferimento sono:
- la parte di guida dev di google sui dati strutturati, in cui vengono introdotti i microdata illustrati i modi attraverso i quali google li mostra, come i rich snippet:
- schema.org che è il sito di riferimento per la gestione dei dati strutturati su internet e contiene gli schemas ovvero, le strutture modellate ad oggi e i loro attributi.
Ok, ma che tipo di dati possiamo rappresentare?
Particolari contenuti come film, ricette, articoli, libri, oggetti audio (registrazioni), eventi, luoghi, persone, prodotti, offerte, valutazioni etc…
Lo standard è in continua evoluzione, così come il modo in cui i motori di ricerca vi interagiscono. Ad esempio, prendendo sempre come caso Google, non tutti i tipi di dato vengono rappresentati in maniera particolare nelle serp, tuttavia, utilizzare i mocrodata rappresenta una chance in più per far notare il nostro contenuto tra milioni di risultati.
Alcuni esempi:
A livello di codice, la scrittura dei microdati comporta
- l’inserimetno di itemscope e itemtype sulla radice, ovvero sul tag che conterrà l’elemento che stiamo modellando. Itemscope, identifica il tag a cui è applicato come contentirore, itemtype vuole come attributo un url al vocabolario su schema.org
<div itemscope itemtype="http://schema.org/Movie">
- l’inserimento dell’attributo itemprop che definisce la proprietà che si sta descrivendo, seguendo lo schema scelto tramite itemtype
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Pirates of the Carribean: On Stranger Tides (2011)</h1>
<span itemprop="description">Jack Sparrow and Barbossa embark on a quest to
find the elusive fountain of youth, only to discover that Blackbeard and
his daughter are after it too.</span>
Director:
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Rob Marshall</span>
</div>
Writers:
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Ted Elliott</span>
</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Terry Rossio</span>
</div>
, and 7 more credits
Stars:
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Johnny Depp</span>,
</div>
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Penelope Cruz</span>,
</div>
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Ian McShane</span>
</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">8</span>/<span itemprop="bestRating">10</span> stars from
<span itemprop="ratingCount">200</span> users.
Reviews: <span itemprop="reviewCount">50</span>.
</div>
</div>See the Pen schema movie by Mariachiara Pezzotti (@merissimissima) on CodePen.
Vedete come all’interno dello stesso itemscope possono esserne annidati altri, se necessari per rappresentare determinate caratteristiche dell’oggetto che stiamo modellando: nel caso del film, il registra, in quanto persona fa riferimento allo schema all’itemtype “person“, mentre la valutazione del film a “aggregatingRating“.
Per verificare se i microdata sono stati scritti nella maniera corretta potete utilizzare lo strumento di testing dei dati strutturati messo a disposizione da google.