Come scrivere i dati strutturati in JSON-LD

Team Avantgrade
11 Luglio 2019

Ti piacerebbe ottenere visualizzazioni SERP interessanti e classifiche migliorate?

Vorresti comprendere le principali funzioni e il linguaggio di JSON-LD, tanto apprezzato da Google?

JSON-LD (JavaScript Object Notation for Linked Data) è un metodo utilizzato per effettuare lo scambio di dati. Questa tecnologia esiste da tempo ed è utile per scrivere e leggere informazioni in modo organizzato.

Perché utilizzarlo? Questo strumento è molto intuitivo e di facile lettura sia per le persone che lo utilizzano sia per le macchine che devono analizzarne la sintassi. Invece di aggiungere dati ai singoli elementi di una pagina, JSON-LD ti consente di fornire un blocco di codice che contiene tutte le informazioni di cui hai bisogno.

Il linguaggio di JSON-LD

JSON possiede un linguaggio specifico che è necessario conoscere per poter scrivere in modo corretto i dati strutturati.

Di seguito alcuni campi importanti che si utilizzano per delineare le informazioni presenti su una pagina web, scatenando una serie di effetti positivi.

  • parentesi graffe: i dati strutturati sono inseriti all’interno delle parentesi graffe. Ce ne sarà una iniziale, aperta subito dopo il tag di apertura <script>, e una finale, chiusa prima della chiusura </script>. Le parentesi graffe possono anche essere interne qualora si volesse inserire un secondo “type” all’interno di una stessa proprietà
  • virgolette: vengono utilizzate per racchiudere uno schema, una proprietà o un campo
  • virgole: vengono utilizzate per inserire informazioni aggiuntive
  • due punti: fungono da separatori tra i campi e permettono di completare l’inserimento di informazioni
  • parentesi quadre: vengono inserite quando all’interno di una sola proprietà sono incluse più voci. La parentesi quadra chiusa viene inserita subito prima della parentesi graffa chiusa

Come creare un markup di dati strutturati

Generatore online

Per realizzare dei markup di dati strutturati, una buona soluzione è selezionare un generatore online, facile e intuitivo da utilizzare anche per i meno esperti. 

Utilizzando ad esempio schema.org è possibile, inserendo le informazioni in poche e semplici mosse, realizzare dei markup di base completi.

Editor di testo

I markup di base online offrono una buona soluzione predefinita.

Se si desidera andare oltre e personalizzare i propri dati strutturati, è necessario fare uno sforzo in più ed utilizzare un editor di testo. 

Inserendo i dati strutturati predefiniti all’interno dell’editor, si ha un punto di partenza.

Da qui sarà poi possibile incorporare un maggior numero di dati (su Schema.org sono presenti dati specifici come indirizzo, numero di telefono, mail, ecc. con i dettagli di come deve essere effettuato l’inserimento) che andranno inseriti singolarmente prima della parentesi graffa ponendo una virgola subito dopo l’ultimo elemento già presente. 

Per realizzare dei markup personalizzati e modificabili si può utilizzare un editor di testo come Sublime Text, nel quale incollare i markup predefiniti.

Per impostare la sintassi in modo corretto basterà cliccare su sintassi – JavaScript – JSON.

Creare un Array complesso

Se si dovessero inserire dati complessi (che si ripetono, ad esempio due indirizzi) bisognerà fare particolare attenzione alla forma. 

In questo caso non basterà inserire la virgola tra un dato e l’altro, ma andranno inseriti come due gruppi ben distinti e differenziati da una parentesi graffa.

 “address”: 

[

{

“@type”: “PostalAddress”,

“addressLocalty”: “-”,

“adressRegion”: “-”,

“postalCode”: “-”,

“streetAddress”: “- ”

}

“@type”: “PostalAddress”,

“addressLocalty”: “-”,

“adressRegion”: “-”,

“postalCode”: “-”,

“streetAddress”: “- ”

}

]

Dopo la voce address è stata inserita una grande parentesi quadra, all’interno della quale sono state inserite 2 parentesi graffe contenenti i dati relativi all’indirizzo, divisi tra loro dalla classica virgola.

Risolvere eventuali errori con facilità

Quando si scrivono codici, l’errore o la piccola dimenticanza sono dietro l’angolo.

Esistono delle funzioni sui portali online che permettono di identificare con facilità possibili errori.

Impostando la sintassi su JSON, Sublime Text evidenzia tutti gli errori commessi nel codice realizzato.

C’è da fare una piccola precisazione su Sublime Text. Purtroppo l’evidenziazione degli errori non è sempre cosi immediata perché potrebbe indicare tre differenti situazioni:

– l’errore è l’elemento evidenziato

– l’errore si trova all’interno della linea evidenziata

– l’errore si trova nel campo precedente 

Una piccola chicca: Sublime Text, oltre ad aiutare nell’identificazione degli errori, agevola il lavoro nella creazione dei dati strutturati dando la possibilità di evidenziare i diversi gruppi. Questo permette di avere una lettura più immediata e velocizzare i successivi inserimenti. 

In alternativa si può utilizzare lo strumento di test per i dati strutturati di Google. Basterà inserire/creare il proprio codice all’interno dello spazio e gli eventuali errori verranno automaticamente segnalati con una X in rosso a lato del numero della riga.

Ora non ti resta che effettuare la convalida dei dati e avrai dei dati strutturati precisi da poter inserire all’interno del tuo sito.

Come inserire i dati strutturati nel sito

Esistono tre principali soluzioni per inserire i dati strutturati all’interno di un sito.

Inserimento manuale

Per inserire manualmente il codice è necessaria la codificazione del Json all’interno della pagina dove il dato strutturato deve essere presente.

Inserimento tramite plugin

Se il sito è gestito con un Cms come WordPress, Joomla o Magento, esistono diversi plugin che possono aiutarti a inserire i dati strutturati limitando la possibilità di errore. 

In particolare consigliamo:

Inserimento con Google Tag Manager

Un’altra soluzione è l’inserimento con Google Tag Manager tramite un HTML personalizzato scegliendo come attivatore le pagine dove il dato strutturato deve essere presente.

Il nostro consiglio è comunque di inserirli manualmente all’interno della pagina per evitare codice in più e performance ridotte a causa del plugin, o problemi di lettura del crawler di Google con Tag Manager in quanto il dato strutturato viene iniettato successivamente nel codice tramite il contenitore.

Comprendere la scrittura dei dati strutturati è nell’interesse del tuo sito web, dato che questi rappresentano uno dei modi in cui Google raccoglie le informazioni dal web.

Alice Tarantola
11 Ottobre 2019

Diritto all’oblio: come pulire la SERP di Google

Le nuove tecnologie messe a nostra disposizione, hanno reso semplice la pubblicazione di nuovi contenuti sul web, anche se non si è degli esperti del settore. Questi contenuti, però, possono essere considerati negativi o andare ad attaccare la reputazione online di un singolo o di un’azienda. Quando questo accade,…

approfondisci
Alice Tarantola
20 Settembre 2019

Embed di Instagram: possibili problemi lato SEO?

Instagram, come molti altri portali, offre la possibilità di incorporare i suoi contenuti per poterli condividere su un sito web. Il post appare con la medesima grafica di Instagram e permette ai siti di mostrare i contenuti esattamente come sono stati condivisi, dando la corretta attribuzione con il nome…

approfondisci