Implementare il rendering dinamico

Attualmente, è difficile elaborare JavaScript e non tutti i crawler dei motori di ricerca sono in grado di elaborarlo correttamente o immediatamente. In futuro, ci auguriamo che questo problema possa essere risolto, ma nel frattempo consigliamo il rendering dinamico come soluzione alternativa a questo problema. Eseguire il rendering dinamico significa passare da contenuti con rendering lato client a contenuti di cui viene eseguito il pre-rendering per specifici user agent.

Siti che devono utilizzare il rendering dinamico

Il rendering dinamico è utile per i contenuti indicizzabili pubblici generati con JavaScript che cambiano rapidamente o per i contenuti che utilizzano le funzionalità JavaScript non supportate dai crawler che consideri importanti. Non tutti i siti devono utilizzare il rendering dinamico che (vale la pena sottolinearlo) è una soluzione alternativa per i crawler.

Comprendere come funziona il rendering dinamico

Il rendering dinamico richiede che il tuo server web rilevi i crawler (ad esempio, con il controllo dello user agent). Le richieste dei crawler vengono indirizzate a un renderer, le richieste degli utenti vengono gestite normalmente. Se necessario, il renderer dinamico pubblica una versione dei contenuti adatta al crawler: ad esempio, potrebbe pubblicare una versione HTML statica. Puoi scegliere di attivare un renderer dinamico per tutte le pagine o uno specifico per pagina.

Diagramma che mostra come funziona il rendering dinamico. Il diagramma mostra il server che fornisce
              i contenuti HTML e JavaScript iniziali direttamente al browser. Per contro, il diagramma mostra il server che fornisce i contenuti HTML e JavaScript iniziali a un renderer, che li converte in HTML statico. Dopo la conversione dei contenuti, il renderer fornisce l'HTML statico al crawler.

Il rendering dinamico non è considerato cloaking

Generalmente Googlebot non considera il rendering dinamico come cloaking. Se il rendering dinamico genera contenuti simili, Googlebot non lo considera come cloaking.

Quando configuri il rendering dinamico, il tuo sito potrebbe generare pagine di errore. Googlebot non considera queste pagine di errore come cloaking e considera l'errore come qualsiasi altra pagina di errore.

L'uso del rendering dinamico per mostrare contenuti completamente diversi a utenti e crawler può essere considerato cloaking. Ad esempio, un sito web che mostra una pagina sui gatti agli utenti e una pagina sui cani ai crawler può essere considerato cloaking.

Implementare il rendering dinamico

Per configurare il rendering dinamico per i tuoi contenuti, segui le nostre linee guida generali. Sarà necessario fare riferimento alle informazioni dettagliate relative alla configurazione specifica, perché variano notevolmente in base all'implementazione.

  1. Installa e configura un renderer dinamico per trasformare i tuoi contenuti in codice HTML statico, più facile da utilizzare per i crawler. Alcuni renderer dinamici comuni sono Puppeteer, Rendertron e prerender.io.
  2. Scegli gli user agent che ritieni debbano ricevere il tuo codice HTML statico e fai riferimento ai dettagli di configurazione specifici su come aggiornare o aggiungere user agent. Ecco un elenco di esempio di user agent comuni nel middleware Rendertron:
    export const botUserAgents = [
      'googlebot',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. Se il pre-rendering rallenta il tuo server o vedi un numero elevato di richieste di pre-rendering, valuta l'implementazione di una cache per i contenuti pre-visualizzati o verifica che le richieste provengano da crawler legittimi.
  4. Determina se gli user agent richiedono contenuti per dispositivi mobili o desktop. Utilizza la pubblicazione dinamica per fornire la versione desktop o per dispositivi mobili appropriata. Ecco un esempio di come una configurazione può determinare se uno user agent richiede contenuti desktop o per dispositivi mobili:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. Configura il tuo server per fornire l'HTML statico ai crawler selezionati. Ci sono molti modi per farlo, in base alle tecnologie a tua disposizione; ecco alcuni esempi:
    • Richieste proxy provenienti dai crawler al renderer dinamico.
    • Esegui il pre-rendering come parte della procedura di implementazione e fai in modo che il server fornisca l'HTML statico ai crawler.
    • Integra il rendering dinamico nel tuo codice server personalizzato.
    • Pubblica contenuti statici da un servizio di pre-rendering per i crawler.
    • Utilizza un middleware per il tuo server (ad esempio, il middleware rendertron).

Verificare la configurazione

Dopo aver completato l'implementazione del rendering dinamico, per verificare che tutto funzioni come previsto, controlla un URL con i seguenti test:

  1. Testa i tuoi contenuti per dispositivi mobili con lo Strumento Test di ottimizzazione mobile per assicurarti che Google possa vedere i tuoi contenuti.

    Operazione riuscita: i tuoi contenuti per dispositivi mobili corrispondono a ciò che dovrebbero vedere gli utenti.

    Riprova: se i contenuti visualizzati non corrispondono a quanto previsto, consulta la sezione Risoluzione dei problemi.

  2. Testa i tuoi contenuti desktop con lo strumento Controllo URL per assicurarti che siano visibili anche nella pagina visualizzata (la pagina visualizzata è il modo in cui Googlebot vede la tua pagina).

    Operazione riuscita: i contenuti desktop corrispondono a ciò che dovrebbero vedere gli utenti.

    Riprova: se i contenuti visualizzati non corrispondono a quanto previsto, consulta la sezione Risoluzione dei problemi.

  3. Se utilizzi i dati strutturati, verifica che questi vengano visualizzati correttamente con il Test dei risultati multimediali.

    Operazione riuscita: i dati strutturati vengono visualizzati come previsto.

    Riprova: se i dati strutturati non vengono visualizzati come previsto, consulta la sezione Risoluzione dei problemi.

Risoluzione dei problemi

Se i contenuti mostrano errori nel test di ottimizzazione mobile o se non vengono visualizzati nei risultati di ricerca di Google, prova a risolvere i più comuni problemi elencati di seguito. Se i problemi persistono, pubblica un nuovo argomento nella Community di assistenza di Google Search Central.

I contenuti sono incompleti o sembrano diversi

Causa del problema. Il renderer potrebbe non essere configurato in modo corretto o la tua applicazione web potrebbe non essere compatibile con la soluzione di rendering. A volte anche i timeout possono causare un errore di visualizzazione dei contenuti.

Risoluzione del problema. Leggi la documentazione relativa alla tua specifica soluzione di rendering per eseguire il debug della configurazione del rendering dinamico.

Tempi di risposta elevati

Causa del problema. L'utilizzo di un browser headless per la visualizzazione di pagine on demand spesso causa tempi di risposta elevati, che possono portare i crawler ad annullare la richiesta e a non indicizzare i contenuti. Gli elevati tempi di risposta possono anche portare i crawler a ridurre la frequenza di scansione durante la scansione e l'indicizzazione dei contenuti.

Risoluzione del problema

  1. Configura una cache per l'HTML sottoposto a pre-rendering o crea una versione HTML statica dei tuoi contenuti nell'ambito del processo di compilazione.
  2. Assicurati di attivare la cache nella configurazione (ad esempio, indirizzando i crawler alla cache).
  3. Verifica che i crawler possano accedere rapidamente ai tuoi contenuti usando strumenti di test quali Test di ottimizzazione mobile o webpagetest, con una stringa dello user agent personalizzata dell'elenco riportato nella pagina Crawler di Google (user agent). Le tue richieste ora non dovrebbero andare in timeout.

Il rendering dei componenti web non avviene come previsto

Causa del problema. Shadow DOM è isolato dal resto della pagina. Le soluzioni di rendering (come Rendertron) non sono in grado di vedere i contenuti all'interno dello shadow DOM isolato. Per ulteriori informazioni, consulta le best practice relative ai componenti web.

Risoluzione del problema

  1. Carica i polyfill webcomponents.js relativi agli elementi personalizzati e a shadow DOM.
  2. Utilizza gli strumenti Test di ottimizzazione mobile o Controllo URL per verificare se i contenuti appaiono nel codice HTML visualizzato della soluzione di rendering.

Dati strutturati mancanti

Causa del problema. La mancanza dello user agent dei dati strutturati o di tag di script JSON-LD nell'output può causare errori nei dati strutturati.

Risoluzione del problema

  1. Utilizza il Test dei risultati multimediali per assicurarti che i dati strutturati siano presenti nella pagina, quindi configura lo user agent per testare i contenuti sottoposti a pre-rendering con Googlebot per computer desktop o dispositivi mobili.
  2. Assicurati che i tag di script JSON-LD siano inclusi nell'HTML con rendering dinamico dei tuoi contenuti. Consulta la documentazione della soluzione di rendering per avere ulteriori informazioni.