Hai realizzato un sito e-commerce? Allora questa informazione è per te.
Google ha aggiornato le sue linee guida sul modo in cui dovresti gestire i dati strutturati delle tue schede prodotto.
Se vuoi che i tuoi prodotti compaiano nei risultati di ricerca in modo ottimale, ci sono 2 nuove regole che dovresti assolutamente considerare.
1. Metti il markup direttamente nell’HTML
Se gestisci un negozio online, devi assicurarti che Google sia in grado di comprendere al meglio i tuoi prodotti. E come fai a renderlo più semplice? Includendo il markup dei prodotti direttamente nell’HTML iniziale della pagina.
Cosa significa? Il markup dei prodotti è il codice che descrive le informazioni più importanti su ciò che vendi: prezzo, disponibilità, recensioni, e così via. Google lo utilizza per capire cosa offri e mostrarti meglio nei risultati di ricerca.
Se metti questo codice direttamente nell’HTML, Google lo vede subito, senza dover eseguire ulteriori passaggi. Questo è importante perché rende il processo più affidabile e veloce. Tradotto: i tuoi prodotti hanno più probabilità di essere visti dai clienti.
Un esempio? Supponiamo che tu venda scarpe da ginnastica. Se metti i dettagli del prodotto direttamente nel codice HTML della pagina, Google avrà immediatamente tutte le informazioni necessarie per mostrarle nei risultati di ricerca. Più rapido è il processo, migliori sono i risultati.
2. Attenzione al JavaScript per il markup dei prodotti
So che molti siti usano JavaScript per generare dinamicamente i dati dei prodotti. È una tecnica comoda, ma Google ti dice di fare attenzione.
Il problema? Il markup generato da JavaScript può rallentare il processo di scansione di Google. In altre parole, Google potrebbe visitare il tuo sito meno spesso e in modo meno affidabile. Questo è un problema, soprattutto se vendi prodotti con prezzi o disponibilità che cambiano velocemente.
Immagina di gestire un negozio che vende smartphone. I prezzi possono cambiare frequentemente, così come la disponibilità. Se usi JavaScript per mostrare questi dettagli, Google potrebbe non catturare subito i cambiamenti. E se Google non sa che hai abbassato il prezzo o che un prodotto è tornato disponibile, potresti perdere vendite.
Cosa fare? Google consiglia di assicurarti che il tuo server sia abbastanza potente da gestire il traffico aggiuntivo generato dai crawler. Se non lo fai, rischi che Google non scansioni correttamente le tue pagine, il che potrebbe danneggiare la tua visibilità online.
Cosa significa tutto questo per il tuo e-commerce?
Se stai gestendo un sito e-commerce, queste nuove linee guida di Google sono cruciali. Dovresti valutare il modo in cui il tuo sito genera i dati strutturati dei prodotti.
In sintesi:
- Metti i dati dei prodotti nell’HTML iniziale, non solo tramite JavaScript. Questo migliora la precisione con cui Google capisce i tuoi prodotti.
- Se usi JavaScript, assicurati che il server del tuo sito possa gestire il traffico aggiuntivo che arriva dai crawler di Google.
Seguendo queste regole, potrai ottimizzare meglio le tue pagine di prodotto e migliorare la loro visibilità nei risultati di ricerca. E alla fine, questo significa solo una cosa: più vendite.
Ora, non resta che fare un controllo e vedere se il tuo sito sta rispettando queste nuove best practice.
Esempio di markup prodotto generato con HTML
Questo è il modo consigliato da Google, dove il markup è integrato direttamente nel codice HTML della pagina. È più affidabile per Google perché può leggere i dati subito.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scarpe da ginnastica</title>
</head>
<body>
<h1>Scarpe da ginnastica - Marca XYZ</h1>
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Scarpe da ginnastica</span>
<img itemprop="image" src="scarpe.jpg" alt="Scarpe da ginnastica">
<span itemprop="description">Scarpe da ginnastica comode e traspiranti, ideali per lo sport e il tempo libero.</span>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="priceCurrency" content="EUR">€</span>
<span itemprop="price" content="59.99">59.99</span>
<link itemprop="availability" href="http://schema.org/InStock">Disponibile</link>
</div>
<span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
<span itemprop="name">Marca XYZ</span>
</span>
</div>
</body>
</html>
Altro esempio di markup generato con HTML
In questo secondo esempio, vediamo un prodotto con recensioni integrate direttamente nell’HTML, utile per mostrare il rating di un prodotto:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smartphone ABC</title>
</head>
<body>
<h1>Smartphone ABC - Ultima Generazione</h1>
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Smartphone ABC</span>
<img itemprop="image" src="smartphone.jpg" alt="Smartphone ABC">
<span itemprop="description">Smartphone di ultima generazione con display ad alta risoluzione e fotocamera a 48MP.</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.5</span> su <span itemprop="bestRating">5</span>
<span itemprop="reviewCount">125</span> recensioni
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="priceCurrency" content="EUR">€</span>
<span itemprop="price" content="799.99">799.99</span>
<link itemprop="availability" href="http://schema.org/InStock">Disponibile</link>
</div>
</div>
</body>
</html>
Esempio di markup generato con JavaScript
Questo è un esempio dove il markup viene generato dinamicamente tramite JavaScript, meno raccomandato da Google perché rende le scansioni meno affidabili:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablet DEF</title>
</head>
<body>
<h1>Tablet DEF - Modello 2024</h1>
<div id="product-container"></div>
<script>
const product = {
name: "Tablet DEF",
image: "tablet.jpg",
description: "Tablet di ultima generazione con schermo ad alta risoluzione.",
price: "499.99",
currency: "EUR",
availability: "InStock"
};
document.getElementById('product-container').innerHTML = `
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">${product.name}</span>
<img itemprop="image" src="${product.image}" alt="${product.name}">
<span itemprop="description">${product.description}</span>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="priceCurrency" content="${product.currency}">€</span>
<span itemprop="price">${product.price}</span>
<link itemprop="availability" href="http://schema.org/${product.availability}">Disponibile</link>
</div>
</div>
`;
</script>
</body>
</html>
Differenze chiave:
- HTML diretto: Google preferisce il markup scritto direttamente nell’HTML, perché lo può leggere subito, senza dover eseguire JavaScript.
- JavaScript: con JavaScript, il markup viene generato al momento, ma richiede più risorse da parte di Google per interpretarlo. Questo può causare scansioni meno frequenti e meno accurate, soprattutto per dati che cambiano spesso, come prezzi o disponibilità.
Spero che questi esempi ti abbiano chiarito le differenze! Se hai bisogno di un aiuto per integrare correttamente i dati strutturati sul tuo e-commerce, contattami per una consulenza SEO.
