Iniziare a utilizzare 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 HTML e JavaScript iniziali a un renderer, che li converte in HTML statico. Dopo la conversione del contenuto, il renderer fornisce HTML statico al crawler.

Implementare il rendering dinamico

Per configurare il rendering dinamico per i tuoi contenuti, segui le nostre linee guida generali. Sarà necessario fare riferimento ai dettagli di configurazione specifici, poiché variano notevolmente tra le implementazioni.

  1. Installa e configura un renderer per trasformare i contenuti dinamici in HTML statico, più facile da utilizzare per i crawler. Alcuni comuni renderer dinamici 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: il tuo contenuto per dispositivi mobili corrisponde a quello che ti aspetti che gli utenti vedano.

    error Riprova: se il tuo contenuto per dispositivi mobili non corrisponde a quello che ti aspetti che gli utenti vedano, consulta la sessione di 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: il tuo contenuto desktop corrisponde a quello che ti aspetti che gli utenti vedano.

    error Riprova: se il tuo contenuto desktop non corrisponde a quello che ti aspetti che gli utenti vedano, consulta la sessione di 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 secondo le aspettative.

    error Riprova: se i dati strutturati non vengono visualizzati secondo le aspettative, consulta la sessione di 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 Cosa ha causato il 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: consulta la documentazione relativa alla tua specifica soluzione di rendering per eseguire il debug della tua configurazione di rendering dinamica.

Tempi di risposta elevati

error Cosa ha causato il problema: l'utilizzo di un browser headless per il rendering di pagine on demand spesso causa tempi di risposta elevati, che possono causare l'annullamento della richiesta da parte dei crawler e non indicizzare il contenuto. 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 arrivare rapidamente ai tuoi contenuti con strumenti come Test di ottimizzazione mobile or webpagetest (con una stringa user-agent personalizzata dell'elenco di Crawler di Google (user-agent)). Le tue richieste ora non dovrebbero andare in timeout.

Dati strutturati mancanti

error Cosa ha causato il problema: la mancanza di user-agent di dati strutturati o la mancata inclusione dei tag di script JSON-LD nell'output possono 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 ulteriori informazioni.

Invia feedback per...