Installare i dati strutturati con Tag Manager

Pubblicato: Agosto 7, 2018
Autore: Francesco Giammanco
Dati strutturati co Tag Manager

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 Analytics 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

 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.

Dati strutturati su Google Assistant

Ho già parlato della voice search, di Google Assistant e delle Google Action (o Action on Google) per quanto riguarda le nuove necessità legate alla ricerca vocale passanti invariabilmente per i dati strutturati.

Di fatto, per generare degli attivatori validi per la ricerca vocale c'è bisogno di comunicare a Google Assistant le informazioni presenti nel sito in un formato ad esso comprensibile.

Sebbene il numero di azioni sia al momento limitato, sono certo che in futuro si potranno compiere molte più operazioni che utilizzeranno la stessa modalità di riconoscimento dei dati online.

Google Assistant

Inserimento dei dati strutturati per le Google Action

Nell'articolo sulla voice search ho chiarito che gli schemas con attivatori per Google Action che utilizzano dati strutturati sono quattro, e ognuno di essi ha dei parametri da conoscere per poterli usare portando a sé un risultato.

Per rendere più efficace questo articolo, alla fine di ogni schema aggiungerò un esempio di informazioni da aggiungere a Google Tag Manager, o nel caso in cui non lo utilizzasse gli stessi dati saranno validi per essere modificati manualmente.

Utilizzare delle variabili per catturare i dati

Nonostante gli esempi risulteranno formattati in JSON-LD e i campi all'interno saranno compilati normalmente, sarebbe il caso di utilizzare le variabili di Tag Manager per permettere al tool di recuperare i dati all'interno di ogni pagina che risponda al pattern di nostro interesse.

Ricette

I dati strutturati delle ricette sono tra i più completi, e non hanno bisogno di specifiche particolari se non di una accurata compilazione dei campi.

Ricerca con Google Assistant

A riguardi, Google mette a disposizione Per maggiori informazioni in un articolo dedicato alle ricette.

Le ricette hanno inoltre bisogno di attenzioni particolari per renderle visibili nei carousel di Google, tanto che quest'ultimo ci consiglia di creare una pagina di riepilogo di tutte le ricette di uno stesso tipo, e di inserirle in uno specifico ItemList, così da aumentare le chance che la ricetta venga percepita da Google nella modalità sopra citata.

Infine, bisogna effettuare una specifica richiesta a Google tramite questo form.

Esempio di dati strutturati per le ricette

Google fornisce una pagina con i dati necessari per la visualizzazione, che è necessario seguire (eliminate le informazioni sullo script se dovete utilizzarlo direttamente sulle pagine del sito):

<script>
(function(){
var data = {
"@context": "http://schema.org",
"@type": "Recipe",
"datePublished": "2016-01-01T00:00:00",
"dateModified": "2017-02-01T00:00:00",
"name": "Tiramisù",
"recipeCategory": "dolci",
"estimatedCost": "basso",
"image": "https://www.tuosito.it/image.png",
"description": "inserisci qui la description della pagina",
"prepTime": "PT30M",
"cookTime": "PT0M",
"totalTime": "PT30M",
"recipeIngredient": "Savoiardi 400g",
"recipeIngredient": "Zucchero 110g",
"recipeIngredient": "4 uova medie",
"recipeIngredient": "Caffé zuccherato a piacere (320g)",
"recipeIngredient": "Cacao amaro q.b.",
"recipeInstructions": "scrivere qui le istruzioni della preparazione della ricetta",
"recipeInstructions": "se è divisa in più segmenti continuate ad aggiungere sezioni, non c'è un limite",
"cookingMethod": "piatti freddi",
"author" : {
"@type": "Organization",
"name": "Nome della tua azienda"
},

"interactionStatistic" : {
"@type": "InteractionCounter",
"userInteractionCount": "100",
"interactionType" {
"@type" : "Action",
"name" : "http://schema.org/CommentAction"
}
},
"nutrition" : {
"@type": "NutritionInformation",
"calories": "644 kcal",
"carbohydrateContent": "52.2 g",
"sugarContent": "33.5 g",
"fatContent": "38.8 g",
"saturatedFatContent": "22.49 g",
"fiberContent": "1.8 g",
"cholesterolContent": "289 g",
"sodiumContent" : "172 g"
}
"aggregateRating" : {
"@type": "AggregateRating".
"bestRating" : "10",
"ratingCount": "15",
"ratingValue": "9,8"
},
"keywords: "tiramisù"
}
var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML =JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script);
})(document);
</script>

News

La dicitura news è corretta solo in parte, visto che all'interno di questa categoria vengono inclusi tutti gli articoli che possono essere visualizzati su Google News.

La vera differenza di formattazione dei dati riguarda la presenza o meno di una versione AMP della pagina: nel primo caso basta seguire la guida per AMP e inserire almeno le seguenti proprietà:

In aggiunta, e questo passaggio è valido anche per la versione non-AMP, bisogna registrarsi nel nuovo Centro Editori di Google.

Esempio nella versione valida per le AMP:

<script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Article headline",
        "image": ["thumbnail1.jpg"],
        "datePublished": "2015-02-05T08:00:00+08:00"
      }
    </script>

How-To (guida personalizzata)

Si tratta della categoria più laboriosa da un punto di vista di setup delle informazioni, ed è l'unica che non viene caricata negli Smart Display ma solo da Google Assistant.

La lista delle informazioni da inserire è vasta e si trova all'interno della guida How-To di Google, in cui è presente anche una lista relativa alla pubblicazione dei contenuti:

Nel caso della guida personalizzata e di altre azioni specifiche, Google ha creato dei template specifici, da compilare velocemente. Il template dell'esempio riguarda le guide personalizzate relative ai video.

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "HowTo",
"image": {
"@type": "ImageObject",
"url": "https://example.com/1x1/photo.jpg"
},
"name": "How to tie a tie",
"description": "The four-in-hand knot is a great look for any occasion. From formal suits to casual jacket and tie affairs, it’s a simple way to quickly look great. Once you have mastered the knot you can tie it in just a minute, so it’s also great when you’re in a pinch too. ",
"totalTime": "PT2M",
"video": {
"@type": "VideoObject",
"name": "Tie a Tie",
"description": "How to tie a four-in-hand knot.",
"thumbnailUrl": "https://example.com/photos/photo.jpg",
"contentUrl": "http://www.example.com/videos/123_600x400.mp4",
"embedUrl": "http://www.example.com/videoplayer?id=123",
"uploadDate": "2019-01-05T08:00:00+08:00",
"duration": "P1MT10S"
},
"supply": [
{
"@type": "HowToSupply",
"name": "A tie"
}, {
"@type": "HowToSupply",
"name": "A collared shirt"
}
],
"tool": [
{
"@type": "HowToTool",
"name": "A mirror"
}
],
"step":[
{
"@type": "HowToStep",
"name": "Preparations",
"text": "Button your shirt how you’d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.",
"image": "https://example.com/1x1/step1.jpg",
"url": "https://example.com/tie#step1"
}, {
"@type": "HowToStep",
"name": "Crossing once",
"text": "Cross the long end over the short end. This will form the basis for your knot.",
"image": "https://example.com/1x1/step2.jpg",
"url": "https://example.com/tie#step2"
}, {
"@type": "HowToStep",
"name": "Second crossing",
"text": "Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.",
"image": "https://example.com/1x1/step3.jpg",
"url": "https://example.com/tie#step3"
}, {
"@type": "HowToStep",
"name": "Loop in",
"text": "Now pull the long end through the loop near your neck, forming another loop near your neck.",
"image": "https://example.com/1x1/step4.jpg",
"url": "https://example.com/tie#step4"
}, {
"@type": "HowToStep",
"name": "Pull and tighten",
"text": "Pull the long end through that new loop and tighten to fit!",
"image": "https://example.com/1x1/step5.jpg",
"url": "https://example.com/tie#step5"
}
]
}
</script>

FAQ

Si tratta di un dato strutturato largamente usato, che come il precedente ha molteplici applicazioni e che di fatto è possibile comporre a piacere, ma sempre seguendo le guidelines di Google:

Di seguito un esempio da caricare direttamente sul sito. Nel caso in cui se ne volesse fare una copia per Google Tag Manager, basterà sostituire l'intestazione con quella dello schema Recipe.

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "What is the return policy?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Most unopened items in new condition and returned within <strong>90 days</strong> will receive a refund or exchange. Some items have a modified return policy noted on the receipt or packing slip. Items that are opened or damaged or do not have a receipt may be denied a refund or exchange. Items purchased online or in-store may be returned to any store.<br /><p>Online purchases may be returned via a major parcel carrier. <a href=http://example.com/returns> Click here </a> to initiate a return.</p>"
}
}, {
"@type": "Question",
"name": "How long does it take to process a refund?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We will reimburse you for returned items in the same way you paid for them. For example, any amounts deducted from a gift card will be credited back to a gift card. For returns by mail, once we receive your return, we will process it within 4–5 business days. It may take up to 7 days after we process the return to reflect in your account, depending on your financial institution's processing time."
}
}, {
"@type": "Question",
"name": "What is the policy for late/non-delivery of items ordered online?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Our local teams work diligently to make sure that your order arrives on time, within our normaldelivery hours of 9AM to 8PM in the recipient's time zone. During busy holiday periods like Christmas, Valentine's and Mother's Day, we may extend our delivery hours before 9AM and after 8PM to ensure that all gifts are delivered on time. If for any reason your gift does not arrive on time, our dedicated Customer Service agents will do everything they can to help successfully resolve your issue. <br/> <p><a href=https://example.com/orders/>Click here</a> to complete the form with your order-related question(s).</p>"
}
}, {
"@type": "Question",
"name": "When will my credit card be charged?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We'll attempt to securely charge your credit card at the point of purchase online. If there's a problem, you'll be notified on the spot and prompted to use another card. Once we receive verification of sufficient funds, your payment will be completed and transferred securely to us. Your account will be charged in 24 to 48 hours."
}
}, {
"@type": "Question",
"name": "Will I be charged sales tax for online orders?",
"acceptedAnswer": {
"@type": "Answer",
"text":"Local and State sales tax will be collected if your recipient's mailing address is in: <ul><li>Arizona</li><li>California</li><li>Colorado</li></ul>"}
}]
}
</script>

Error!
No 'CRP_Widget' widget registered in this installation.

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.