Correggere i contenuti caricati tramite caricamento lento

Il differimento del caricamento di contenuti non fondamentali o non visibili, noto anche come "caricamento lento", è una prassi comune e una best practice per l'esperienza utente. Per ulteriori informazioni, consulta la guida per il caricamento lento di immagini e video di Web Fundamentals. Tuttavia, se non viene implementata correttamente, questa tecnica può inavvertitamente nascondere contenuti a Google. Questo documento spiega come fare in modo che Google possa eseguire la scansione e indicizzare i contenuti caricati con il metodo lento.

Caricare i contenuti quando sono visibili nell'area visibile

Per garantire che Googlebot veda tutti i contenuti della tua pagina, assicurati che la tua implementazione di caricamento lento carichi tutti i contenuti pertinenti ogni volta che sono visibili nell'area visibile. Ecco alcuni esempi di come fare:

Assicurati di testare la tua implementazione.

Supportare il caricamento suddiviso per lo scorrimento continuo

Se implementi un'esperienza di scorrimento continuo, assicurati di supportare il caricamento suddiviso. Il caricamento suddiviso è importante per gli utenti perché consente loro di condividere e interagire con i contenuti. Consente inoltre a Google di mostrare un link a un punto specifico dei contenuti, anziché alla parte superiore di una pagina a scorrimento continuo.

Per supportare il caricamento suddiviso, fornisci un link univoco a ogni sezione che gli utenti possono condividere e caricare direttamente. Ti consigliamo di utilizzare l'API History per aggiornare l'URL quando i contenuti vengono caricati in modo dinamico.

Test

Dopo aver impostato l'implementazione, dovresti assicurarti che funzioni correttamente. Un modo è utilizzare uno script Puppeteer per testare a livello locale la tua implementazione. Puppeteer è una libreria Node.js per il controllo di Chrome headless. Per eseguire lo script, avrai bisogno di Node.js. Utilizza i seguenti comandi per consultare lo script ed eseguirlo.

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
    cd puppeteer-examples
    npm i
    node lazyimages_without_scroll_events.js -h
    

Dopo aver eseguito lo script, esamina manualmente le immagini degli screenshot creati per assicurarti che contengano tutti i contenuti che ti aspetti siano visibili e indicizzati da Googlebot.

Puoi anche utilizzare lo strumento Controllo URL di Search Console per controllare se tutte le immagini sono state caricate. Controlla lo screenshot e l'HTML sottoposto a rendering per assicurarti che le immagini siano caricate.