Come inserire i dati strutturati in un sito headless con Vue js

Legenda articolo "Come inserire i dati strutturati in un sito headless con Vue js"

Introduzione ai dati strutturati e a Vue JS

I dati strutturati sono una forma di dati che consentono ai motori di ricerca di comprendere meglio il contenuto di un sito web. Possono essere utilizzati per fornire informazioni aggiuntive su una pagina web, come la data di pubblicazione, l’autore, le recensioni, ecc. Queste informazioni possono aiutare i motori di ricerca a comprendere meglio il contenuto del sito e, di conseguenza, a fornire risultati di ricerca più accurati. In questo articolo vedremo come inserire i dati strutturati in un sito headless.

Vue JS è un framework JavaScript open source che consente agli sviluppatori di creare interfacce utente ricche e interattive. È uno strumento potente che consente di creare un’esperienza utente fluida e reattiva. Con Vue JS, gli sviluppatori possono creare applicazioni web dinamiche, componenti riutilizzabili e interfacce utente complesse.

Prima di procedere ti consiglio la lettura dei seguenti articoli.

Se non conosci bene la tecnologia headless ti consiglio di leggere: Ecommerce Headless: significato e guida completa.
Mentre se hai un sito WordPress e stai cercando di capire come ottimizzarlo con la tecnologia headless, ti consiglio: Come velocizzare un eCommerce WordPress utilizzando headless.

Come inserire i dati strutturati in un sito headless con Vue JS

Inserire i dati strutturati in un sito headless con Vue JS è un processo relativamente semplice. I dati strutturati possono essere aggiunti al markup HTML di una pagina web in modo da fornire informazioni aggiuntive ai motori di ricerca. Il caso più comune è quello in cui partiamo da un sito WordPress.
Se hai un sito WordPress e Yoast SEO, la procedura è descritta di seguito.

Dato che utilizzi GraphQL e Vue.js, puoi sfruttare l’integrazione di WPGraphQL for Yoast SEO per ottenere i dati strutturati (schema markup) direttamente tramite richieste GraphQL. Ecco come puoi procedere:

Passaggi per Aggiungere i Dati Strutturati di Yoast con WPGraphQL e Vue.js:

1. Installa WPGraphQL e l’Estensione per Yoast SEO

Se non lo hai già fatto, installa il plugin WPGraphQL e l’estensione WPGraphQL for Yoast SEO su WordPress. Questo ti permetterà di esporre i dati SEO di Yoast tramite GraphQL.

WPGraphQL: Download
WPGraphQL for Yoast SEO: GitHub Repository

2. Fai una Richiesta GraphQL per Ottenere i Dati Strutturati

Una volta configurato WPGraphQL for Yoast SEO, puoi fare una query GraphQL per ottenere i dati strutturati che Yoast genera.

Ecco un esempio di query GraphQL per ottenere i dati SEO, inclusi i dati strutturati JSON-LD:

{
  post(id: "your-post-id", idType: DATABASE_ID) {
    seo {
      schema {
        raw
      }
    }
  }
}

Questa query restituirà i dati JSON-LD che puoi utilizzare nel front-end. Quindi richiamando this.result.post.seo.schema.raw otterrai esattamente i dati che ti servono.

3. Integra i Dati nel Tuo Componente Vue.js

Una volta ottenuti i dati JSON-LD, puoi integrarli facilmente nel tuo front-end in Vue.js, all’interno del <head> della pagina.

Un esempio di come farlo in un componente Vue.js:

<template>
  <div>
    <!-- Contenuto del sito -->
  </div>
</template>

<script>
import { gql } from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';

export default {
  setup() {
    const { result, loading, error } = useQuery(gql`
      query {
        post(id: "your-post-id", idType: DATABASE_ID) {
          seo {
            schema {
              raw
            }
          }
        }
      }
    `);

    return { result, loading, error };
  },
  mounted() {
    if (this.result && this.result.post.seo.schema.raw) {
      const script = document.createElement('script');
      script.type = 'application/ld+json';
      script.text = JSON.stringify(this.result.post.seo.schema.raw);
      document.head.appendChild(script);
    }
  }
};
</script>

n questo esempio:

La query GraphQL viene eseguita all’interno del composable di Apollo.
I dati strutturati vengono aggiunti dinamicamente al <head> della pagina come un blocco JSON-LD.

BONUS: ricorda di modificare l’url in database dei dati Yoast con il dominio headless, poiché se hai il backend online, il domino utilizzato da Yoast sarà quello del sito backend.

4. Testa i Dati Strutturati

Dopo aver implementato i dati nel tuo front-end headless, utilizza lo Strumento di test dei risultati avanzati di Google per assicurarti che i dati strutturati siano correttamente riconosciuti.

Se pensi che tutta questa tecnologia faccia girare la testa, puoi sempre scegliere una soluzione pronta, economica ed efficiente. Inizia oggi la prova con Megicart.

Come inserire dati strutturati in un sito headless con Vue js?

Per inserire dati strutturati in un sito headless con Vue js, è necessario utilizzare una libreria come vue-meta per gestire i metadati e le intestazioni del sito. È inoltre possibile utilizzare un plug-in come vue-head per gestire i metadati.

Come configurare Vue-meta?

Per configurare Vue-meta, è necessario installare e configurare il plug-in come mostrato nella documentazione. Una volta configurato, è possibile iniziare a gestire i metadati del sito.

A cosa serve Vue-head?

Vue-head è un plug-in che consente di gestire i metadati del sito, come le intestazioni, i metadati Open Graph e le intestazioni HTTP.

Quali sono i vantaggi di utilizzare Vue-head?

Vue-head offre una serie di vantaggi, tra cui: semplicità di configurazione, velocità di implementazione, flessibilità e scalabilità. Inoltre, consente di gestire facilmente i metadati del sito.

Quali sono i passaggi per implementare Vue-meta?

Per implementare Vue-meta, è necessario seguire i seguenti passaggi: installare e configurare il plug-in, aggiungere i metadati desiderati al codice HTML, compilare il codice con un compilatore come Webpack e infine testare il codice per assicurarsi che sia corretto.

Come testare il codice con Vue-meta?

Per testare il codice con Vue-meta, è necessario utilizzare uno strumento di test come Lighthouse. Lighthouse consente di verificare che i metadati siano corretti e che il sito sia conforme alle linee guida SEO.

Quali sono le linee guida SEO da seguire?

Le linee guida SEO da seguire sono: ottimizzare le parole chiave, utilizzare una struttura di URL ottimizzata, creare contenuti di qualità e di lunghezza adeguata, creare collegamenti interni e interconnessioni tra le pagine, utilizzare le intestazioni correttamente e ottimizzare le immagini.

Come ottimizzare le parole chiave?

Per ottimizzare le parole chiave, è necessario identificare le parole chiave più rilevanti per il sito, inserire le parole chiave nei titoli delle pagine, nei contenuti e nelle intestazioni, e assicurarsi che siano presenti in tutti i contenuti del sito.