Skip to content

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: gli spider dei motori di ricerca non eseguono eventi JavaScript, non scrollano e non compilano form, Googlebot segue i link 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: Twitter, Facebook, LinkedIn 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 è JavaScript, che è il metodo più popolare per implementarlo. I motori di ricerca, Google incluso, non sempre eseguono correttamente la scansione di elementi in JavaScript.

Google can execute some JavaScript to find content but Google has limitations on what it can do, and what it can understand. The best practice remains the same: put the content you want Google to crawl and index in basic HTML. For example, use jQuery tabs to put the content on one file instead of AJAX tabs that spreads out the content across several files. In short, make it easy for Google to access your content.

Google può eseguire alcuni JavaScript per trovare contenuti, ma Google ha delle limitazioni su cosa può fare e cosa può capire. La best practice rimane la stessa: inserisci i contenuti che desideri vengano sottoposti a scansione e indicizzazione nell’HTML di base. Ad esempio, utilizzare le schede jQuery per inserire il contenuto in un file anziché le schede AJAX che distribuiscono il contenuto su più file. In breve, semplifica l’accesso a Google ai tuoi contenuti.

Google, attraverso i suoi consigli per i webmaster, sottolinea anche questo aspetto:

If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.

Se funzioni come JavaScript, cookie, ID sessione, frame, DHTML o Flash ti impediscono di vedere tutto il tuo sito in un browser di testo, gli spider dei motori di ricerca potrebbero avere problemi a scansionare il tuo sito.

Puoi essere sicuro che il contenuto presente nell’HTML nel tuo codice sorgente verrà indicizzato da Google, ma qualsiasi contenuto che viene caricato in modo asincrono tramite JavaScript 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 è atterrare su una pagina e scansionare ciò che è immediatamente visibile nel codice sorgente. Ad oggi Googlebot non può eseguire la scansione dei contenuti caricati solo dopo lo scorrimento di una pagina. 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 consiglia ufficialmente solo un metodo.

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
    • Meno ottimale: esempio.com/fun-items#1
    • 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

In passato Google suggeriva l’utilizzo dei tag rel next e prev ma nel 2019 sono diventati obsoleti. 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. Qui trovi i dettagli sul metodo utilizzato da Twitter per implementare il suo infinite scroll con pushState.

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 consiglia di supportare il caricamento impaginato per l’infinite scroll:

If you are implementing an infinite scroll experience, make sure to support paginated loading. Paginated loading is important for users because it allows them to share and reengage with your content. It also allows Google to show a link to a specific point in the content, rather than the top of an infinite scrolling page.

Se stai implementando l’infinite scroll assicurati di supportare il caricamento impaginato. Il caricamento impaginato è importante per gli utenti perché consente loro di condividere e ritornare sui tuoi contenuti. Inoltre, consente a Google di mostrare un collegamento a un punto specifico del contenuto, piuttosto che all’inizio di una pagina con infinite scroll.

Per garantire che il tuo sito web supporti completamente il caricamento impaginato, 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 indicizzare le pagine).

Un metodo semplice per verificare cosa viene indicizzato di una pagina web è quello di interrogare la copia cache dall’indice di Google. Ad esempio, vai su Google e digita l’operatore di ricerca cache:www.evemilano.com/blog/ per vedere la copia cache di questo blog. Ora guarda la barra superiore e premi il link “Text-only version”. A questo punto vedrai il contenuto testuale della pagina presente nell’indice di Google.

Ripeti questo test su un archivio del tuo sito che usa l’infinite scroll e controlla dove si ferma il contenuto indicizzato da Google: quello che non vedi 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 Twitter ha reso popolare questa tecnica, ma ciò non significa che dovresti farlo anche tu, non sei Facebook.

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.

Articoli correlati

Autore

Commenti |4

Lascia un commento Lascia un commento
  1. Francesco 10 commenti

    Ciao Giovanni,
    grazie per questa guida.
    Avrei una domanda: quando si realizza l’infinite scroll su un sito è necessario che allo scrollare della pagina cambi anche l’URL (www.esempio.it/categoria/page-2), oppure è sufficiente che l’URL della pagina 2 sia inserito nel codice HTML?
    Grazie

    1. Giovanni Sacheli 754 risposte

      Ciao Francesco, grazie per la domanda.
      L’implementazione ideale richiede che l’URL si aggiorni, sia in scroll-down che scroll-up.
      Inoltre, la pagina deve contenere link in tag “a” verso la pagina precedente e successiva.
      Rel next e prev sono obsoleti, Google dice che bastano i link in pagina.

      1. Francesco 10 commenti

        Ciao Giovanni, ti ringrazio per la risposta. Tutto chiarissimo. Comunque i rel next.e prev io preferisco continuare ad usarli, nonostante le affermazioni di Google.

        1. Giovanni Sacheli 754 risposte

          Ti capisco :) nemmeno io mi fido delle dichiarazioni di Google!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ultimi articoli aggiornati

Richiedi un preventivo SEO e Google Ads

Porta il tuo sito web al livello successivo con l’expertise di EVE Milano. La nostra agenzia di Search Marketing ha ricevuto oltre 1123 richieste di preventivo, un segnale chiaro della fiducia che imprenditori e manager, come te, ripongono nella nostra specializzazione tecnica e verticale nella SEO e PPC. Se la tua organizzazione cerca competenze specifiche per emergere nei risultati di Google, noi siamo pronti a fornire quel valore aggiunto. Affidati alla nostra esperienza per fare la differenza.
Richiedi un preventivo

Non perderti altre guide, iscriviti per ricevere un avviso mensile con gli aggiornamenti del blog!

Iscriviti alla newsletter!

Informativa sui cookies

Noi e terze parti selezionate utilizziamo cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per le finalità di esperienza e misurazione come specificato nella cookie policy. Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento, accedendo al pannello delle preferenze. Il rifiuto del consenso può rendere non disponibili le relative funzioni. Usa il pulsante “Accetta” per acconsentire. Usa il pulsante “Rifiuta” per continuare senza accettare.