Introduzione al markup dei dati strutturati

Il termine Dati strutturati si riferisce a informazioni formattate in un modo universalmente comprensibile. I motori di ricerca come Google, Bing e Yahoo utilizzano i dati strutturati (implementati nelle pagine Web) per perfezionare i risultati di ricerca, filtrare con maggiore precisione e migliorare il modo in cui i risultati vengono visualizzati. Tutto ciò rende più facile per gli utenti trovare le informazioni che stanno cercando.

Perché abbiamo bisogno di dati strutturati?

I dati strutturati stanno diventando una parte sempre più importante dell'ecosistema web. - Google

Le pagine Web hanno un significato intrinseco che gli utenti comprendono quando le leggono. I motori di ricerca, d'altra parte, hanno una comprensione limitata del contenuto della pagina web. Ad esempio, supponiamo di avere una pagina Web su "giaguaro". Un motore di ricerca potrebbe eseguire la scansione della pagina, ma non necessariamente saprebbe cosa significhi la parola "giaguaro". 'Jaguar' potrebbe riferirsi all'animale, o potrebbe riferirsi al costruttore dell'auto.

Ciò rende difficile per i motori di ricerca mostrare risultati di ricerca pertinenti a un utente. Gli umani possono ricavare il significato di una parola dal contesto della pagina web, ma i motori di ricerca hanno difficoltà a farlo.

Con i dati strutturati puoi aiutare i motori di ricerca a comprendere i tuoi contenuti e a visualizzarli in modo utile e pertinente.

Come vengono utilizzati i dati strutturati?

I dati strutturati hanno un vantaggio importante: la visibilità. Le informazioni memorizzate all'interno di dati strutturati possono essere utilizzate dai motori di ricerca per generare rich snippet. I rich snippet forniscono all'utente informazioni dettagliate relative alle loro richieste specifiche.

Probabilmente hai trovato esempi di questi rich snippet; in caso contrario, dai un'occhiata alla SERP di Google per le lasagne. Sono sicuro che noti le immagini accanto ad alcuni risultati di ricerca. Queste immagini sono state aggiunte grazie ai microdati. Possono essere utilizzati per fornire ai motori di ricerca informazioni aggiuntive sulla pagina Web, in questo caso un'immagine, ma è anche possibile aggiungere una valutazione, tempo di cottura, quantità di calorie, ecc..

Questi rich snippet fanno sì che determinati risultati si distinguano dal resto, spesso determinando una percentuale di clic (CTR) più elevata. Alcuni siti web hanno segnalato un aumento del 30% del CTR dopo l'implementazione dei dati di markup strutturati. Sembra abbastanza buono, eh?

Tipi di markup dei dati strutturati

Esistono tre tipi di markup dei dati strutturati:

  • Microdata
  • microformati
  • RFDa

Prima di iniziare a esplorare questi tipi di markup, è necessario tenere a mente una cosa: non è possibile utilizzare più di un tipo di dati strutturati su una singola pagina Web, perché potenzialmente confonde i motori di ricerca. Pertanto, dobbiamo scegliere tra queste tre opzioni. Ma quale è più adatto per il nostro sito? Diamo un'occhiata a tutti loro individualmente.

Se vuoi sapere tutto (e intendo assolutamente tutto) sulle differenze tecniche tra RDFa, microdati e microformati, ti suggerisco di leggere An Uber-comparazione di RDFa, Microdata e Microformati di Manu Sporny, Presidente del gruppo in World Wide Consorzio Web che ha creato RDFa.

Microdata

I microdati sono probabilmente il tipo più popolare di dati strutturati, in gran parte grazie al sito Web Schema.org. Su questo sito, un'iniziativa dei tre più grandi motori di ricerca (Google, Bing e Yahoo), troverai una collezione condivisa di schemi (microdati) che puoi usare.

Il markup dei microdati è composto da 3 elementi: itemscope, tipo di elemento e itemprops. L'attributo itemscope racchiude informazioni sull'elemento. Aggiungendo itemscope al tuo HTML, stai specificando che il contenuto all'interno dell'elemento scelto riguarda un particolare oggetto.

Concerto Foo Fighters

Aggiungi l'elemento itemtype per identificare il tipo di contenuto. Usa questo attributo immediatamente dopo il itemscope.

Concerto Foo Fighters

In questo esempio, itemscope informa i motori di ricerca che l'elemento contenuto nel div è in realtà un evento. I tipi di oggetto vengono sempre aggiunti come URL. Puoi trovare un elenco completo di tutti gli articoli su Schema.org.

Ora che i motori di ricerca sanno che la nostra pagina riguarda un evento, possiamo fornirgli ulteriori informazioni su questo specifico evento. Per questo usiamo il itemprop attributo.

Se vogliamo identificare la posizione del concerto dei Foo Fighters, aggiungiamo semplicemente itemprop =”location” all'elemento che racchiude il nome della posizione (di nuovo, visitare schema.org per un elenco completo di tutte le proprietà che è possibile associare a un tipo di elemento).

Concerto Foo Fighters. Il concerto si terrà a Madison Square Garden.

A volte dovrai aggiungere ulteriori elementi per aggiungerlo in modo dettagliato. Noi usiamo tag perché, di default, non influenzano il modo in cui il testo inline viene presentato da un browser.

Date e orari

Date e orari possono essere difficili da interpretare. La data 08/10/12, ad esempio, significa l'8 ottobre 2012? O il 10 agosto 2012? O il 12 agosto 2008? Confuso, non è vero? I motori di ricerca hanno lo stesso problema.

Per fornire loro l'ora e la data corrette, dobbiamo aggiungere un attributo 'datetime'. Questo attributo specifica una data utilizzando il formato AAAA-MM-GG.

Il codice sopra riportato è per la data del 1 aprile 2011.

L'attributo datetime può anche essere utilizzato per specificare un orario. I tempi sono preceduti dalla lettera T e possono essere forniti insieme a una data.

Il codice sopra mostra la seguente data e ora: 8 maggio 2011, ore 19:30. Se aggiungiamo il markup di data e ora all'esempio precedente, potremmo ottenere qualcosa di simile a questo:

Concerto Foo Fighters. Il concerto si terrà a Madison Square Garden sopra .

Con questi semplici tag possiamo dire ai motori di ricerca che l'8 maggio 2011 alle 19.30 ci sarà un concerto dei Foo Fighters al Madison Square Garden. Possiamo utilizzare altri attributi per contrassegnare pagine Web su libri, filmati, organizzazioni, ricette, ecc.

Informazioni implicite

Le informazioni non sono sempre visibili agli utenti e ai motori di ricerca. Alcune informazioni possono essere incorporate in un oggetto multimediale o potrebbero non essere esplicitate in una pagina. In questo caso è possibile utilizzare i meta tag per specificare queste informazioni.

Diciamo che abbiamo un video sulla nostra pagina e vogliamo che la durata del video appaia come un rich snippet. Poiché la durata del video non è fornita come testo sulla nostra pagina, è necessario utilizzare un metatag per aggiungere queste informazioni. Per esempio:

Il codice sopra indica ai motori di ricerca che il video ha una durata di 2 minuti e 40 secondi (non dimenticare che utilizziamo il formato ISO8601 per date e orari). Questa informazione apparirà come un rich snippet nei risultati di ricerca.

microformati

I microformati estendono i tag HTML convenzionali con informazioni semantiche. Per aggiungere dati strutturati a una pagina Web con i microformati, utilizzerai principalmente l'attributo class. Ciò rende i microformati il ​​modo più semplice e pulito per aggiungere dati strutturati.

I tipi più popolari di microformati sono hCard, hCalendar e hReview. hCard è utilizzato per persone, aziende e organizzazioni. hCalendar può essere utilizzato per aggiungere informazioni sugli eventi. E con hReview puoi recensire ristoranti, libri, film, ecc.

Diciamo che abbiamo una pagina per una partita di calcio. Prima di tutto abbiamo bisogno di dire ai motori di ricerca che questa pagina web riguarda un evento facendo riferimento a hCalendar nel .

 

Quindi dobbiamo dire ai motori di ricerca quale parte della nostra pagina web riguarda l'evento. Per questo usiamo la classe vevent.

Tutto contenuto dal nostro

fornisce al motore di ricerca maggiori informazioni sull'evento (ma potresti anche usare altri tag come o

se necessario). Se vogliamo aggiungere il titolo del nostro evento, usiamo la proprietà summary. Il riepilogo è una proprietà richiesta per un evento!

Real Madrid - FC Barcelona

Usando la proprietà location possiamo specificare dove avrà luogo la partita.

Real Madrid - FC Barcelona a Camp Nou

Con questo codice diciamo ai motori di ricerca che la partita tra Real Madrid e FC Barcelona si svolgerà al Camp Nou. Un'altra proprietà richiesta per hCaldendar è dtstart. Descrive la data e l'ora dell'evento.

Real Madrid - FC Barcelona a Camp Nou sopra

Questi tag danno ai motori di ricerca maggiori informazioni sulla partita di calcio tra Real Madrid e FC Barcelona, ​​come la posizione e la data / ora.

Per ulteriori informazioni sui microformati, consulta la wiki dei microformati.

RFDa

RFDa utilizza un numero di proprietà per identificare le entità (come una persona o un evento). Usa tag HTML, come

e , per descrivere entità. Le funzionalità più avanzate di RFDa possono essere difficili per i webmaster che non sono esperti in dati strutturati.

RFDa ha quattro attributi di base: voctype, tipo di, proprietà e risorsa.

Il primo attributo, il voctype, definisce il vocabolario che useremo per i nostri dati strutturati. Grazie a questo attributo, i motori di ricerca sanno dove ottenere le informazioni su questi dati strutturati.

Ciao, mi chiamo John Doe!

Con il codice sopra specificato si specifica che il vocabolario per i nostri tag RFDa può essere trovato su schema.org (ad esempio). Ci sono molti altri vocabolari, come LOV e Dublin Core. Ora dobbiamo specificare il tipo di dati. Sono informazioni su una persona, un evento, un ristorante ...? Per questo usiamo l'attributo typeof.

Ciao, mi chiamo John Doe!

I motori di ricerca sanno che stiamo parlando di una persona, ma non ne sanno molto di lui. Aggiungendo proprietà possiamo dare loro più informazioni su questa persona.

Ciao, mi chiamo John Doe!

Il codice sopra ci dice che questa pagina web parla di una persona di nome John Doe. Possiamo aggiungere un ID univoco a questi dati strutturati per identificare questa persona aggiungendo l'attributo della risorsa.

Ciao, mi chiamo John Doe!

Questo ID univoco è utile se vogliamo parlare di John Doe su un altro sito web. Aggiungendo l'id alla fine dell'URL di questa pagina web (ad es. Http://example.com/employees#john), abbiamo un riferimento per tutte le informazioni su John Doe.

Per ulteriori informazioni sull'implementazione di RFDa, consultare la documentazione RDFa su w3.org.

Perché preferisco i microdati

Preferisco usare i microdati per implementare i dati strutturati. Non sto dicendo che i microdati siano l'opzione migliore (ci sono vantaggi e svantaggi per ogni tipo menzionato) ma per me i microdati offrono i maggiori vantaggi.

Rispetto ai microdati, RDFa ha una piccola curva di apprendimento quando si tratta di entità nidificate. E l'implementazione di RFDa in pagine non XHTML può essere problematica a causa di determinati attributi e valori.

Il rovescio della medaglia dei microformati è che, se vuoi riadattarlo a un sito web, probabilmente lo avrai
rinominare un sacco di classi CSS e

e tag.

Per me, i microdati sono il meglio di entrambi i mondi; è semplice e facile da implementare. Anche i microdati sono consigliati da Google, quindi per le persone che desiderano seguire le linee guida di Google, questo può essere un motivo per scegliere microdati su microformati e RFDa.

Test del tuo markup

Hai trascorso innumerevoli ore ad aggiungere dati strutturati al tuo sito web. Ma come fai a sapere se è implementato correttamente? È qui che lo strumento di test Rich Snippet di Google è utile. Su questo sito Web puoi prendere un URL o una porzione di codice HTML e testare il markup dei dati strutturati. Può darti un'idea di come apparirà la pagina nei risultati di ricerca.

Utensili

Concludiamo questo articolo con una raccolta di strumenti che potrebbero rivelarsi utili quando aggiungi dati strutturati al tuo sito web.

  • Schema.org Creator è un modo semplice per generare microdati. Scegli un tipo di contenuto (persona, evento, recensione ...), compila i campi richiesti e con il clic di un pulsante hai il codice HTML corretto.
  • Se hai un blog o un sito web Wordpress puoi usare questo comodo plugin per Wordpress. Lo Schema Creator Plugin, sviluppato da Raven, rende davvero facile aggiungere dati strutturati alle tue pagine web. Uno dei vantaggi di questo plugin è che utilizza gli shortcode. Quindi non devi aggiungere manualmente i microdati.
  • Microformat ha diversi creator per hCard, hCalendar e hReview. Utilizza questi strumenti per generare rapidamente microformati per il tuo sito web.
  • RDFa Play è probabilmente lo strumento migliore se vuoi implementare RFDa. Ti permette di modificare ed eseguire il debug del tuo codice. Inoltre, viene fornito con un visualizzatore di dati!

Conclusione

In futuro vedremo dati molto più strutturati. Consente ai motori di ricerca di interpretare i contenuti in modo più efficiente e generare rich snippet. Tutto ciò si traduce in una percentuale di clic comprensibilmente superiore per le pagine in cui sono implementati i dati strutturati.

Fateci sapere che ne pensate nei commenti; trarrai vantaggio dai dati strutturati in qualsiasi momento? Hai già esperienza nel farlo?