Guida definitiva a Schema markup e dati strutturati (JSON-LD)
- Alberto Carniel
- 5 giorni fa
- Tempo di lettura: 24 min
Vuoi imparare come creare e aggiungere i Schema markup al tuo sito web usando JSON-LD?
Se sì, continua a leggere questa guida definitiva.
In questo articolo non solo troverai informazioni su rich snippet e dati strutturati Schema, ma imparerai anche a scrivere JSON-LD e a generare tutti i markup che vuoi.
Ti spiego esattamente come usare schema.org per creare i tuoi markup di dati strutturati..
Indice
SCHEMA MARKUPS
Nel 2011, Google, Microsoft (Bing), Yahoo! e Yandex hanno lanciato schema.org, un’iniziativa per fornire un vocabolario condiviso e comune per i dati strutturati.
I dati strutturati vengono usati dai webmaster per aiutare i motori di ricerca a comprendere i contenuti pubblicati su una pagina web.
Mission statement di Schema (fonte: schema.org, info recuperate a maggio 2020):
Schema.org è un’attività collaborativa e comunitaria con la missione di creare, mantenere e promuovere schemi per i dati strutturati su Internet, sulle pagine web, nei messaggi email e oltre..
Cosa sono gli Schema markups?
Gli Schema markup sono porzioni di codice che i webmaster inseriscono nelle pagine per descrivere e specificare i contenuti online per i motori di ricerca.
I motori di ricerca possono usare questi dati per interpretare i contenuti e mostrare informazioni più appropriate nella SERP (Search Engine Results Page).
Quando usi i tag HTML nelle pagine web, stai dicendo ai browser come visualizzare le informazioni.
Ma l’HTML non dice sempre ai motori di ricerca cosa significano quelle informazioni.
Per esempio:
<h1>Schema markup SEO guide</h1>dice ai browser di mostrare la stringa di testo “Schema markup SEO guide” come heading 1.
Tuttavia, il tag HTML non dà informazioni aggiuntive su cosa significhi quella stringa.
“Schema markup SEO guide” può essere il titolo di un articolo di blog oppure il titolo di un libro acquistabile.
Per i motori di ricerca è difficile capire correttamente il contesto di una stringa di testo e quindi mostrare all’utente i risultati più giusti.
Ecco perché schema.org fornisce contesto per aiutare i motori di ricerca a interpretare i contenuti online.
Tieni presente che i motori di ricerca confrontano le informazioni nei markup Schema con il contenuto della pagina.
Se non coincidono, i motori possono ignorare i tuoi dati strutturati e, in caso di abuso, potresti anche incorrere in problemi legati alle policy sui dati strutturati.
In altre parole: se inserisci un markup Review (spiego cos’è più avanti), ma nella pagina non ci sono davvero recensioni, Google non considererà valido quel markup per i rich results.
Per scrivere Schema markup, i webmaster possono usare formati Microdata, RDFa o JSON-LD.
In questo articolo mi concentro solo su JSON-LD, perché Google lo raccomanda quando possibile..
Perché i dati strutturati Schema sono importanti per la SEO?
In un Reddit AMA (Ask Me Anything) del 2018, John Mueller, senior webmaster trends analyst di Google, ha dichiarato che gli Schema markup aiutano il ranking:
Usiamo i [dati strutturati] per capire meglio una pagina, ci aiuta a posizionarla meglio dove è rilevante.
Aggiungere dati strutturati Schema nell’HTML del sito è una delle tante attività SEO (Search Engine Optimization) che dovresti includere per massimizzare le performance in ricerca.
Se i dati strutturati aiutano Google a capire meglio una pagina, potrebbe posizionarla più in alto in SERP o farla posizionare per keyword aggiuntive.
Tuttavia, il 2 aprile 2018, Mueller ha twittato che gli Schema markup non sono un segnale di ranking.
Significa che il sito non “sale” solo perché hai aggiunto dati strutturati Schema alle pagine.
In altre parole, RankBrain (l’algoritmo AI di machine learning di Google) non considera direttamente i dati strutturati come segnale di ranking per determinare i risultati più rilevanti per una query.
Bonus: cos’è un tag HTML?
Per avere una panoramica completa sugli Schema markup, ho deciso di scrivere questo breve paragrafo su cosa sia un tag HTML.
Un tag è un comando inserito nel codice di una pagina web che dice ai browser di fare qualcosa (es. eseguire un’azione, mostrare contenuti in un certo modo e così via).
I tag sono racchiusi tra una parentesi angolare sinistra e destra: “<” e “>”.
HTML è un linguaggio che puoi usare per esprimere questi tag: <html>.
Esempio di tag HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Ecco cosa significa, riga per riga:
Dichiarazione doctype del documento. In questo caso HTML5;
Indica l’inizio di un documento HTML in inglese (lingua del documento);
È la prima parte del documento HTML che motori di ricerca e browser leggono. Non è visibile sulla pagina;
Rappresenta il titolo del documento (o della pagina web) ed è mostrato dai motori di ricerca in SERP e dai browser nella scheda della finestra;
Fine della sezione head (o header);
Inizio della sezione body: questo contenuto è visibile nella pagina;
Rappresenta un heading 1: dice ai motori di ricerca di cosa parla la pagina e ordina ai browser di mostrare la stringa tra i tag in formato heading 1;
Rappresenta un paragrafo: fornisce informazioni ai motori di ricerca sulla pagina e ordina ai browser di mostrare la stringa tra i tag come paragrafo;
Fine della sezione body;
Fine del documento.
RICH SNIPPETS
Quando i motori di ricerca elaborano gli Schema markup, possono mostrare informazioni aggiuntive in SERP per aiutare gli utenti nella ricerca.
Queste informazioni aggiuntive si chiamano rich snippet o rich results.
Cosa sono i rich snippets?
I rich snippet (o rich results) sono risultati di ricerca con informazioni aggiuntive visualizzate.
I rich snippet sono il risultato degli Schema markup e i dati vengono presi dai dati strutturati presenti nell’HTML della pagina.
Questo è un risultato Google senza rich snippet:
Questo è un risultato Google con un rich snippet:
Molti imprenditori mi chiedono come possano aggiungere rich snippet al loro sito.
Questa domanda è completamente sbagliata.
Per chiarire: i rich snippet sono una conseguenza dei dati strutturati.
Tu aggiungi dati strutturati Schema nell’HTML del sito per generare rich results.
Quindi la domanda corretta dovrebbe essere: come aggiungere Schema markup in un sito per generare rich snippet.
Te lo mostro tra un attimo.
Perché i rich snippet sono importanti per la SEO?
I rich snippet spesso significano CTR organico più alto (Click-Through Rate), perché il tuo risultato risalta di più.
Detto questo, restiamo onesti e accurati:
Un CTR più alto è una vittoria di performance (più click a parità di posizionamento).
L’industria SEO ha molti studi che mostrano una correlazione tra CTR e ranking.
Google fa molti esperimenti con i dati di click per valutazione, ma non conferma chiaramente “il CTR è un fattore di ranking” nel modo semplicistico che si ripete online.
Nel 2016, l’analisi di Larry Kim (diffusa tramite WordStream) ha reso popolare la relazione tra CTR e posizione e l’idea che i risultati che “battono il CTR atteso” spesso possano avere, col tempo, un’opportunità di salire.
È utile come modello per ragionare sulla performance, non come garanzia.
Inoltre, Google ha confermato più volte l’importanza estrema del CTR organico per i ranking.
Durante SMX (Search Marketing Expo) West 2016, Paul Haahr, software engineer in Google, ha presentato come funziona l’algoritmo di Google da una prospettiva ingegneristica.
Nella slide sopra, Haahr mostra che è “male” se gli utenti non cliccano su un risultato.
Spiega che Google esegue A/B test su traffico reale per verificare cambiamenti nei pattern di click:
Facciamo un sacco di esperimenti. È molto raro che tu faccia una ricerca su Google e non sia dentro almeno un esperimento.
A marzo 2015, Danny Sullivan, public search liaison di Google, ha twittato che Google usa il CTR come segnale di ranking.
Alla fine è chiaro che il click-through-rate porta a ranking più alti e più traffico.
La conclusione: vuoi che il tuo sito generi rich snippet, perché sono un elemento chiave per la SEO.
Lo svantaggio dei rich snippet: la ricerca “zero-click”
A volte Google usa i rich snippet per soddisfare l’intento dell’utente senza bisogno di cliccare alcun risultato.
La predominanza della ricerca mobile e la crescita della ricerca vocale hanno spostato i bisogni degli utenti verso risposte brevi e pratiche.
Nel 2019, Rand Fishkin, CEO e co-founder di SEOmoz, ha analizzato i dati di clickstream di Jumpshot e ha scoperto che il CTR organico è sceso al 47,4%.
Nel primo trimestre 2019, il 48,96% di tutte le ricerche Google negli USA tracciate da Jumpshot si è concluso senza un click.
Google non ha bisogno di dati strutturati per generare rich results.
Infatti può prendere informazioni dalla tua pagina, rielaborarle e rimetterle insieme in ciò che Fishkin chiama “SERP feature aggressive e risposte istantanee”.
Di solito, le ricerche zero-click includono:
Ricerche legate a database: date, ora e fusi orari, conversioni valute, età e nomi di persone e prodotti…;
Ricerche tipo dizionario/enciclopedia: query con “che cos’è” e “definizione di”;
Ricerche legate a mappe e direzioni: query che attivano risultati locali come “vicino a me”, “ristorante vegano” e così via.
Nonostante i rich snippet siano comunemente riconosciuti come opportunità per attirare nuovi visitatori e visibilità, perdi traffico quando gli utenti si accontentano delle informazioni in SERP.
La sfida per un SEO specialist è apparire in SERP con rich snippet che non diano una soluzione completa.
Così gli utenti dovranno visitare la tua pagina per ottenere le informazioni che cercano.
GENERATOR DI SCHEMA MARKUP GRATUITI
Se vuoi una soluzione semplice e veloce per aggiungere Schema markup al tuo sito, ti mostro alcuni tool gratuiti che uso per generare dati strutturati.
Indipendentemente dallo strumento, genererai markup abbastanza standardizzati.
Se vuoi imparare a scrivere Schema markup personalizzati in JSON-LD, salta questo capitolo.
Schema markup generator (JSON-LD) di Merkel
Schema Markup Generator (JSON-LD) è il tool gratuito che preferisco per creare dati strutturati di base.
È stato creato da Max Prin, Head of TechnicalSEO in Merkel Inc.
Tramite un menu a tendina, puoi scegliere un markup e inserire dati rilevanti in un form semplice da usare.
Offrono markup Schema in Microdata o JSON-LD per molte applicazioni, tra cui:
Informazioni del sito;
Breadcrumb navigation;
Articoli;
Informazioni prodotto;
Local business;
Persone;
Eventi;
Ricette;
Annunci di lavoro.
Tre motivi per cui dovresti usare il generator schema markup di TechnicalSEO:
È totalmente gratuito e “a prova di errore”;
Ti permette di testare direttamente il codice con Google Structured Data Testing Tool o Rich Results Test;
Non richiede competenze di coding e ti permette di gestire i dati strutturati in autonomia senza disturbare uno sviluppatore.
Puoi giocare con questo tool e, quando sei pronto a aggiungere più personalizzazione al tuo JSON-LD, prova a creare il tuo codice usando la documentazione ufficiale su schema.org.
Structured Data Markup Helper di Google
Structured Data Markup Helper è un tool per webmaster di Google che ti permette di visualizzare una pagina web e taggare direttamente gli elementi tramite un editor.
Quando hai finito di taggare, Google genera gli Schema markup appropriati e li inserisce nell’HTML della pagina, che puoi scaricare e ricaricare nel sito.
Seleziona il tipo di dati strutturati che vuoi generare.
Puoi partire da un URL o da codice HTML.
Nel secondo step, Google replica la pagina nell’editor che puoi usare per taggare gli elementi rilevanti.
Nel terzo e ultimo step, Google replica l’HTML della pagina con i nuovi Schema markup inclusi.
Scarica il codice e ricaricalo nel sito di conseguenza.
Data Highlighter di Google
Se vuoi creare dati strutturati per te o per un sito che possiedi, ti consiglio Data Highlighter di Google.
Questo tool SEO gratuito è parte di Google Search Console e funziona quasi come Structured Data Markup Helper.
La differenza principale è che Data Highlighter installa direttamente nel codice del sito gli Schema markup.
Infatti, nell’angolo in alto a destra dell’editor trovi un bottone per pubblicare le modifiche.
Data Highlighter ti permette anche di salvare lavori in corso e memorizzare tutte le pagine con dati evidenziati.
Così puoi rivedere e aggiornare il lavoro in qualsiasi momento oppure salvare una bozza e finire più tardi.
COME USARE SCHEMA.ORG
Dalla homepage di schema.org, raggiungi la sezione “Schemas” usando il menu nell’header.
In questa pagina puoi:
Selezionare gli Schema markup più comuni;
Vedere la lista completa dei markup;
Usare la barra di ricerca nell’header per trovare esattamente il markup che ti serve.
Mettiamo che tu voglia aggiungere un markup Organization.
Come vedi nell’immagine sotto, la documentazione mostra tre colonne.
La prima colonna è una lista di property dell’applicazione selezionata.
In questo esempio abbiamo scelto l’applicazione Organization.
Una property fornisce informazioni aggiuntive per descrivere un’applicazione.
La lista è in ordine alfabetico.
La seconda colonna indica cosa dovresti scrivere nel codice per ogni property.
Per esempio, quando aggiungi la property address, puoi usare una semplice stringa di testo per specificare l’indirizzo dell’organizzazione oppure usare un expected type chiamato PostalAddress.
Mettiamo che l’organizzazione sia l’Art Museum of Philadelphia: l’indirizzo sarà “2600 Benjamin Franklin Pkwy, Philadelphia, PA 19130”.
Se vedi un elemento “speciale” cliccabile (expected type) nella seconda colonna, significa che puoi includere un type aggiuntivo nel markup.
Quando crei dati strutturati, dovresti essere il più specifico possibile, quindi usa gli expected type quando puoi.
Per esempio, invece di associare una semplice stringa alla property address, clicca su PostalAddress per vedere la pagina di riferimento e aggiungere più property.
Questa pagina è simile alla precedente, ma riguarda il type PostalAddress.
Qui trovi tutte le “sub-property” che puoi usare per descrivere la property principale address.
Alla fine della pagina Organization trovi una lista di esempi di Schema markup che puoi usare come riferimento per scrivere il codice.
WORKFLOW IN 7 STEP PER I DATI STRUTTURATI
In questo capitolo descrivo il workflow che uso quando creo dati strutturati personalizzati.
Puoi usarlo come mini-handbook per rendere più fluido il processo SEO.
Step 1: seleziona un’applicazione Schema
In base alle tue esigenze SEO, seleziona una o più applicazioni Schema per ogni pagina web.
Per decidere, rispondi a queste due domande:
Quale rich snippet vuoi generare?
Cosa devono sapere i motori di ricerca per interpretare correttamente la pagina?
Qui sotto elenco alcune delle applicazioni Schema più comuni.
Review markup. Mostra una valutazione a stelle su scala 1–5 che può rappresentare un singolo reviewer o la media di più recensioni (aggregate rating).
Product markup. Fornisce info su un prodotto e include immagini, prezzo e disponibilità.
Recipe markup. Mostra informazioni sul tempo di preparazione, recensioni e immagini.
Event markup. Mostra data, ora, luogo dell’evento e altro.
Organization markup. Aiuta i motori a capire informazioni chiave su un’azienda come indirizzo, logo e contatti.
Music markup. Aiuta Google a indicizzare musica fornendo info su genere, album, date di uscita, testi e così via.
Video markup. I motori non capiscono le immagini, quindi servono dati strutturati per interpretare i video.
Top stories markup. Permette a un sito di apparire nel box “Top Stories” e si applica solo a siti approvati da Google News.
Step 2: trova la documentazione correlata su schema.org
Una volta individuate le applicazioni da inserire, vai su schema.org e usa la search bar per trovarle.
Step 3: identifica le property necessarie
Scorri la lista nella prima colonna e annota le property che ti servono per descrivere l’applicazione.
Fai lo stesso con gli expected type (“sub-property”), se presenti.
Step 4: parti dagli esempi per generare il tuo JSON-LD
Usa gli esempi in fondo alla pagina come base per generare i tuoi dati strutturati JSON-LD.
Step 5: valida il codice
Copia e incolla il JSON-LD nel Google Structured Data Testing Tool e verifica che non ci siano errori.
Step 6: inserisci il markup JSON-LD nell’HTML
Secondo la documentazione Google, dovresti inserire gli Schema markup JSON-LD nella sezione head della pagina.
Quando inserisci questo tipo di codice, di solito hai due opzioni (soprattutto se usi website builder come Wix):
Caricare il codice una volta;
Caricarlo su ogni nuova pagina.
Scegli di caricare il codice una volta.
A settembre 2019, John Mueller ha detto in un video che Google può elaborare dati strutturati inseriti anche nella sezione body.
A seconda del markup specifico, le linee guida possono cambiare caso per caso.
Per esempio, il markup Website deve essere inserito solo nella head della homepage.
Il markup Corporation (o il più ampio Organization) può essere inserito nella head di ogni pagina del sito.
Tuttavia, altri SEO expert raccomandano di inserirlo solo nella homepage o in pagine con informazioni sull’azienda/organizzazione proprietaria del sito (es. About o Contatti).
Personalmente, ho inserito il markup Organization in ogni pagina, perché contiene informazioni utili per branding e copyright.
Step 7: verifica che non ci siano errori
Verifica i dati strutturati della pagina incollando l’URL nel Google Structured Data Testing Tool o nel Rich Results Test.
Quest’ultimo testa la pagina pubblicamente accessibile e mostra quali rich results possono essere generati dai dati strutturati presenti.
COMPRENDERE LA SINTASSI DI JSON-LD
Prima di mostrarti come creare dati strutturati, voglio insegnarti alcune basi della sintassi di JSON-LD.
Così capirai meglio il codice del workshop, perché non ripeterò ogni volta il significato di questi simboli.
Parentesi graffe
Tra il tag script di apertura e quello di chiusura trovi una parentesi graffa aperta e una chiusa.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"name": "",
"url": "",
"logo": ""
}
</script>I dati strutturati vanno inseriti tra queste due parentesi graffe.
Scrivendo il markup probabilmente aggiungerai altre parentesi graffe.
Per non impazzire, usa l’indentazione.
Ricorda: per ogni parentesi aperta (o parentesi quadra) devi averne una chiusa.
Schema type: “@type”
La keyword “@type” specifica il tipo di elemento che stai marcando.
Qui trovi una lista completa di tutti gli item type.
La usi all’inizio dello script per dichiarare il type dell’applicazione e ogni volta che devi aggiungere un expected type: un item della seconda colonna di una pagina di riferimento di schema.org, per capirci.
Virgolette
Quando richiami un type Schema, una property o compili un campo, devi racchiudere l’informazione tra virgolette.hema type, a property or fill in a field, you need to enclose the information in quotation marks.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"name": "Alberto Carniel",
"url": "https://www.albertocarniel.com",
"logo": "https://static.wixstatic.com/media/2686e0_ce8b0e616edc4c2e90ce339361cd9bed~mv2.jpg"
}
</script>Due punti
Quando richiami un type o una property, ti serve un due punti per inserire l’informazione.
In altre parole, i due punti separano il campo dal valore.
Virgole
Immagina questo codice come una lista di elementi: e come ogni lista, devi inserire una virgola dopo ogni elemento.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"name": "Alberto Carniel",
"url": "https://www.albertocarniel.com",
"logo": "https://static.wixstatic.com/media/2686e0_ce8b0e616edc4c2e90ce339361cd9bed~mv2.jpg"
}
</script>Dopo il campo informativo della property logo non c’è la virgola perché è l’ultimo elemento e non ci sono altre informazioni.
Parentesi quadre
Usa le parentesi quadre quando includi una property con più di un item/entry.
Questo si chiama anche array.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"name": "Alberto Carniel",
"url": "https://www.albertocarniel.com",
"logo": "https://static.wixstatic.com/media/2686e0_ce8b0e616edc4c2e90ce339361cd9bed~mv2.jpg",
"sameAs": [
"https://www.linkedin.com/in/albertocarniel/",
"https://www.instagram.com/albertocarniel91/",
"https://www.youtube.com/c/AlbertoCarniel",
"https://twitter.com/CarnielAlberto"
]
}
</script>Nella property sameAs dell’esempio sopra ho racchiuso i miei canali social tra parentesi quadre.
Se avessi avuto un solo profilo social, avrei inserito solo un URL senza parentesi quadre.
Nota che dopo il profilo Twitter non c’è la virgola perché è l’ultimo elemento dentro le parentesi.
Se dopo sameAs ci fosse stata un’altra property, avrei messo una virgola dopo la parentesi quadra di chiusura.
Parentesi graffe interne
Usa parentesi graffe interne ogni volta che una property ha un expected type (vedi la seconda colonna di una pagina di riferimento schema.org).
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"name": "Alberto Carniel",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1 (631) 988-6773",
"contactType": "customer service",
"availableLanguage": ["English","Italian"]
}
}
</script>Nell’esempio sopra ho richiamato la property contactPoint che richiede un type ContactPoint.
Per questo è racchiusa tra parentesi graffe.
Come vedi nell’immagine sotto, l’expected type è scritto nella seconda colonna.
Clicca sul link dell’expected type per vedere la pagina di riferimento.
COME CREARE DATI STRUTTURATI CON JSON-LD (WORKSHOP)
In questo capitolo ti mostro come usare schema.org come riferimento per scrivere dati strutturati personalizzati in JSON-LD.
Per questo workshop ho usato il markup Organization come esempio.
Puoi replicare lo stesso processo e le stesse tecniche per scrivere dati strutturati diversi come preferisci.
Disclaimer: non ho usato l’indentazione, perché senza programmi come NotePad++ è difficile farla bene.
Per i miei dati strutturati uso semplicemente NotePad e salvo il JSON-LD in formato .txt.
NotePad è già incluso in Windows.
Se hai un Mac puoi usare TextEdit.
Se hai un editor più professionale per il coding, usalo pure.
Potrebbe servirti aggiustare la sintassi cambiando le impostazioni:
View > Syntax > JavaScript > JSON
Questo è il markup Organization finale che creeremo e rappresenta anche i dati strutturati che uso su albertocarniel.com:
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@id": "https://www.albertocarniel.com/#organization",
"@type": "Corporation",
"name": "E-commerce and Digital Marketing Consultant | Alberto Carniel",
"alternateName": "Alberto Carniel",
"description": "Alberto Carniel is an international e-commerce and digital marketing consultant who serves public and private businesses operating in the US and Italian markets",
"url": "https://www.albertocarniel.com/",
"logo": "https://static.wixstatic.com/media/2686e0_ce8b0e616edc4c2e90ce339361cd9bed~mv2.jpg",
"email": "alberto@albertocarniel.com",
"foundingDate": "2016-04-17",
"sameAs": [
"https://www.linkedin.com/in/albertocarniel/",
"https://www.instagram.com/albertocarniel91/",
"https://www.youtube.com/c/AlbertoCarniel",
"https://twitter.com/CarnielAlberto"
],
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "5",
"ratingValue": "5",
"worstRating": "1",
"reviewCount": "30"
},
"address": [{
"@type": "PostalAddress",
"addressCountry": "USA",
"addressLocality": "Dix Hills",
"postalCode": "XXXXX",
"streetAddress": "XXXXXXXXXXXXXXX"
},
{
"@type": "PostalAddress",
"addressCountry": "ITA",
"addressLocality": "Albignasego",
"postalCode": "XXXXX",
"streetAddress": "XXXXXXXXXXXXXXX"
}
],
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1 (631) 988-6773",
"contactType": "customer service",
"availableLanguage": ["English","Italian"]
},
{
"@type": "ContactPoint",
"telephone": "+1 (631) 988-6773",
"contactType": "sales",
"availableLanguage": ["English","Italian"]
}
],
"founders": {
"@type":"Person",
"name": "Alberto Carniel",
"image": "https://static.wixstatic.com/media/2686e0_dc02f9490e4c4e0da5499b32d384c542~mv2.jpg",
"birthPlace": "Padua, Italy",
"birthDate": "1991-10-28",
"gender": "Male",
"nationality": "Italian",
"email": "alberto@albertocarniel.com",
"jobTitle": "E-commerce and Digital Marketing Consultant",
"sameAs": [
"https://www.facebook.com/alberto.carniel.9",
"https://www.instagram.com/albertocarniel91/",
"https://www.linkedin.com/in/albertocarniel/",
"https://www.youtube.com/c/AlbertoCarniel",
"https://twitter.com/CarnielAlberto"
]
}
}
]
}
</script>Questo markup Organization include le seguenti property:
Type;
Id;
Name;
Alternate name;
Description;
URL;
Logo;
Email;
Founding date;
Canali social;
Aggregate rating;
Indirizzi multipli dell’azienda;
Contact points;
Founders.
Iniziamo.
Workshop: come creare il markup Schema Organization in JSON-LD
In questa sezione ti spiego come scrivere ogni riga del codice precedente e dove recuperare vocabolario e sintassi per ogni elemento.
Se vuoi usare questo markup Organization sul tuo sito, sostituisci semplicemente le mie informazioni con le tue.
Disclaimer: non sono uno sviluppatore, quindi ti insegno esattamente come ho imparato da autodidatta.
Se vuoi diventare indipendente nello scrivere Schema markup JSON-LD, ti consiglio di fare tanta pratica e testare i codici con Google Structured Data Testing Tool.
Quest’ultimo ti segnala eventuali errori, così puoi correggere e riprovare.
Per organizzare meglio questa sezione, ho diviso ogni parte del codice con un separatore di pagina.
<script type="application/ld+json">
{
"@context": "http://schema.org/",Così inizia il codice JSON-LD (tag script di apertura).
Non c’è molto da capire: copia e incolla questo snippet ogni volta che inizi a creare dati strutturati Schema.
"@id": "https://www.albertocarniel.com/#organization",Questa riga rappresenta un node identifier: ti permette di attribuire una URI (Uniform Resource Identifier) a un nodo.
Per semplificare: considera una URI come un URL (se vuoi sapere la differenza, leggi questo documento) e un nodo come un contenitore di informazioni.
In JSON-LD, “@id” indica un nodo e
https://www.albertocarniel.com/#organizationè la URI.
Un nodo e una URI insieme formano un IRI (Internationalized Resource Identifier).
In parole povere, con questa stringa:
"@id": "https://www.albertocarniel.com/#organization",stai dicendo che tutte le altre stringhe successive (le altre property del markup Organization) si riferiscono a una pagina “fittizia” identificata dalla URI:
https://www.albertocarniel.com/#organizationQuesta URI rappresenta l’organizzazione vera e propria e non una pagina (o una parte di pagina) sull’organizzazione.
Stiamo distinguendo la “cosa” dalla pagina che parla della cosa.
In questo esempio, la cosa è Alberto Carniel come business/organizzazione.
La pagina che parla della cosa, invece, è semplicemente il dominio “albertocarniel.com”, perché è la homepage di Alberto Carniel.
Cambiamo esempio.
Facciamo finta che stiamo parlando di Apple.
Se mi riferisco ad Apple usando:
https://www.apple.com/#organizationmi riferisco al brand/organizzazione.
Se mi riferisco ad Apple usando “https://www.apple.com”, sto semplicemente menzionando la homepage del sito.
Puoi trovare la documentazione su schema.org sotto la property identifier.
Se clicchi su background notes, viene spiegato che quando vuoi scrivere una stringa con un identificatore devi usare:
“Itemid” se usi Microdata;
“resource” se usi RDFa 1.1;
“@id” se usi JSON-LD.
Un node identifier è molto utile per richiamare un markup completo senza doverlo riscrivere.
Per esempio, puoi collegare il markup Organization al markup Website usando la stringa:
"isPartOf": {"@id": "https://www.albertocarniel.com/#organization"}Aggiungendo questa stringa al markup Website, stai dicendo che il sito è parte della tua organizzazione (ricorda la virgola alla fine se non è l’ultimo elemento).
Esempio di node identifier usati da Yoast nella loro guida definitiva WordPress SEO:
<script type="application/ld+json">
{"@context":"https://schema.org",
"@graph":[
{
"@type":"Organization",
"@id":"https://yoast.com/#organization",
"name":"Yoast",
"url":"https://yoast.com/",
"sameAs":
["https://www.facebook.com/yoast",
"https://www.instagram.com/yoast/",
"https://www.linkedin.com/company/1414157/",
"https://www.youtube.com/yoast",
"https://www.pinterest.com/yoast/",
"https://en.wikipedia.org/wiki/Yoast",
"https://twitter.com/yoast"],
"logo":{"@type":"ImageObject",
"@id":"https://yoast.com/#logo",
"url":"https://yoast.com/app/uploads/2015/09/Yoast-Logo-Icon-120x120.png",
"caption":"Yoast"},
"image":{"@id":"https://yoast.com/#logo"}},
{
"@type":"WebSite",
"@id":"https://yoast.com/#website",
"url":"https://yoast.com/",
"name":"Yoast",
"publisher":{"@id":"https://yoast.com/#organization"},
"potentialAction":{"@type":"SearchAction",
"target":"https://yoast.com/?s={search_term_string}",
"query-input":"required name=search_term_string"}},
{
"@type":"WebPage",
"@id":"https://yoast.com/wordpress-seo/#webpage",
"url":"https://yoast.com/wordpress-seo/",
"inLanguage":"en-US",
"name":"WordPress SEO Tutorial \u2022 The Definitive Guide \u2022 Yoast",
"isPartOf":{"@id":"https://yoast.com/#website"},
"image":{"@type":"ImageObject",
"@id":"https://yoast.com/wordpress-seo/#primaryimage",
"url":"https://yoast.com/app/uploads/2008/04/WordPress_SEO_definitive_guide_FI.png",
"caption":""},
"primaryImageOfPage":{"@id":"https://yoast.com/wordpress-seo/#primaryimage"},
"datePublished":"2019-03-28T14:05:01+00:00",
"dateModified":"2019-04-11T12:24:14+00:00",
"description":"This is the ONLY tutorial you'll need to hugely increase your search engine traffic by improving your WordPress SEO. Want higher rankings? Read on!",
"breadcrumb":{"@id":"https://yoast.com/wordpress-seo/#breadcrumb"}},
{
"@type":"BreadcrumbList",
"@id":"https://yoast.com/wordpress-seo/#breadcrumb",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":
{"@type":"WebPage",
"@id":"https://yoast.com/",
"url":"https://yoast.com/",
"name":"Home"}},
{
"@type":"ListItem",
"position":2,
"item":{"@type":"WebPage",
"@id":"https://yoast.com/seo-blog/",
"url":"https://yoast.com/seo-blog/",
"name":"SEO blog"}},
{
"@type":"ListItem",
"position":3,
"item":{"@type":"WebPage",
"@id":"https://yoast.com/tag/wordpress/",
"url":"https://yoast.com/tag/wordpress/",
"name":"WordPress"}},
{
"@type":"ListItem",
"position":4,
"item":{"@type":"WebPage",
"@id":"https://yoast.com/wordpress-seo/",
"url":"https://yoast.com/wordpress-seo/",
"name":"WordPress SEO: the definitive guide"}}]},
{
"@type":"Article",
"@id":"https://yoast.com/wordpress-seo/#article",
"isPartOf":{"@id":"https://yoast.com/wordpress-seo/#webpage"},
"author":{"@id":"https://yoast.com/about-us/team/joost-de-valk/#author",
"name":"Joost de Valk"},
"publisher":{"@id":"https://yoast.com/#organization"},
"headline":"WordPress SEO: the definitive guide",
"datePublished":"2019-03-28T14:05:01+00:00",
"dateModified":"2019-04-11T12:24:14+00:00",
"commentCount":"4",
"mainEntityOfPage":"https://yoast.com/wordpress-seo/#webpage",
"image":{"@id":"https://yoast.com/wordpress-seo/#primaryimage"},
"keywords":"Content SEO, Google Analytics, Mobile SEO, Security, Site Speed, Site Structure,
Technical SEO, WordPress, Yoast SEO"},
{
"@type":"Person",
"@id":"https://yoast.com/about-us/team/joost-de-valk/#author",
"name":"Joost de Valk",
"image":{"@type":"ImageObject",
"@id":"https://yoast.com/#personlogo",
"url":"https://yoast.com/app/uploads/2018/09/avatar_user_1_1537774226.png",
"caption":"Joost de Valk"},
"description":"Joost de Valk is the founder and Chief Product Officer of Yoast and the Lead
Marketing & Communication for WordPress.org. He's a digital marketer, developer and an Open Source fanatic.",
"sameAs":[
"https://www.facebook.com/jdevalk",
"http://www.linkedin.com/in/jdevalk",
"https://twitter.com/jdevalk"]}
]}</script>In pratica, hanno dichiarato che l’Article appartiene a una WebPage che appartiene al Website di Yoast che appartiene all’Organization Yoast.
"@type": "Corporation",Con questa stringa stiamo dichiarando il type dell’applicazione.
È anche valido scrivere:
"@type": "Organization",Corporation è semplicemente un tipo più specifico di Organization.
Infatti, se scorri la pagina, trovi il riferimento correlato.
Se sei un local business e vuoi specificare ulteriormente la categoria, ma non trovi la terminologia giusta su schema.org, puoi aggiungere qui la categoria della tua attività: segui le istruzioni nella pagina.
"name": "E-commerce and Digital Marketing Consultant | Alberto Carniel",Questa stringa rappresenta il nome dell’organizzazione.
Copia e incolla la property così com’è dalla prima colonna e racchiudila tra virgolette.
Nella seconda colonna è indicato che puoi usare Text come valore, quindi scrivi semplicemente il nome dell’attività tra virgolette.
"alternateName": "Alberto Carniel",Questa stringa rappresenta un alias o un nome alternativo con cui si chiama l’organizzazione.
"description": "Alberto Carniel is an international e-commerce and digital marketing consultant who serves public and private businesses operating in the US and Italian markets",Fornisci una descrizione completa dell’organizzazione.
La property description è molto utile per inserire keyword rilevanti per il business.
"url": "https://www.albertocarniel.com/",Fornisci l’URL dell’organizzazione.
Di solito è la homepage.
"logo": "https://static.wixstatic.com/media/2686e0_ce8b0e616edc4c2e90ce339361cd9bed~mv2.jpg",Se guardi la seconda colonna della property logo, puoi inserire un URL oppure l’expected type ImageObject.
In questo caso ho inserito solo l’URL del logo, ma se vuoi essere più preciso puoi cliccare su ImageObject e aggiungere le sue property.
Se vuoi inserire un ImageObject, ecco un esempio JSON-LD:
"logo": {
"@type": "ImageObject",
"keywords": "Alberto Carniel, logo, signature, digital marketing consultant logo",
"url": "https://static.wixstatic.com/media/2686e0_ce8b0e616edc4c2e90ce339361cd9bed~mv2.jpg",
"creator": {
"@type": "Person",
"givenName": "Alberto",
"familyName": "Carniel"
}
},Usa la pagina di riferimento ImageObject per aggiungere property. In questo esempio, la property creator ha un expected type chiamato Person.
Di nuovo: clicca su Person e guarda le property correlate.
Il processo è sempre lo stesso.
Ricorda di chiudere tutte le parentesi graffe aperte alla fine.
"email": "alberto@albertocarniel.com",Qui è semplicissimo: dalla pagina Organization copia e incolla la property email e inserisci l’email dell’organizzazione.
"foundingDate": "2016-04-17",Come vedi nella seconda colonna, la property foundingDate ha expected type Date, ma non abbiamo usato “@type” per questa stringa.
Vediamo perché.
Clicca su Date e arrivi alla pagina di riferimento.
Qui hai due opzioni:
Inserire le property di Date, ma devi usare “@type” e strutturare la stringa come nell’esempio precedente su ImageObject;
Scrivere direttamente una data in formato ISO 8601.
Cliccando il link arrivi a una pagina Wikipedia che spiega come scrivere una data in formato internazionale.
Nel mio esempio ho usato Anno-Mese-Giorno.
"sameAs": [
"https://www.linkedin.com/in/albertocarniel/",
"https://www.instagram.com/albertocarniel91/",
"https://www.youtube.com/c/AlbertoCarniel",
"https://twitter.com/CarnielAlberto"
],Eccoci al primo array.
Non esiste una property socialMedia, communicationChannel o simili.
Se vuoi aggiungere altre pagine web che rappresentano in modo inequivocabile l’identità dell’organizzazione, devi usare la property sameAs.
Dopotutto, i profili social sono pagine web che rappresentano l’organizzazione, quindi ci stanno perfettamente.
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "5",
"ratingValue": "5",
"worstRating": "1",
"reviewCount": "30"
},Nel mio markup Organization ho deciso di inserire aggregateRating perché rappresenta una media delle recensioni (o rating, dipende da quale property usi).
Clicca su aggregateRating e arrivi alla pagina di riferimento.
Di solito il rating delle recensioni è su scala 1–5 e Google genera il rich snippet con le “cinque stelle”.
Se il punteggio massimo è 5 e il minimo è 1, inserisci “5” in bestRating e “1” in worstRating.
Somma le recensioni e inserisci il valore in reviewCount.
Io ho contato le recensioni su Yelp!, Google, LinkedIn, Facebook, UpCity e Clutch.
Se vuoi far apparire un rich snippet, io aggiungerei nella pagina un’immagine con le stelle che rappresentano la media e un testo che spiega da dove arrivano i dati.
"address": [{
"@type": "PostalAddress",
"addressCountry": "USA",
"addressLocality": "Dix Hills",
"postalCode": "XXXXX",
"streetAddress": "XXXXXXXXXXXXXXX"
},
{
"@type": "PostalAddress",
"addressCountry": "ITA",
"addressLocality": "Albignasego",
"postalCode": "XXXXX",
"streetAddress": "XXXXXXXXXXXXXXX"
}
],La property address può diventare un array complesso per aziende con più sedi.
Nella seconda colonna vediamo che possiamo inserire Text oppure l’expected type PostalAddress.
Dovresti essere super preciso, quindi usa l’expected type.
Clicca su PostalAddress, guarda la pagina di riferimento e aggiungi le property rilevanti.
La parte importante da ricordare quando scrivi questo array è che apri una parentesi quadra prima della parentesi graffa:
"address": [{La parentesi quadra indica una lista.
Racchiudi ogni item tra parentesi graffe e chiudi la lista con la parentesi quadra alla fine.
Per addressCountry, dai un’occhiata allo standard ISO 3166-1 alpha-2: puoi selezionare un country code di due o tre lettere secondo gli standard internazionali.
Se la tua organizzazione è un local business, puoi aggiungere le coordinate geografiche della sede.
A volte i motori non sono così precisi con il solo indirizzo.
Quante volte hai provato a raggiungere una destinazione e Google Maps non riesce a trovarla con precisione?
Per farlo, usa il markup localBusiness invece di Corporation/Organization.
Per essere chiari, quando apri lo script JSON-LD avrai qualcosa tipo:
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@id": "https://www.example.com/#organization",
"@type": "localBusiness",Aggiungi sia address sia la property geo del business.
Ecco un esempio di geo (coordinate dell’Art Museum di Philadelphia):
"geo": {
"@type": "GeoCoordinates",
"latitude": "39.965507",
"longitude": "-75.180859"
},Come promesso, ora ti spiego dove trovi la sintassi di questo JSON-LD.
Se scorri la pagina di riferimento PostalAddress trovi una sezione che dice che puoi trovare address come property del type GeoCoordinates.
Clicca su GeoCoordinates e scorri la pagina finché trovi la sezione che dice che puoi trovare istanze di GeoCoordinates nella property geo.
Nella seconda colonna è scritto che geo è una property del type Place.
Clicca su Place e scorri la pagina: troverai una lista di type più specifici.
Da questa lista capisci che localBusiness è considerato un tipo specifico di Place.
Significa che un Alcune property sono obbligatorie per certe applicazioni.
Per esempio, un markup localBusiness richiede name, address, image, telephone e priceRange.
Nota: testa sempre il JSON-LD con Google Structured Data Testing Tool.
Finché non ricevi errori, il markup funziona.
Come recuperi le coordinate geografiche di un posto?
Su desktop, scrivi l’indirizzo su Google Maps e clicca sul punto esatto.
Appare una piccola card con le coordinate che puoi copiare e incollare nel markup.
Su mobile, procedura simile: tieni premuto sul punto esatto.
Dopo aver “droppato” il pin, leggi le coordinate nella barra di ricerca.
Penso di aver coperto tutte le parti tricky del markup Organization e spero che ora tu sia in grado di creare qualsiasi Schema markup personalizzato da solo.
Il workshop finisce qui, ma se hai domande, scrivimi pure nei commenti.
CONCLUSIONI
I dati strutturati Schema sono fondamentali per la SEO e dovresti implementare JSON-LD nell’HTML delle pagine quando possibile.
Creare dati strutturati JSON-LD è come una caccia al tesoro: è molto improbabile ricordare a memoria ogni type e property inventati.
Scrivere Schema markup personalizzati non è facile: richiede tempo, esercizio e tanti test.
Sarò felice di rivedere i tuoi snippet JSON-LD se ti serve una mano.
Quindi scrivimi pure nei commenti qui sotto!
Riferimenti
Schema.org — homepage e mission statement.
Google Search Central — Introduzione ai dati strutturati in Google Search.
Google Search Central — Dati strutturati supportati da Google Search (Search Gallery).
Google Search Central — Test dei dati strutturati: Rich Results Test + Schema Markup Validator.
Google Search Central Blog (15 dic 2020; aggiornamenti nel 2021) — Aggiornamento sullo Structured Data Testing Tool.
Schema.org — Schema Markup Validator (validator.schema.org).
Google Search Central Blog (8 ago 2023; aggiornamento 14 set 2023) — Cambiamenti ai rich result HowTo e FAQ.
Search Engine Land (16 set 2019) — Google fa crackdown su alcuni review rich results (self-serving reviews).
Recap John Mueller AMA — Bill Hartzer (28 mar 2018): i dati strutturati aiutano comprensione e ranking “dove è rilevante” (con caveat).
Paul Haahr — How Google Works: A Ranking Engineer’s Perspective (SMX West 2016) — riferimenti slide/video.
Tweet di Danny Sullivan (25 mar 2015) sui click osservati per valutazione; incertezza sull’uso diretto per ranking.
Search Engine Land (25 set 2023) — discussione su come Google usa i click soprattutto per valutazione e sperimentazione (Gary Illyes).
WordStream (aggiornato 25 gen 2024) — ragionamento e grafici su CTR vs CTR atteso, resi popolari dal lavoro di Larry Kim.— CTR vs expected CTR reasoning and charts popularized by Larry Kim’s work.
Commenti