Assicurarsi che Google possa vedere i contenuti caricati con il metodo lazy

Il differimento del caricamento di contenuti non critici o non visibili, noto anche come "caricamento lazy", è una prestazione comune e una best practice UX. Per ulteriori informazioni, consulta la guida per il caricamento lazy di immagini e video di Web Fundamentals. Tuttavia, se non viene implementato 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 lazy.

Caricare il contenuto quando è visibile nell'area visibile

Per garantire che Googlebot veda tutti i contenuti della tua pagina, assicurati che la tua implementazione di caricamento lazy 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 del contenuto, piuttosto che alla parte superiore di una pagina di scorrimento continuo.

Per supportare il caricamento suddiviso, fornisci un link univoco per ciascuna sezione che gli utenti possono condividere e caricare direttamente. Ti consigliamo di utilizzare l'API History per aggiornare l'URL quando il contenuto viene caricato 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 checkout 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 in Search Console per vedere se tutte le immagini sono state caricate. Controlla lo screenshot e l'HTML sottoposto a rendering per assicurarti che le immagini siano caricate.