Per semantica si intende una specifica del linguaggio che permette la comprensione del significato preciso delle parole. Il web semantico è un particolare modo di "scrivere" le pagine web che permette ai crawler dei motori di ricerca di comprendere meglio le informazioni in esse contenute. I dati strutturati sono lo strumento utile a raggiungere lo scopo. ## Cosa sono i dati strutturati Tutto ha inizio quasi 10 anni fa, nel 2011, quando i principali motori di ricerca Google, Bing e Yahoo! uniscono le forze per dare vita a schema.org, un progetto che ha come missione la creazione, il mantenimento e la promozione di schemi per dati strutturati su Internet, sulle pagine web, nei messaggi di posta elettronica, ecc. HTML5 permette l'espansione del suo core set con l'aggiunta di vocaboli personalizzati, tramite appunto i microdati, che forniscono al motore di ricerca informazioni aggiuntive sulla risorsa. I dati strutturati, nel senso più generale del termine, organizzano le informazioni di una pagina web con lo scopo di farle riconoscere al motore di ricerca. Google potrà usare queste informazioni per arricchire i suoi risultati di ricerca generando così, il così detto, rich snippet). Sia chiaro, Google può estrarre le informazioni in autonomia, ma l'uso dei dati strutturati ci permette di aiutare Google a comprendere meglio il contenuto. Questo ci porterà ad ottenere un risultato di ricerca più ricco. I rich snippet non sono un fattore di ranking, ma, se usati bene, permettono un aumento del CTR (rapporto tra impressioni e clic del risultato di ricerca, dove le impressioni sono le volte in cui la tua pagina web compare sui motori di ricerca e il clic, beh... è il clic) il quale ricordo essere un fattore di ranking. Ma prima di iniziare a buttare dati strutturati a caso nelle pagine web è necessario comprenderli e dove potrà mai essere il punto di partenza? Rullo di tamburi al contrario.... è ovvio, dalla documentazione! ## La documentazione ufficiale Chi mi conosce sa quanto per me sia importante leggere la documentazione, soprattutto se sono scritte bene. Per quanto riguarda i dati strutturati ci sono un paio di fonti da consultare, il sito ufficiale [schema.org](https://schema.org/) e [developers.google.com](https://developers.google.com/) nella sezione "Ricerca". ### schema.org Di per sé non è un granché, è abbastanza scarna, ma comunque utile per capire la quantità impressionante di informazioni che possiamo fornire per arricchire di significato le nostre pagine web. La reference è sufficientemente completa riguardo al tipo di dato che ogni proprietà richiede per essere impostata correttamente. ![Proprietà dello schema Event](https://storage.googleapis.com/iccm-bucket-prod/event_properties_537b3b577b/event_properties_537b3b577b.webp) Le proprietà dello schema Event Dall'immagine riporto le prime tre proprietà di Event. Possiamo vedere che about, actor e aggregateRating si aspettano un particolare tipo di dato, il quale fa riferimento ad un altro schema, rispettivamente Thing (cose/oggetti), Person (persone), AggregateRating (valutazioni/recensioni). Gli schemi a loro volta hanno delle specifiche, come visibile qui di seguito: ![proprietà dello schema Thing](https://storage.googleapis.com/iccm-bucket-prod/thing_properties_30c50bbf5d/thing_properties_30c50bbf5d.webp) Le proprietà dello schema Thing Questa è la vera utilità di schema.org. Ci sono altre informazioni come ad esempio implementare gli schemi tramite microdati in HTML, ma per avere una panoramica più completa e dettagliata sulle modalità di implementazione la risorsa di riferimento rimane Google, il quale mostra l'implementazione in JSON-LD (quella consigliata) e le principali categorie di schema accettate. ### developers.google.com La documentazione di Google nella [sezione specifica per la ricerca](https://developers.google.com/search?hl=it) mette a disposizione una miriade di guide, approfondimenti e casi di studio che fanno sembrare la SEO un gioco da ragazzi. Per trovare le informazioni relative ai dati strutturati bisognerà andare nella sezione Guide e andare nella sezione "Attiva i risultati multimediali con i dati strutturati" nella colonna di sinsitra. Il consiglio rimane di leggersi tutto, ma a grandi linee: [scoprire come funzionano i dati strutturati](https://developers.google.com/search/docs/guides/intro-structured-data?hl=it), [linee guida generali](https://developers.google.com/search/docs/guides/sd-policies?hl=it) e [la galleria](https://developers.google.com/search/docs/guides/search-gallery?hl=it) offrono già una tonnellata di informazioni in più da unire a quelle trovate su schema.org Sì ok tutto molto bello, ma esattamente come li usa Google? ## A cosa servono e come li usa Google Ormai è chiaro che i dati strutturati servono ad arricchire le pagine web di informazioni utili al crawler per poter arricchire a sua volta i risultati di ricerca creando i rich snippet, ma come esattamente? Sempre più ricerche vedono la comparsa dei rich snippet, questi risultati di ricerca con più informazioni rispetto al classico URL, Titolo e Descrizione. Si presentano sotto forma di date di pubblicazione, valutazione in stelline, chilocalorie e il tempo di cottura di un piatto o addirittura intere ricette da seguire passo passo. Prima però facciamo un passo indietro e cerchiamo di capire meglio il quadro generale e cosa sta facendo Big G. Google è nato nel 1997 come motore di ricerca, rivoluzionando completamente ciò che già c'era. Tramite la qualità dei suoi risultati è riuscito a costruire un enorme fiducia nei confronti dei suoi utenti, quasi da rendere superflui tutti i risultati dalla seconda pagina in poi. Di fatto troviamo ciò che cerchiamo nelle prime dieci posizioni, soprattutto nelle prime tre. In base ai dati raccolti, i siti web si devono evolvere per soddisfare le esigenze dei propri utenti. Google, prima di tutto, è un sito web ed è quindi soggetto alle stesse regole. Da tempo Google ha iniziato una transizione da motore di ricerca a motore di risposta, perché è quello che cerchiamo, risposte. Per perseguire questo obiettivo sono state e verranno introdotte pesanti rivoluzioni come le pagine a 0 risultati, dove l'unica risposta sarà quella fornita da Google (es. che ore sono a Sydney). Oppure, i risultati zero che estraggono informazioni dalle pagine web e le usano per poter generare risposte immediate che l'utente poi potrà scegliere di approfondire oppure ritenersi soddisfatto e continuare a cercare o andarsene, senza visitare il sito web. Ammettiamolo, la qualità del web è peggiorata tantissimo. Siti lenti, user experience pessima, banner di ogni tipo da chiudere, richieste di notifiche da disabilitare, banner pubblicitario da nascondere e video da silenziare sono solo alcuni delle problematiche e Google vuole fare qualcosa. Tra le varie soluzioni c'è anche quella di non far arrivare l'utente sul sito perché intercettato in precedenza dalla risposta del motore di ricerca. In tutto questo però non stiamo tenendo in considerazione una cosa, la ricerca vocale. Quella ricerca dove non abbiamo nessuna interfaccia grafica, ma solo il nostro assistente che ascolta la nostra richiesta e ci fornisce la risposta che secondo lui è più attinente. Google ha messo il suo assistente ovunque, sul nostro telefono, nelle smart tv di ultima generazione e nelle nostre case con i dispositivi Nest (Mini, Hub, Tv, ecc.) tutti integrati perfettamente con dispositivi IoT sparsi per la casa come lampade, la tv menzionata in precedenza, serrature delle porte, cucine, frigoriferi e chi più ne ha più ne metta. Momento momento momento, ma in tutto questo cosa c'entrano i dati strutturati? Prima ho detto che possono essere usati per mostrare l'intera esecuzione di una ricetta passo passo. Vogliamo provare? > "Hey Google come si cucinano gli spaghetti allo scoglio?" Uhm... da smartphone solo un elenco di ricette, da Nest Mini idem, ma è su Nest Hub che tutto cambia. Ci verrà chiesto di scegliere dalla stessa lista di ricette viste sullo smartphone, ma non si collegherà al sito web, ci leggerà passo a passo gli step da seguire e dove pensate abbia recuperate questo informazioni? Ma è ovvio dai dati strutturati del sito che avete scelto dalla lista di ricette. Fantastico! Ma come si implementano? Talk is cheap, show me the code. È tempo di aprire il nostro editor. ## Come si implementano (codice) I dati strutturati possono essere implementati con: - [microdati](https://manuelricci.com/come-si-implementano-i-dati-strutturati/#microdati) - [RDFa](https://manuelricci.com/come-si-implementano-i-dati-strutturati/#rdfa "#rdfa") - [JSON-LD](https://manuelricci.com/come-si-implementano-i-dati-strutturati/#jsonld "#jsonld") Nei prossimi paragrafi li vedremo più nel dettaglio. ### Microdati I microdati sono una specifica dell'HTML che annida i dati strutturati all'interno del contenuto HTML stesso. Attraverso l'uso degli attributi si *tagga *il testo con la proprietà che si desidera esporre. Ciò implica che il contenuto debba essere visibile in pagina. Prendiamo come esempio questo snippet di codice: ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` Il markup per noi parla chiaro, per i motori di ricerca un po' meno. Con i microdati possiamo arricchire il codice affinché il crawler possa capire a sua volta che stiamo parlando del film "The Batman" #### `itemscope` e `itemtype` La prima cosa da fare è identificare l'area dove sono contenute le informazioni e contrassegnarla con l'attributo itemscope: ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` In questo modo dichiariamo che quello specifico `

` contiene informazioni relative ad uno specifico elemento. Da solo però, itemscope non ha molto senso e non aiuta, bisogna esplicitare che ciò che è contenuto nel div è un film, come definito nella gerarchia dei tipi di schema.org. Per farlo dobbiamo usare `itemtype`, il quale come valore accetta un URL, quello dove risiede la specifica del tipo, in questo caso http://schema.org/Movie. ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` Questo è sufficiente? No. In base al markup a disposizione possiamo dare altre informazioni in merito al film, nello specifico: titolo, regista, genere e trailer. Per etichettare le proprietà di un elemento si usa l'attributo `itemprop`, seguito dal nome della proprietà, i quali non sono di fantasia, ma quelli specificati in schema.org, nel nostro caso specifico: name, director, genre e trailer. ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` Com'è possibile notare abbiamo dovuto aggiungere un elemento `span` extra che ci permettesse di etichettare esclusivamente il nome e il cognome del regista. Essendo un elemento inline (può essere affiancato ad altri), `` non modifica il modo in cui verrà renderizzata la pagina e questo lo rende l'elemento ideale per usare `itemprop`. A questo punto i motori di ricerca capiranno meglio ciò che inizialmente era comprensibile solo per noi esseri umani. #### Nidificare gli elementi Prima di passare oltre, bisogna sapere che può capitare che il valore di una proprietà sia a sua volta un elemento, come nel nostro caso lo può essere il regista. Oltre ad essere il regista di un film, Matt Reeves è anche una persona. Se volessimo quindi arricchire ulteriormente il nostro markup dovremmo modificarlo come segue: ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` ### RDFa Gli RDFa sono un'estensione dell'HTML5 che supporta i dati strutturati e mette a disposizione nuovi attributi che permettono di arricchire la pagina web. Questo implica che come per i microdati anche i contenuti etichettati con gli attributi RDFa debbano essere presenti in pagina. Prendiamo in considerazione lo snippet visto nei paragrafi precedenti: ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` Microdati e RDFa si assomigliano parecchio, soprattutto dopo gli ultimi aggiornamenti di quest'ultimo che l'hanno allineato parecchio alla sua, più popolare, alternativa. Per iniziare dobbiamo procedere come prima, identificando l'area che vogliamo arricchire, ma invece di `itemscope` e `itemtype` useremo `vocab` e `typeof`. #### `vocab` e `typeof` L'attributo `vocab` contiene l'URL del vocabolario da utilizzare, mentre `typeof` possiamo definirlo come la definizione che vogliamo leggere all'interno del suddetto vocabolario. Il nostro snippet aggiornato sarà: ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` Come per i microdati, questi due attributi sono insufficienti, bisogna definire le varie proprietà. Mentre con i microdati usiamo `itemprop`, in RDFa l'attributo da usare è `property`. I valori, usando schema.org, sono i medesimi di prima. Per cui il nostro snippet cambierà come segue: ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` #### Nidificare gli elementi A questo punto abbiamo la nostra scheda del film comprensibile sia per gli esseri umani che per il crawler. Possiamo fare qualcosina in più? Come visto in precedenza con i microdati anche RDFa permette la nidificazione di altri elementi. Come prima quindi andremo ad inserire una nuova entità Persona per arricchire ulteriormente la parte relativa al regista del film. ```html

The Batman

Regista: Matt Reeves (nato il 27 aprile 1966) Drammatico/giallo Trailer

``` Come possiamo osservare non è stato necessario ridefinire il `vocab` o un nuovo scope, ma è stato sufficiente utilizzare nuovamente l'attributo `typeof` per comunicare che il contenuto dello `span` è di tipo Person. ### JSON-LD JSON è una notazione JavaScript, acronimo di JavaScript Object Notation, l'estensione LD sta per Linked Data. Si tratta quindi di una porzione di codice da includere nel tag ` SCHEMA; echo $schema; } ``` Ma il codice non è completo!?! Troppo facile... Prova a completarlo e vediamo come te la cavi, devi solo leggere la [documentazione di WordPress](https://developer.wordpress.org/reference/ "https://developer.wordpress.org/reference/") e usare le giuste funzioni per recuperare le informazioni richieste. Chi invece, non ha tempo, non ha voglia di sbattere la testa sullo script incompleto qui sopra, non ha qualcuno di competente che gli gestisce il sito o preferisce ripiegare sull'installazione di un plugin ricordo che [Yoast](https://yoast.com/) fa già un gran bel lavoro, ma ci sono anche altre alternative come [Rank Math](https://rankmath.com/) e [All In One SEO](https://semperplugins.com/) che danno soddisfazioni, anche se Yoast rimane un'ottima soluzione per via dei suoi molteplici anni di esperienza. ## Controllare la validità Per controllare la validità dei dati strutturati si può usare lo strumento di "[Test dei risultati multimediali](https://search.google.com/test/rich-results)" messo a disposizione da Google. Lo strumento ci chiederà se vogliamo recuperare una pagina web o incollare del codice e questa scelta dipende ovviamente da cosa vogliamo testare. Se dovessimo testare lo snippet JSON del film "The Batman" ci basterà incollare il codice nell'apposita casella ed eseguire l'analisi. Dopo qualche secondo lo strumento ci restituirà una pagina come questa: ![test dei dati strutturati con esito positivo](https://storage.googleapis.com/iccm-bucket-prod/test_ok_0b258108fa/test_ok_0b258108fa.webp) I dati strutturati relativi al film "The Batman" sono stati implementati e recuperati con successo. Espandendo la sezione vedremo i vari dati passati. Se invece qualcosa dovesse andare storto (ho rimosso delle virgolette) lo strumento ci indicherà l'errore di analisi. ![test dei dati strutturati non valido](https://storage.googleapis.com/iccm-bucket-prod/test_fail_fed465c1df/test_fail_fed465c1df.webp) Infine, nel caso di errori meno gravi (campo facoltativo mancante) ci mostrerà un avviso, mentre se a mancare sono delle proprietà obbligatorie ci mostrerà degli errori, indicando quali proprietà mancano all'appello. ![dettaglio errori nei dati strutturati](https://storage.googleapis.com/iccm-bucket-prod/test_detail_f7a81594f5/test_detail_f7a81594f5.webp) ## Individuare eventuali problemi Per quanto le cose possano funzionare correttamente all'inizio, non è detto che il codice rimanga valido nel tempo. C'è quindi la necessità di monitorare nel tempo i nostri dati strutturati. Per poter svolgere questo compito il nostro alleato è ancora una volta Google con la sua Search Console. Verificando la proprietà su Search Console abbiamo a disposizione svariati strumenti tra cui quelli relativi ai dati strutturati, per la quale ci vengono indicati gli errori, avvisi o se tutto è ok. Ad esempio, questo è un grafico dei dati strutturati relativi alla [casella di ricerca sitelink](https://developers.google.com/search/docs/data-types/sitelinks-searchbox?hl=it), quel particolare tipo di dato strutturato che attiva la casella di ricerca subito sotto al nome del sito. ![Dati strutturati con tutte le informazioni corrette](https://storage.googleapis.com/iccm-bucket-prod/schema_status_3e095dcb1c/schema_status_3e095dcb1c.webp) Mentre qui di seguito possiamo vedere che i dati strutturati di una scheda prodotto di un ecommerce non sono completi ed è necessario intervenire per correggerli. ![Dati strutturati con dati consigliati mancanti](https://storage.googleapis.com/iccm-bucket-prod/schema_status_2_5930e37344/schema_status_2_5930e37344.webp) ## Conclusioni Questo è tutto quello che c'è da sapere per iniziare a lavorare con i dati strutturati. Ricapitolando, abbiamo visto: - Cosa sono i dati strutturati - La documentazione ufficiale - Come Google usa i dati strutturati - Come si implementano via codice e via plugin con WordPress - Controllare la validità dei dati strutturati - Monitorare la validità nel tempo con search console Se ci sono dubbi o domande scrivimi pure e non dimenticare di iscriverti al canale YouTube. Foto di copertina di [@pietrozj](https://unsplash.com/@pietrozj)

SEO tecnica

Come si implementano i dati strutturati