Generare dati strutturati con JavaScript

I siti web moderni utilizzano JavaScript per visualizzare molti contenuti dinamici. Quando utilizzi JavaScript per generare dati strutturati sui tuoi siti web, devi tenere presenti alcuni aspetti e questa guida illustra le best practice e le strategie di implementazione. Se non li hai mai utilizzati, scopri di più su come funzionano i dati strutturati.

Esistono diversi modi per generare dati strutturati con JavaScript, ma i più comuni sono:

Utilizzare Google Tag Manager per generare dinamicamente JSON-LD

Google Tag Manager è una piattaforma che ti consente di gestire i tag sul tuo sito web senza modificare il codice. Per generare dati strutturati con Google Tag Manager, procedi nel seguente modo:

  1. Configura e installa Google Tag Manager sul tuo sito.
  2. Aggiungi un nuovo tag HTML personalizzato al contenitore.
  3. Incolla un blocco di dati strutturati supportati nei contenuti del tag.
  4. Installa il contenitore come mostrato nella sezione Installa Google Tag Manager del menu di amministrazione del contenitore.
  5. Per aggiungere il tag al tuo sito web, pubblica il contenitore nell'interfaccia di Google Tag Manager.
  6. Verifica la tua implementazione.

Utilizzare le variabili in Google Tag Manager

Google Tag Manager (GTM) supporta le variabili per utilizzare le informazioni sulla pagina come parte dei dati strutturati. Utilizza le variabili per estrarre i dati strutturati dalla pagina anziché duplicare le informazioni in GTM. La duplicazione delle informazioni in GTM aumenta il rischio di una mancata corrispondenza tra i contenuti della pagina e i dati strutturati inseriti tramite GTM.

Ad esempio, puoi creare dinamicamente un blocco JSON-LD Recipe che utilizzi il titolo della pagina come nome della ricetta creando la seguente variabile personalizzata denominata recipe_name: 

function() { return document.title; }

Puoi quindi utilizzare {{recipe_name}} nel codice HTML del tag personalizzato.

Ti consigliamo di creare delle variabili per raccogliere tutte le informazioni necessarie dalla pagina.

Ecco un esempio dei contenuti del tag HTML personalizzato:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Generare dati strutturati con JavaScript personalizzato

Un altro modo per generare dati strutturati consiste nell'utilizzare JavaScript per generare tutti i dati strutturati o per aggiungere ulteriori informazioni ai dati strutturati con rendering lato server. In entrambi i casi, la Ricerca Google può comprendere ed elaborare i dati strutturati disponibili nel DOM quando esegue il rendering della pagina. Per ulteriori informazioni sul modo in cui la Ricerca Google elabora JavaScript, consulta la guida alle nozioni di base su JavaScript.

Ecco un esempio di dati strutturati generati da JavaScript:

  1. Trova il tipo di dati strutturati che ti interessa.
  2. Modifica il codice HTML del tuo sito web in modo da includere uno snippet JavaScript come nell'esempio seguente (fai riferimento alla documentazione del tuo CMS o provider host oppure chiedi ai tuoi sviluppatori).
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Verifica la tua implementazione con lo strumento di test dei risultati avanzati.

Utilizzare il rendering lato server

Se utilizzi il rendering lato server, puoi anche includere i dati strutturati nell'output sottoposto a rendering. Controlla la documentazione del tuo framework per scoprire come generare il codice JSON-LD per il tipo di dati strutturati che ti interessa.

Verificare la tua implementazione

Per assicurarti che la Ricerca Google possa eseguire la scansione e l'indicizzazione dei dati strutturati, verifica la tua implementazione:

  1. Apri il test dei risultati avanzati.
  2. Inserisci l'URL che vuoi verificare.
  3. Fai clic su Testa URL.

    Operazione riuscita: se hai eseguito tutte le operazioni correttamente e il tuo tipo di dati strutturati è supportato dallo strumento, verrà visualizzato il messaggio "La pagina è idonea per i risultati avanzati".
    Se stai verificando un tipo di dati strutturati non supportato dal test dei risultati avanzati, controlla il codice HTML sottoposto a rendering. Se l'HTML sottoposto a rendering contiene i dati strutturati, la Ricerca Google sarà in grado di elaborarlo.

    Riprova: se visualizzi errori o avvisi, è molto probabile che la causa sia un errore di sintassi o una proprietà mancante. Consulta la documentazione relativa al tipo di dati strutturati e assicurati di aver aggiunto tutte le proprietà. Se il problema persiste, consulta anche la guida sulla risoluzione dei problemi di JavaScript relativi alla ricerca.