Vai al contenuto principale
Marchio di fiducia del webshop e recensioni ValuedShops
  • Aumentare la fiducia e le vendite
  • Il prezzo più basso
  • Raccogliere automaticamente le recensioni

Programmare il mark-up per i negozi web

Scritto da Bob van Biezen
 

I membri di eMany conosceranno le stelle gialle di Google di cui si è parlato in precedenza in questo blog. Anche le immagini dei video e il prezzo o lo stato delle scorte di un prodotto sono esempi di aggiunte supplementari che vengono mostrate nei risultati di ricerca. Per beneficiare di questi cosiddetti "Rich snippet", dovrete dare una mano ai motori di ricerca. Per farlo, aggiungete al vostro sito web dei codici aggiuntivi (structured data mark-up). Questo permette ai motori di ricerca non solo di leggere ciò che è scritto, ma anche di capire cosa si intende.

Un esempio di rich snippet

I rich snippet sono le aggiunte extra che Google mostra nei risultati di ricerca. Questi possono garantire un CTR (click through rate) più elevato e quindi un maggior numero di visitatori per il vostro negozio web.

Voorbeeld van Schema markup in de zoekresultaten

Esempio di markup Schema nei risultati di ricerca

I rich snippet esistono in Google dal 12 maggio 2009.

Cosa sono i dati strutturati?

I dati strutturati sono il nome collettivo dei dati nome-valore che vengono aggiunti come codice supplementare al vostro sito web. Insieme ai contenuti del sito, aiutano i motori di ricerca a identificare, classificare e indicizzare le informazioni. Esistono diversi metodi per chiarire i contenuti per i motori di ricerca. Ad esempio, la specifica HTML5 dei dati strutturati si chiama " Microdata". Altri formati di dati strutturati ben noti sono RDFa e JSON-LD . È bene non includere gli stessi dati strutturati in formati diversi, perché ciò può creare confusione nei motori di ricerca.

Un esempio di dati strutturati

Immaginate di vendere aspirapolvere nel vostro negozio web. Ora avete una pagina su un aspirapolvere specifico con il nome, il prezzo, l'immagine, una breve descrizione e alcune caratteristiche del prodotto. Il vostro codice HTML ha un aspetto simile a questo:

<div> <h1>Philips FC8477 PowerPro Compact</h1> <div>Ora a €1.150,99</div> <img src="/images/-FC8477-powerpro-compact.jpg" /> <div>Il Philips FC8477 PowerPro Compact è un aspirapolvere senza sacco economico con una potenza di 750 watt. Questo aspirapolvere è particolarmente adatto per i tappeti a pelo corto.</div> <div>Marchio: Philips</div> <div>Colore: Nero</div> </div> </div> </div>

Quando si aggiungono i microdati, il codice sorgente avrà l'aspetto seguente:

<div itemscope itemtype="https://schema.org/Product" > < h1 itemprop="name ">Philips FC8477 PowerPro Compact</h1> <div itemprop="offers" itemscope itemtype="https://schema.org/Offerta" > Ora per <span itemprop="priceCurrency" content="EUR ">€</span> <span itemprop="price" content="1150.99 ">1.150,99</span> </div> <img itemprop="image " src="/images/-FC8477-powerpro-compact.jpg" /> <div itemprop="description ">Il Philips FC8477 PowerPro Compact è un aspirapolvere senza sacco economico con una potenza di 750 watt. Questo aspirapolvere è particolarmente adatto per tappeti a pelo basso.</div> <div>Marchio: <span itemprop="brand ">Philips</span></div> <div>Colore: <span itemprop="color ">Nero</span></div> </div>

Se si osservano i codici aggiuntivi (evidenziati in verde), si vedrà item type="schema.org/Product " in alto e item type="schema.org/Offer " in seguito. Ciò indica che questa pagina riguarda un aspirapolvere che può essere venduto a un certo prezzo. In questo modo, l'esempio chiarisce il nome, il prezzo, la valuta, l'immagine del prodotto, la descrizione, la marca e il colore dell'aspirapolvere.

Che dire dello schema mark-up?

Schema.org è lo standard principale per il mark-up dei dati strutturati. Nasce da una collaborazione del 2011 tra Google, Bing e Yahoo. Nel frattempo, anche la russa Yandex supporta schema.org. Si può pensare a schema.org come a una grande libreria di tutti i possibili chiarimenti che si possono aggiungere a un sito web. Il mark-up di Schema è implementabile con tutti i formati di dati strutturati più diffusi (Microdata, RDFa, JSON-LD). Esistono diversi "schemi", ciascuno con un proprio scopo. Ad esempio, esistono schemi per prodotti , persone , aziende , recensioni , eventi ecc. Alcuni di questi schemi possono essere definiti in modo più specifico. Ad esempio, se avete un negozio di scarpe, potete indicarlo come Local Business , ma anche come Store o addirittura ShoeStore . È importante definire uno schema nel modo più specifico possibile, in modo che i motori di ricerca possano capire meglio di cosa si sta parlando. Per questo motivo, quando si aggiunge lo schema mark-up al proprio sito web , bisogna sempre consultare l 'elenco completo degli schemi.

I vantaggi dello schema mark-up

In quanto negozio online, è naturale che vogliate sapere quali vantaggi vi porterà l'implementazione dello schema mark-up. I vantaggi SEO dell'implementazione sono tre:

  1. Aumentano in modo significativo le possibilità di visualizzazione dei rich snippet per il vostro sito web. Questo può portare a un aumento del CTR e quindi a un maggior numero di visitatori del vostro sito web. Un caso di studio del 2011 su Independer.nl ha misurato un risultato del 28% di CTR in più grazie alla presenza di snippet di recensioni nei risultati di ricerca.
  2. I motori di ricerca comprendono meglio i contenuti del vostro sito web e possono distinguere le pagine i cui argomenti si sovrappongono. In un caso di studio del 2015, ciò ha persino portato al recupero del traffico di ricerca su un sito web che era stato declassato a causa dell'introduzione di alcuni aggiornamenti Panda.
  3. Poiché i motori di ricerca comprendono meglio i vostri contenuti, il vostro sito web può essere visualizzato nelle ricerche a cui non eravate precedentemente associati.

L'utilizzo dello schema mark-up è la migliore pratica per presentare i contenuti ai motori di ricerca. Quindi, anche se non è utilizzato da Google come fattore di ranking, potete sicuramente trarne vantaggio.

Schema mark-up rilevante per l'e-commerce

Per i siti di e-commerce, c'è un'enorme quantità di informazioni da etichettare con lo schema mark-up. Di seguito sono elencate le possibilità più importanti. Sebbene questo elenco sia abbastanza esaustivo, potrebbero essere disponibili ulteriori markup per il vostro settore specifico.

Schema di base per i prodotti

Il margine di ricarico opzionale per i prodotti

Markup della recensione

Il markup della recensione aiuta a ottenere le stelle gialle su Google.

Se si utilizza un sistema di recensioni che non utilizza una scala a 5 punti, indicare anche la valutazione più bassa e quella più alta possibile .

Formattazione delle singole recensioni

Schema di mark-up relativo all'organizzazione

Questo mark-up viene generalmente aggiunto solo nella pagina dei contatti e/o nel piè di pagina. Sebbene sia utilizzato anche per le aziende locali (schema local business), non fa mai male aggiungerlo.

Oltre alle possibilità menzionate in precedenza, ci sono diverse situazioni in cui il markup aggiuntivo può essere interessante. Blog - è interessante quando sul vostro negozio web avete un blog vivace in cui c'è un'effettiva interazione con il vostro pubblico di riferimento e/o più persone scrivono su di esso. Medicina - quando si forniscono prodotti o informazioni mediche, è disponibile una formattazione aggiuntiva. Giochi , film o musica - All'interno di queste categorie sono disponibili molte formattazioni aggiuntive. Libri o audiolibri - La formattazione aggiuntiva è disponibile anche per i prodotti disponibili in più lingue . Come si è visto, il mark-up Schema offre un numero enorme di possibilità. Quando si inizia a implementarlo, è bene determinare innanzitutto quali sono i dati più importanti del proprio sito web. In questo modo si evita di spendere tempo, denaro o energia per implementare markup non necessari.

Aggiungere il markup Schema

Esistono due modi per aggiungere dati strutturati al vostro sito web. Uno è l'aggiunta del markup schema al codice del vostro sito web, l'altro è l'utilizzo di Google Data Highlighter .

Implementazione nel vostro sito web

Come web shop, spesso dovete affidarvi a un programmatore esterno per aggiungere i dati strutturati direttamente al codice del vostro sito web. A differenza di molte altre funzioni, spesso non sono disponibili plugin o moduli aggiuntivi per questo scopo. Tuttavia, esistono strumenti che possono aiutare a generare il codice. In pratica, però, il layout aggiuntivo dovrà essere aggiunto al software esistente da qualcuno che conosca la programmazione del sistema del vostro negozio.

Diversi metodi di implementazione

Come indicato in precedenza, il markup dello schema può essere implementato in tre formati di dati strutturati. Si tratta di Microformati, RDFa e JSON-LD. Google preferisce JSON-LD . Detto questo, la scelta del formato si basa principalmente sul sistema CMS o sulle preferenze del programmatore. Il metodo tecnicamente più semplice dovrebbe essere quello da utilizzare in questo caso.

Esempi pratici

Abbiamo implementato molti dei mark-up dello schema discussi in questo articolo nel webshop premium-hookahs.com . Il codice sorgente delle pagine dei prodotti è un buon esempio. Qui l'enfasi è sul markup relativo al prodotto e sul markup relativo alle recensioni. Anche il nostro sito web può essere utilizzato come esempio. Qui si può vedere come vengono implementate molte cose relative all' organizzazione con i microdati (si noti l'elemento itemprop ). Soprattutto il codice sorgente della pagina dei contatti lo mostra bene. Inoltre, si può notare che "SameAs" nel piè di pagina è stato utilizzato per indicare quali pagine riguardano lo stesso oggetto. Quindi può trattarsi di pagine interne al vostro sito web o esterne, ad esempio su Wikipedia.

Implementazione tramite Google Search Console

Google offre un'alternativa alla (difficile) implementazione tecnica dei dati strutturati sul vostro sito web. Lo fa attraverso il Data Highlighter, disponibile alla voce "Formattazione della ricerca" -> "Evidenziazione dei dati" di Google Search Console . Questo strumento consente di evidenziare le sezioni del sito web con la formattazione appropriata direttamente in un'interfaccia visiva. Google è anche in grado di rilevare gli schemi, quindi questo metodo può essere applicato anche a negozi web di grandi dimensioni. Anche se si tratta di un'ottima alternativa, ci sono diverse limitazioni che spesso richiedono l'intervento di un programmatore per una completa implementazione. I limiti di Data Highlighter

  1. Data Highlighter è uno strumento di Google. Altri motori di ricerca non possono utilizzare questi dati.
  2. La funzionalità di Data Highlighter è limitata. Di conseguenza, è possibile applicare solo il 50% circa della formattazione discussa in questo blog.
  3. Quando le informazioni sui prodotti sono nascoste dietro le schede, non possono essere formattate con Data Highlighter.
  4. Quando la struttura HTML del sito web cambia, potrebbe essere necessario reimpostare Data Highlighter.

Test dei dati strutturati

Per verificare se l'implementazione è avvenuta con successo sul vostro sito web, potete utilizzare lo Strumento di test dei dati strutturati di Google. Qui è possibile verificare per ogni URL quali dati strutturati sono o non sono riconosciuti dal bot di Google. È inoltre possibile utilizzare questo strumento per generare esempi di layout. Infine, attraverso Search Console, Google consente di valutare lo stato attuale del sito e di identificare eventuali errori nel markup. Se non avete ancora uno schema di markup sul vostro sito, troverete il messaggio "Non abbiamo rilevato alcun dato strutturato sul tuo sito" o "Non rileviamo alcun dato strutturato sul tuo sito". Sono curioso di sapere quale schema di markup avete già nel vostro webshop e qual è la vostra esperienza in merito. Se avete domande o osservazioni, mi piacerebbe sentirle nei commenti!