Come installare dati strutturati con Tag Manager

grafico dati strutturati

Gli structured data, o dati strutturati, sono un linguaggio di descrizione dei dati che utilizza i tag come lingua (i cosiddetti markup), i quali vengono utilizzati per fornire informazioni più specifiche sugli elementi che compongono il testo.

Tra gli structured data più utilizzati annoveriamo i rich snippet, i sitelink, i breadcrumbs, le reviews e la search box. 

Che cosa sono i Rich Snippet?

I rich snippet sono una serie di elementi, esclusi il title, la description e l’URL del sito (questi elementi si chiamano semplicemente snippet) che compaiono all’interno delle SERP di Google.

Tra i più utilizzati vi sono i prezzi dei prodotti contenuti negli e-commerce, l’autore di un articolo, la recensione di un oggetto. Come indicato anche dalla guida di Google, i formati degli structured data accettati sono JSON-LD, microdata e RDFa (il primo metodo è quello consigliato dal colosso di Mountain View).

Rating - Structured data

Tutti gli structured data sono visibili dalle SERP?

No. Nel caso dei breadcrumb, la loro funzione è quella di fornire una catena di link visibilo nella pagina, per segnalarne la posizione all’interno della struttura del sito (un esempio: homepage > pagina categoria > pagina visitata). Da poco tempo, Google rileva la presenza di attinenze tra argomenti e li visualizza nelle SERP come breadcrumb.

Possiamo scegliere quando rendere visibili i dati strutturati?

Non esattamente, a parte i dati che servono per migliorare l’usabilità interna del sito, la sezione visibile nelle ricerche è presente a discrezione di Google. In alcuni casi particolari, come per i sitelink, la loro presenza non può essere segnalata in nessuna maniera al motore di ricerca, ne si può scegliere quali saranno i link visibili oltre il title.

Un altro caso limite è quella delle recensioni di Google, presenti nell’account di Google My Business. Pur essendo un elemento che appartiene in una certa maniera al sito, le linee guida vietano di segnalarle all’interno delle pagine, con gli appositi snippet (review).

Attivare i dati strutturati sul sito

Esistono più metodi per inserire i dati strutturati all’interno del sito; in questo articolo ho deciso di spiegare in maniera semplice un metodo che non richiede la conoscenza di linguaggi di programmazione, ma solo l’installazione del codice di Google Tag Manager nel sito.

Utilizzo il sistema di script con dati nel formato LD-JSON.

Se il vostro sito utilizza WordPress, basta installare il plugin dedicato al tool, altrimenti potete seguire queste semplici istruzioni.

Una volta installato Tag Manager, basta selezionare il pulsante Tag dal menu laterale e premere su NUOVO.

In questa fase dobbiamo scegliere il nome e la tipologia di tag, selezionare in quale pagine verrà attivato il tag. 

In questa prima fase selezioniamo All Pages come attivatore di azionamento, e andiamo a inserire i dati che ci interessato all’interno di un tag di tipo HTML personalizzato.

Inseriamo il codice descritto sotto e compiliamo i dati a piacimento. I dati possono essere statici, inseriti direttamente sul tag HTML personalizzato, o generato dinamicamente da una variabile.

Vi consiglio di guardare il video per avere una maggiore chiarezza.

Parte pratica

  • Creazione Tag: clicca sul menu a sinistra della tua Area di Lavoro all’interno di Tag Manager e seleziona la voce Tag.
  • Configurazione Tag: inserisci un nome, un tag di tipo HTML personalizzato e un attivatore (per iniziare va bene All Pages).
  • Creazione HTML personalizzato: (vedi codice sotto).
  • Campi variabili: Una volta realizzato lo scheletro dello script, puoi creare dei campi che devono assumere valori differenti in base alla pagina, crea una variabile e utilizza il nome all’interno del campo relativo, racchiudendola tra parentesi {{nome variabile}}.
 Inserisci e compila il seguente codice:
(function(){ var data = {
"@context": "http://schema.org",
"@type": "INSERISCI QUI",
"logo" : {
"@type": "ImageObject",
"url": "INSERISCI L'URL DEL TUO LOGO",
"height": INSERISCI QUI,
"width": INSERISCI QUI },
"areaServed": ["IT"],
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "INSERISCI TELEFONO",
"contactType": "INSERISCI IL TIPO DI CONTATTO" }],

"address": {
"@type": "PostalAddress",
"addressCountry": "IT",
"addressLocality": "INSERISCI QUI",
"addressRegion": "Italy",
"postalCode":"INSERISCI CAP",
"streetAddress": "INSERISCI VIA" },

"description": "DESCRIZIONE DELL'ORGANIZZAZIONE ",
"name": "INSERISCI NOME ORGANIZZAZIONE",
"founder": "NOME FONDATORE",
"foundingDate": "DATA NEL FORMATO ANNO.MESE.GIORNO",
"telephone": "(0039) TELEFONO",
"url": "INSERISCI URL ",
"sameAs" : ["URL FACEBOOK", "URL TWITTER", "URL LINKEDIN"] }

var script = document.createElement('script'); script.type = "application/ld+json"; script.innerHTML =JSON.stringify(data); document.getElementsByTagName('head')[0].appendChild(script); })(document);

Creare dati strutturati personalizzati

L’esempio qui sopra è solo un tipo di dato strutturato inseribile, ma il metodo per inserire gli altri non differisce molto.

Nella pratica, basta sostituire o aggiungere i campi che ci interessano all’interno dello schema che ho creato e funzionerebbe comunque.

Es. voglio inserire un dato strutturato che segnali a Google quali sono gli elementi più importanti della testata del mio sito. Prendo lo schema inserito sopra, apro il sito Schema.org e seleziono le voci che mi interessano dalla pagina dedicata all’header.

Una volta inserite le voci nello script, le compilo:

(function(){ var data = {

“@context”: “http://schema.org”,

“@type”: “WPHeader”,

“author” : {

“@type”:”Person”,

“name”:”Francesco Giammanco” },

“url” : “https://www.francescogiammanco.it”,

“sameAs” : [“https://www.francescogiammanco.it/consulenza-seo-marketing/”, “https://www.francescogiammanco.it/contatti/”, “https://www.francescogiammanco.it/category/seo-sem/”, “https://www.francescogiammanco.it/sedi-consulenza/”, “https://www.francescogiammanco.it/analisi- seo/”, “https://www.facebook.com/francescogiammanco/”, “https://twitter.com/giammancof”, “https://www.linkedin.com/in/francesco-giammanco/”],

“funder” : {

“@type”: “Organization”,

“name”: “Francesco Giammanco”} }

var script = document.createElement(‘script’); script.type = “application/ld+json”; script.innerHTML =JSON.stringify(data); document.getElementsByTagName(‘head’)[0].appendChild(script); })(document);

Come vedete le voci sono un pò differenti, ma la struttura del codice rimane immutata.

Nel caso in cui vorrei inserire degli elementi variabili (es. segnalare qual’è il testo di una pagina all’interno del dato strutturato CreativeWork), devo andare sulla voce di menu Variabili presente in Area di Lavoro di Tag manager, cliccare su NUOVA e selezionare un nome ed Elemento DOM dall’elenco dei tipi di variabili. 

Compilare il campo Elemento DOM selezionando un ID o un Selettore CSS all’interno del quale è contenuto il dato che vogliamo inserire nel dato strutturato.

Es. Voglio inserire la data di pubblicazione del mio articolo su WordPress dentro un dato strutturato. Creo una variabile (nome SCHEMA – entry-date), seleziono il meta che contiene la proprietà che genera la data di creazione e indico che sono interessato alla compilazione dell’attributo content.

Variabile di Schema.org

Inserisco il nome della variabile nella voce relativa nel mio tag script:

tag SCHEMA CreativeWork

Per controllare che lo script sia corretto, basta attivare la modalità Anteprima di tag manager, oppure guardare i dati inseriti nella pagina tramite lo strumento di test dei dati strutturati.

Nel caso in cui le operazioni vi risultassero troppo complicate, consultate un consulente di fiducia.

starstarstarstarstar5.00 / 1 voto / i

Related Posts

Se ti è piaciuto l'articolo, iscriviti alla Newsletter

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.