Come gestiscono gli AI crawler l'infinite scroll? I nostri contenuti non vengono indicizzati

Ti spiego come i vari AI crawler gestiscono JavaScript:

Supporto JavaScript degli AI Crawler:

Il problema principale:

L’infinite scroll richiede:

1. Esecuzione di JavaScript
2. Attivazione dell’evento scroll
3. Ulteriori richieste HTTP
4. Rendering dei nuovi contenuti

La maggior parte degli AI crawler si blocca al punto 1 o 2.

Perché l’SSR non basta:

Il tuo SSR serve solo la pagina iniziale. Ma i contenuti dell’infinite scroll non sono “iniziali” – si caricano con l’interazione. L’SSR non risolve la dipendenza dall’interazione.

Il problema di fondo:

L’infinite scroll è fondamentalmente incompatibile con le attuali capacità degli AI crawler. Serve un approccio alternativo.

Abbiamo affrontato esattamente questo problema. Ecco la nostra soluzione:

Implementazione dell’approccio ibrido:

// Struttura URL
/blog              // Infinite scroll (default utente)
/blog/archive/1    // Paginato (accessibile ai crawler)
/blog/archive/2

Dettagli chiave di implementazione:

1. La sitemap include solo gli URL paginati

   • Gli AI crawler trovano le pagine /blog/archive/*
   • Queste rendono il contenuto interamente lato server

2. La pagina infinite scroll carica gli stessi contenuti

   • Usa l’API di paginazione in background
   • Migliore UX per gli umani

3. I link interni puntano ai singoli articoli

   • Non alla posizione nell’infinite scroll
   • Ogni articolo ha il suo URL

4. Indicazioni robots.txt:

# Fai concentrare i crawler sugli articoli singoli
# Non sul contenitore infinite scroll
Sitemap: /sitemap.xml

Risultati:

• UX per l’utente invariata (infinite scroll)
• Gli AI crawler accedono a tutti i contenuti tramite le pagine archivio
• Tutti gli articoli individuali indicizzati
• Tasso di citazione aumentato di 4x dopo l’implementazione

Approccio specifico per Next.js:

Utilizzo di getStaticPaths + getStaticProps:

// pages/blog/page/[page].js
export async function getStaticPaths() {
  const totalPages = await getTotalPages();
  const paths = Array.from({ length: totalPages }, (_, i) => ({
    params: { page: String(i + 1) }
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const posts = await getPostsForPage(params.page);
  return { props: { posts, page: params.page } };
}

Vantaggi:

• Pagine statiche per ogni paginazione
• Contenuto completo in HTML già in fase di build
• Gli AI crawler ricevono tutti i contenuti
• Caricamento rapido (statico)

Poi aggiungi l’infinite scroll come enhancement:

• L’infinite scroll client-side usa la stessa API
• Approccio di progressive enhancement
• Funziona anche senza JS

Così hai il meglio di entrambi i mondi.

Aggiungo il prerendering come opzione:

Servizi di prerendering per AI crawler:

Puoi rilevare gli user agent degli AI crawler e servire contenuti prerenderizzati:

// middleware
if (isAICrawler(req.headers['user-agent'])) {
  return servePrerenderedVersion(req.url);
}

Riconoscimento AI crawler:

const aiCrawlers = [
  'GPTBot',
  'ChatGPT-User',
  'Google-Extended',
  'ClaudeBot',
  'PerplexityBot',
  'anthropic-ai'
];

function isAICrawler(userAgent) {
  return aiCrawlers.some(crawler =>
    userAgent.includes(crawler)
  );
}

Opzioni di prerendering:

• Prerender.io
• Rendertron
• Soluzione custom con Puppeteer
• Prerendering in fase di build

Attenzione:

Non tutti gli AI crawler si identificano chiaramente. Alcuni potrebbero sfuggire. Questo è un approccio supplementare, non sostituisce una paginazione corretta.

Metodologia di test per accessibilità AI crawler:

Test manuali:

1. Test disabilitando JavaScript:

   • Apri il blog nel browser
   • Disabilita JavaScript
   • Che contenuto è visibile?
   • Simula la visione di molti AI crawler

2. Test visualizza sorgente:

   • Visualizza il sorgente pagina (non ispeziona elemento)
   • Il contenuto è nell’HTML?
   • O solo placeholder JavaScript?

3. Test con curl:

   curl -A "GPTBot/1.0" https://yoursite.com/blog/
   

   • La risposta contiene contenuto reale?

Test automatici:

4. Google Search Console:

   • Strumento di ispezione URL
   • “Visualizza pagina renderizzata” mostra cosa vede Googlebot
   • (Non AI crawler, ma rendering JS simile)

5. Audit Lighthouse:

   • Controlla la categoria “SEO”
   • Evidenzia problemi di crawlabilità

Cosa vuoi vedere:

• Contenuto nella risposta HTML iniziale
• Link a tutte le pagine scopribili
• Nessuna necessità di JS per la visibilità dei contenuti

Prospettiva e-commerce:

Abbiamo 10.000+ prodotti con funzionalità “carica altri”. Ecco la nostra soluzione:

Struttura delle pagine categoria:

/category/shoes                    # Prime 24 prodotti + load more
/category/shoes?page=2            # Prodotti 25-48
/category/shoes?page=3            # Prodotti 49-72

Implementazione:

1. La pagina iniziale ha sempre i link di paginazione

   • Anche con infinite scroll attivo
   • Il footer contiene i link a pag. 1, 2, 3…

2. I parametri ?page= sono canonici

   • Ogni pagina è un contenuto a sé
   • Non duplicato della pagina principale

3. La sitemap include tutti gli URL paginati

   • Non solo la base infinite scroll

4. I prodotti hanno URL individuali

   • La paginazione di categoria serve per la scoperta
   • I prodotti sono il vero contenuto

Risultato:

Le piattaforme AI citano le nostre pagine prodotto individuali, che scoprono attraverso la struttura di categoria paginata.

È stato davvero utile. Ecco il mio piano di implementazione:

Approccio: paginazione ibrida

Fase 1: Aggiunta delle rotte paginate (Settimana 1-2)

• Crea rotte /blog/archive/[page]
• SSR per avere tutto il contenuto in HTML
• Includi la navigazione di paginazione
• Aggiorna la sitemap per includerle

Fase 2: Aggiornamento infinite scroll esistente (Settimana 3)

• Mantieni infinite scroll per /blog
• Usa le pagine archivio come fonte dati
• Canonical da /blog a /blog/archive/1

Fase 3: Test e validazione (Settimana 4)

• Test con JS disabilitato
• Test curl per user agent AI
• Monitora i tassi di citazione AI

Implementazione tecnica:

/blog                 → Infinite scroll (utenti, canonical verso archive/1)
/blog/archive/1       → Paginato (crawler, canonical su se stesso)
/blog/archive/2       → Paginato (crawler)
/blog/[slug]          → Articoli individuali (contenuto principale)

Principi chiave:

• Contenuti accessibili senza JavaScript
• Ogni contenuto ha un URL diretto
• La sitemap include tutte le pagine di contenuti
• L’infinite scroll è un enhancement, non un requisito

Grazie a tutti per le dettagliate indicazioni tecniche.