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. Rendering dinamico significa passare da contenuti visualizzati lato client e contenuti pre-visualizzati 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 tu. Non tutti i siti devono utilizzare il rendering dinamico e vale la pena notare che il rendering dinamico è 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 pubblicate normalmente. Se necessario, il renderer dinamico pubblica una versione dei contenuti adatti 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. Al contrario, il diagramma mostra il server che fornisce il codice HTML e JavaScript iniziale a un renderer, che lo converte in codice HTML statico. Dopo la conversione dei contenuti, il renderer fornisce il codice 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 esempio di un elenco di user-agent comuni nel middleware Rendertron:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      '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 contenuto 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.
    • Crea 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. Esegui una verifica del tuo contenuto per dispositivi mobili con Test di ottimizzazione mobile per assicurarti che Google possa vedere i tuoi contenuti.

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

    error Riprova. Se i contenuti che vedi non corrispondono a quanto previsto, leggi la sezione Risoluzione dei problemi.

  2. Esegui una verifica del contenuto desktop con lo strumento Controllo URL per assicurarti che il contenuto desktop sia visibile anche sulla pagina visualizzata (la pagina visualizzata è il modo in cui Googlebot vede la tua pagina).

    done Operazione riuscita. I contenuti desktop corrispondono a ciò che dovrebbero vedere gli utenti.

    error Riprova. Se i contenuti che vedi non corrispondono a quanto previsto, leggi la sezione Risoluzione dei problemi.

  3. Se utilizzi i dati strutturati, verifica che questi vengano visualizzati correttamente con lo Strumento di test per i dati strutturati.

    done Operazione riuscita. I dati strutturati vengono visualizzati come previsto.

    error Riprova. Se i dati strutturati non vengono visualizzati come previsto, leggi 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 della Ricerca Google, prova a risolvere i più comuni problemi elencati sotto. Se i problemi persistono, pubblica un nuovo argomento nel forum dei webmaster.

I contenuti sono incompleti o hanno un aspetto diverso

error 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 i timeout possono anche causare un errore di visualizzazione dei contenuti.

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

Tempi di risposta elevati

error Causa del problema. L'utilizzo di un browser headless per il rendering 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 velocità durante la scansione e l'indicizzazione dei contenuti.

done Risolvi il problema

  1. Configura una cache per l'HTML pre-visualizzato o crea una versione HTML statica del tuo contenuto come parte della procedura 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.

Dati strutturati mancanti

error 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.

done Risolvi il problema

  1. Utilizza lo Strumento di test per i dati strutturati per assicurarti che i dati strutturati siano presenti nella pagina. Quindi configura lo user-agent per lo Strumento di test per i dati strutturati per testare il pre-rendering dei contenuti.
  2. Assicurati che i tag di script JSON-LD siano inclusi nell'HTML visualizzato in modo dinamico dei tuoi contenuti. Consulta la documentazione della soluzione di rendering per avere ulteriori informazioni.