Infinite scroll e problemi SEO

Non ti piace la paginazione classica e vorresti implementare l’infinite scroll nel tuo sito web o eCommerce? Aspetta, leggi qui prima di prendere possibili decisioni azzardate.

Per capire perché l’infinite scroll può essere un problema dal punto di vista SEO partiamo dalle basi del crawling: Googlebot dal 2019 renderizza le pagine con una versione evergreen di Chromium ed esegue JavaScript, ma non simula le interazioni dell’utente. Gli spider dei motori di ricerca non scrollano, non cliccano bottoni e non compilano form: Googlebot scopre i contenuti seguendo i link <a href> presenti in pagina. Punto.

Quando implementato male, l’infinite scroll non permette a Google di indicizzare completamente il contenuto, ne risulta un’indicizzazione parziale della pagina con chiare ripercussioni sulla visibilità organica del contenuto.

Che cos’è una pagina con infinite scroll?

Nel caso in cui tu non abbia familiarità con una pagina con infinite scroll, lascia che te lo spieghi. L’infinite scroll è esattamente ciò che descrive il termine: una funzione che consente ad un utente di continuare a scorrere una pagina senza raggiungerne mai la fine. Quando scorri verso il basso, verso la “parte inferiore” della pagina, il sistema carica semplicemente più contenuti, fornendo una quantità sempre crescente e apparentemente infinita di articoli.

Alcuni esempi: X (ex Twitter), Facebook, LinkedIn e Instagram usano l’infinite scroll.

In genere, l’infinite scroll è implementato con JavaScript, che carica in modo asincrono nuovo contenuto e viene attivato dall’utente che scorre oltre un determinato punto in pagina. Al fine di mantenere i tempi ideali di caricamento, il nuovo contenuto inizia il caricamento in background prima che l’utente raggiunga il punto di scorrimento “Load more”.

Perché l’infinite scroll può essere un problema

In una parola, il problema SEO con l’infinite scroll è il JavaScript che dipende dalle azioni dell’utente. Googlebot renderizza le pagine ed esegue JavaScript, ma non simula le interazioni: la documentazione ufficiale di Google sulla paginazione è esplicita su questo punto:

Google’s crawlers don’t “click” buttons and generally don’t trigger JavaScript functions that require user actions to update the current page contents.

I crawler di Google non “cliccano” i bottoni e in generale non attivano funzioni JavaScript che richiedono azioni dell’utente per aggiornare il contenuto della pagina corrente.

Puoi essere sicuro che il contenuto presente nell’HTML nel tuo codice sorgente verrà indicizzato da Google, ma qualsiasi contenuto che viene caricato solo in risposta ad un’azione dell’utente non è detto che verrà indicizzato. I crawler non sono esseri umani e non agiscono come tali. Non necessariamente “continuano a scorrere” nell’emulazione del comportamento di un utente umano.

Un sito web che si basa sulla tecnica di infinite scroll oppure su un bottone JS “Load More” (evento JS nel bottone Load More) rischia di avere problemi di indicizzazione.

Quello che fa Googlebot è caricare la pagina e renderizzarla con un viewport molto alto, senza mai scrollare né cliccare: i contenuti che entrano nel DOM solo dopo uno scroll o un click dell’utente restano invisibili al crawler. Questo potrebbe potenzialmente causare la mancanza di molti contenuti nell’indice di ricerca di Google.

Quando sviluppi un sito web e vuoi usare l’infinite scroll devi considerare questi aspetti.

Come avere un infinite scroll SEO friendly

Per fortuna, c’è un modo per avere pagine con infinite scroll indicizzabili.

Sono disponibili diversi metodi, ma Google ne consiglia ufficialmente solo uno. Le raccomandazioni arrivano da due fonti: lo storico post del 2014 sul blog Search Central e la più recente guida Pagination Best Practices, aggiornata regolarmente, che conferma lo stesso impianto: paginazione parallela con URL unici.

L’idea di base è questa. Devi creare una pagina con infinite scroll ed una serie di altre pagine che lavorano assieme al sistema di infinite scroll (le paginazioni classiche). Vediamo come implementare un sistema corretto.

Con lo scroll infinito, i crawler non possono sempre emulare il comportamento manuale dell’utente, come scorrere o fare clic su un pulsante per caricare più elementi, quindi non è detto che i MdR possano accedere a tutti i singoli elementi di un archivio. Se i crawler non possono accedere ai tuoi contenuti è improbabile che emergano nei risultati di ricerca. Per assicurarti che i motori di ricerca possano eseguire la scansione di singoli elementi collegati da una pagina con infinite scroll assicurati che il tuo CMS produca una serie impaginata da accompagnare all’infinite scroll.

Google fornisce una demo con l’implementazione corretta di infinite scroll. La demo illustra alcuni punti chiave per i motori di ricerca:

• Copertura: tutti i singoli articoli sono accessibili. Con l’infinite scroll tradizionale, i singoli elementi visualizzati dopo il caricamento della pagina iniziale non sono rilevabili per i crawler.
• Nessuna sovrapposizione: ogni articolo viene elencato una sola volta nella serie impaginata (ovvero, nessuna duplicazione degli articoli).

Vediamo alcuni punti chiave da rispettare in fase di sviluppo.

Determina come dividere i contenuti

Fai il bilancio di tutto il contenuto che desideri scorrere all’infinito e suddividilo in blocchi. Non c’è una lunghezza raccomandata per queste paginazioni. Dovresti semplicemente assicurarti che gli utenti possano trovare quello che stanno cercando con una ragionevole quantità di scorrimento.

In linea con le migliori pratiche, dovresti anche pensare ai tempi di caricamento e ad evitare duplicazioni di contenuto in paginazioni diverse.

Riassumendo:

• Raggruppa il contenuto della pagina con infinite scroll in pagine a cui è possibile accedere quando JavaScript è disabilitato.
• Determina la quantità di contenuti ideale da includere in ciascuna pagina.
• Assicurati che se un utente arrivasse direttamente ad una pagina, potrebbe facilmente trovare l’elemento esatto che cercava, ad esempio, senza dover scorrere l’archivio dall’inizio.
• Mantieni un tempo di caricamento della pagina ragionevole.
• Dividi i contenuti in modo che non vi siano sovrapposizioni tra le pagine dei componenti della serie.

Crea una struttura URL snella e semplice

Anche se stai creando un infinite scroll, devi comunque pensare a una struttura URL. Questa struttura URL dovrebbe essere in grado di mantenere la naturale sequenza richiesta per una pagina con infinite scroll.

Ogni sezione o blocco di contenuto sarà una pagina unica con un URL univoco. Usa possibilmente URL SEO friendly poiché funzionano meglio sia per gli utenti che per i crawler.

Riassumendo:

Struttura gli URL per favorire l’elaborazione del motore di ricerca delle pagine con infinite scroll.

• Ogni pagina dell’archivio contiene un URL completo. Google consiglia URL assoluti in questa situazione per ridurre al minimo potenziali errori causati da una errata configurazione del web server.
  • Buono: esempio.com/categoria?name=fun-items&page=1
  • Buono: esempio.com/fun-items?lastid=567
  • Da evitare: esempio.com/fun-items#1 — Google ignora i fragment identifier (il testo dopo il cancelletto) e potrebbe non seguire link che differiscono solo per quella parte.
  • Verifica che ogni URL funzioni per indirizzare chiunque direttamente al contenuto ed è accessibile e linkabile in un browser senza lo stesso cookie o la stessa cronologia dell’utente.
• Eventuali parametri URL devono seguire questi consigli:
  • Assicurati che l’URL mostri lo stesso contenuto tra due settimane.
    • Evita i parametri URL basati sul tempo relativo dato che i contenuti cambierebbero nel tempo:
    • esempio.com/category/page.php?name=fun-items&days-ago=3
  • Crea parametri che possano far emergere contenuti di valore per gli utenti.
    • Evita parametri inutili per gli utenti:
    • example.com/fun-places?radius=5&lat=40.71&long=-73.40

Ogni pagina deve contenere i classici link di paginazione

In passato Google suggeriva l’utilizzo dei tag rel next e prev ma nel 2019 sono diventati obsoleti, e la documentazione attuale conferma che Google non li usa più (altri motori di ricerca potrebbero ancora farlo). L’aggiunta di classici link di paginazione a fondo pagina assicurano usabilità e discoverability a tutti i crawler e browser sprovvisti di JavaScript.

Utilizza il pushState sulla pagina con infinite scroll

PushState (chiamato anche History API) è un metodo HTML5 che determina il processo di caricamento di una pagina web. PushState attingerà dall’oggetto state (tutto serializzato) e dall’URL per caricare il nuovo contenuto nella sequenza definita dall’impaginazione.

Fondamentalmente, pushState dice al browser cosa caricare e visualizzare: l’URL nella barra degli indirizzi si aggiorna man mano che l’utente scorre i blocchi di contenuto, senza ricaricare la pagina.

In alternativa, è possibile utilizzare il metodo replaceState per modificare la cronologia di visualizzazione o rispondere al comportamento di scorrimento dell’utente. ReplaceState risponderebbe alle azioni di scorrimento o consentirebbe all’utente di scorrere all’indietro e visualizzare le pagine caricate nella cronologia dell’impaginazione.

Riassumendo:

• Implementa replaceState oppure pushState sulla pagina con infinite scroll. La decisione di utilizzare uno o entrambi dipende da te e dal comportamento dell’utente del tuo sito. Detto questo, Google consiglia di includere pushState (da solo o insieme a replaceState) per quanto segue:
  • Qualsiasi azione dell’utente simile a un clic o alla rotazione attiva di una pagina.
  • Fornire agli utenti la possibilità di navigare a ritroso attraverso il contenuto impaginato più recente.
  • L’URL deve aggiornarsi sia quando l’utente scrolla verso il basso, sia quando scrolla verso l’alto (a ritroso).

Alternative all’infinite scroll

Google ha più volte suggerito di non fare affidamento esclusivamente su infinite scroll per la navigazione del sito web. Un altro percorso che potresti percorrere è utilizzare il caricamento impaginato oltre all’infinite scroll.

La documentazione ufficiale di Google sulle linee guida per la gestione di contenuti caricati con lazy loading dedica una sezione specifica al caricamento impaginato per l’infinite scroll (“Support paginated loading for infinite scroll”) e raccomanda di:

• Dare ad ogni blocco di contenuto un URL unico e persistente, evitando elementi relativi come ?date=yesterday.
• Assicurarsi che il contenuto mostrato su ogni URL rimanga lo stesso ad ogni caricamento nel browser.
• Linkare in sequenza i singoli URL, così che i motori di ricerca possano scoprire le pagine della serie.
• Quando un nuovo blocco viene caricato dallo scroll e diventa l’elemento principale visibile, aggiornare l’URL mostrato con la History API.

Il caricamento impaginato è importante anche per gli utenti perché consente loro di condividere e ritornare sui tuoi contenuti: per garantire che il tuo sito web lo supporti completamente, devi essere in grado di fornire un collegamento univoco a ciascuna sezione/pagina di un archivio che gli utenti possono condividere e caricare direttamente in un browser senza cookies o storico.

Testa la tua implementazione

Indipendentemente dal metodo scelto, è fondamentale testare l’implementazione qualche giorno dopo averla messa live (per dare tempo a Google di scansionare e indicizzare le pagine).

Per anni il metodo più rapido è stato interrogare la copia cache con l’operatore cache:, ma non è più possibile: Google ha rimosso i link alla cache dalle SERP a inizio 2024 e ha dismesso definitivamente l’operatore a settembre 2024. Oggi la verifica si fa con questi strumenti:

• Controllo URL in Search Console: ispeziona la pagina con infinite scroll e apri “Visualizza pagina sottoposta a scansione” per esaminare l’HTML renderizzato che Google ha effettivamente indicizzato. Gli elementi che non trovi nell’HTML renderizzato non sono nell’indice.
• Test dal vivo: sempre dal Controllo URL, “Testa URL pubblicato” mostra il rendering corrente di Googlebot, utile per verificare le modifiche prima che vengano indicizzate.
• Crawler con rendering JavaScript: scansiona l’archivio con un crawler in modalità JavaScript rendering (es. Screaming Frog) e confronta HTML sorgente e DOM renderizzato: gli elementi dell’archivio presenti solo dopo scroll o click non compariranno in nessuno dei due.
• Ricerca di frammenti esatti: cerca su Google, tra virgolette, una frase presente in un elemento caricato oltre il primo blocco di contenuti (combinala con l’operatore site:). Se non emerge, quel contenuto non è stato indicizzato.

Ripeti questi test su un archivio del tuo sito che usa l’infinite scroll e controlla dove si ferma il contenuto visto da Google: quello che non trovi NON è indicizzato e non potrà ricevere traffico organico.

Riassumendo:

• Verifica che i valori della pagina si adattino mentre l’utente scorre verso l’alto o verso il basso. Il sito web dimostrativo con infinite scroll linkato sopra dimostra il comportamento di scorrimento verso l’alto e verso il basso aggiornando volta per volta l’URL.
• Verifica che le pagine fuori limite nella serie restituiscano una risposta 404. Ad esempio, esempio.com/categoria?name=fun-items&page=999 devono restituire una risposta 404 se sono presenti solo 998 pagine di contenuto.
• Esamina le potenziali implicazioni sull’usabilità introdotte dalla tua implementazione dell’infinite scroll.

Implicazioni sull’usabilità

Se stai pensando di implementare l’infinite scroll nel tuo sito, fermati e considera se questa funzione fa più male che bene alla tua situazione. Come abbiamo visto l’infinite scroll è una tecnica di web design che carica continuamente i contenuti mentre l’utente scorre la pagina, eliminando la necessità di impaginare.

Il successo dello scrolling infinito su siti di social media come X e Instagram ha reso popolare questa tecnica, ma ciò non significa che dovresti farlo anche tu, non sei Facebook.

Che l’infinite scroll non sia una soluzione universale lo ha dimostrato Google stesso: dopo averlo introdotto nelle proprie SERP (ottobre 2021 su mobile, dicembre 2022 su desktop), lo ha rimosso a giugno 2024 tornando alla paginazione classica, dichiarando che il caricamento automatico dei risultati non aveva aumentato la soddisfazione degli utenti e rallentava il serving.

Lo scorrimento continuo è vantaggioso per il contenuto che viene trasmesso costantemente e ha una struttura relativamente piatta, in cui ogni unità di contenuto appartiene allo stesso livello di gerarchia e ha probabilità simili di essere interessante per gli utenti.

Pagine lunghe e infinite sono utili per le attività che fanno perdere tempo perché gli utenti navigano velocemente ed in modo distratto. Il vantaggio di non dover fare clic su “pagina successiva” mantiene il pubblico impegnato con il contenuto e meno focalizzato sulla meccanica di navigazione alla pagina successiva. Questo è un vantaggio in usabilità per via dei minori costi di interazione.

È importante determinare la lunghezza della pagina in base alla pertinenza delle informazioni, non mediante misurazioni arbitrarie. Durante la navigazione le persone sono felici di scorrere le pagine lunghe quando le unità informative condividono lo stesso livello di granularità e sono altamente correlate, come quando cercano un regalo all’interno di una categoria specifica.

L’infinite scroll presenta vantaggi, ma deve essere applicato con cautela. Prendi in considerazione i contenuti del tuo sito e la motivazione dell’utente. Lo scorrimento senza fine non è consigliato per attività di ricerca orientate agli obiettivi, come quelle che richiedono alle persone di individuare contenuti specifici o confrontare opzioni, oppure per azioni ripetute. Per i siti di e-commerce, trovare prodotti per funzionalità potrebbe essere difficile se tutti i prodotti sono presentati in modo lineare su una pagina senza fine, senza ordine o altre tecniche di filtraggio o navigazione per aiutare a isolare l’oggetto ricercato.

Inoltre, l’individuazione di un elemento trovato in precedenza su una pagina estremamente lunga è inefficiente. È molto più facile per le persone ricordare che l’elemento si trova a pagina 3 piuttosto che valutare dove si trova l’elemento su una pagina praticamente infinita.

Ci sono anche conseguenze psicologiche sullo scrolling infinito che possono danneggiare l’esperienza dell’utente. Nell’eseguire azioni ripetitive, lo scrolling infinito può peggiorare l’esperienza utente. Le persone che necessitano di informazioni specifiche si aspettano che i contenuti vengano raggruppati e stratificati in base alla pertinenza, per pagine. Gli utenti non si preoccupano di fare clic sui collegamenti come ad esempio un collegamento alla pagina successiva, se ogni clic è significativo e li avvicina all’obiettivo desiderato.

Con l’impaginazione, c’è un inizio e una fine. Le persone possono anticipare lo sforzo richiesto per scansionare la pagina. C’è una sorta di soddisfazione quando una pagina viene completata. L’impaginazione dà alle persone il controllo di decidere se continuare o meno alla pagina successiva. Come ben sanno gli esperti di UX, ridurre le possibilità di scelta spesso si traduce in una esperienza più appagante.

Con pagine infinitamente lunghe, le persone possono sentirsi paralizzate dall’enorme volume di contenuti o dal numero di scelte e non fare clic su nulla. Le persone possono vedere ma non agire. L’infinite scroll può supportare il comportamento di navigazione, ma può causare inazione (e ridurre le conversioni), che è l’opposto di ciò che la maggior parte dei produttori di siti web desidera.

L’offesa peggiore dello scrolling infinito sul desktop è che gioca un brutto scherzo agli utenti. L’infinite scroll interrompe la barra di scorrimento facendole visualizzare la lunghezza della pagina in modo errato. Che ci crediate o no, le persone usano ancora la barra di scorrimento. Le persone si affidano alla barra di scorrimento per dire quanto sforzo è rimasto. Non è bello dire alle persone che hanno quasi finito quando non lo sono.

Conclusione

L’infinite scroll può sembrare un elegante sostituto dell’impaginazione ma è solo una delle molte opzioni di progettazione che potrebbero migliorare l’esperienza degli utenti. Tuttavia, non è ottimale per ogni sito web. Tutto dipende da cosa stai cercando di realizzare con la tua pagina specifica.

Lo scrolling infinito probabilmente non fa per te se i visitatori del sito desiderano realizzare attività orientate agli obiettivi, ad esempio quando devono tornare indietro o trovare rapidamente informazioni specifiche.