Cum gestionează crawler-ele AI scroll-ul infinit? Conținutul nostru nu este indexat

Hai să detaliez cum gestionează diferite crawler-e AI JavaScript-ul:

Suport JavaScript la crawler-ele AI:

Problema principală:

Scroll-ul infinit necesită:

1. Execuție JavaScript
2. Declanșare eveniment de scroll
3. Cereri HTTP suplimentare
4. Randare de conținut nou

Majoritatea crawler-elor AI eșuează la pasul 1 sau 2.

De ce SSR nu e suficient:

SSR-ul tău servește pagina inițială. Dar conținutul scroll-ului infinit nu este „inițial” – se încarcă la interacțiune. SSR nu rezolvă dependența de interacțiune.

Problema fundamentală:

Scroll-ul infinit este fundamental incompatibil cu capacitățile actuale ale crawler-elor AI. Ai nevoie de o abordare alternativă.

Am trecut exact prin problema asta. Iată soluția noastră:

Implementarea abordării hibride:

// Structură URL
/blog              // Scroll infinit (implicit pentru user)
/blog/archive/1    // Paginat (accesibil crawler-elor)
/blog/archive/2

Detalii cheie de implementare:

1. Sitemap-ul include doar URL-urile paginate

   • Crawler-ele AI găsesc paginile /blog/archive/*
   • Acestea redau tot conținutul pe server

2. Pagina cu scroll infinit încarcă același conținut

   • Folosește API-ul de paginare în fundal
   • UX mai bun pentru oameni

3. Link-urile interne duc la articole individuale

   • Nu la poziția din scroll-ul infinit
   • Fiecare articol are propriul URL

4. robots.txt recomandări:

# Lăsați crawler-ele să se concentreze pe articolele individuale
# Nu pe containerul cu scroll infinit
Sitemap: /sitemap.xml

Rezultate:

• UX pentru oameni neschimbat (scroll infinit)
• Crawler-ele AI accesează tot conținutul prin paginile de arhivă
• Toate articolele individuale indexate
• Rata de citare a crescut de 4x după implementare

Abordare specifică Next.js:

Folosind 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 } };
}

Beneficii:

• Pagini statice pentru fiecare paginare
• Tot conținutul în HTML la build
• Crawler-ele AI primesc conținut complet
• Încărcare rapidă (static)

Apoi adaugă scroll infinit ca îmbunătățire:

• Scroll infinit pe client folosește același API
• Abordare de tip progressive enhancement
• Funcționează și fără JS

Astfel ai tot ce e mai bun din ambele lumi.

Adaug opțiunea de prerendering:

Servicii de prerender pentru crawler-ele AI:

Poți detecta user-agent-urile AI și servi conținut prerenderizat:

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

Detectare crawler-e AI:

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

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

Opțiuni de prerendering:

• Prerender.io
• Rendertron
• Soluție custom bazată pe Puppeteer
• Prerender la build

Atenție:

Nu toate crawler-ele AI se identifică clar. Unele pot fi ratate. Aceasta este o abordare suplimentară, nu înlocuiește paginarea corectă.

Metodologie de testare a accesibilității pentru crawler-ele AI:

Teste manuale:

1. Test cu JavaScript dezactivat:

   • Deschide blogul în browser
   • Dezactivează JavaScript
   • Ce conținut este vizibil?
   • Aproximativ asta vede un crawler fără JS

2. Test „view source”:

   • Vezi sursa paginii (nu inspect element)
   • E conținutul în HTML?
   • Sau doar placeholder-uri JS?

3. Test curl:

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

   • Conține răspunsul conținut real?

Teste automate:

4. Google Search Console:

   • Instrumentul de inspecție URL
   • „View Rendered Page” arată ce vede Googlebot
   • (Nu AI, dar redare JS similară)

5. Audit Lighthouse:

   • Verifică secțiunea „SEO”
   • Probleme de crawl semnalizate

Ce vrei să vezi:

• Conținut în răspunsul HTML inițial
• Link-uri către toate paginile descoperibile
• Niciun conținut important să nu depindă de JS

Perspectiva ecommerce:

Avem peste 10.000 de produse cu funcționalitate „încarcă mai multe”. Iată soluția noastră:

Structura paginii de categorie:

/category/shoes                    # Primele 24 produse + încarcă mai multe
/category/shoes?page=2            # Produsele 25-48
/category/shoes?page=3            # Produsele 49-72

Implementare:

1. Pagina inițială are mereu link-uri de paginare

   • Chiar dacă scroll-ul infinit e activ
   • Subsolul conține link-uri pagină 1, 2, 3…

2. Parametrii ?page= sunt canonical

   • Fiecare pagină reprezintă conținut propriu
   • Nu duplicat al paginii principale

3. Sitemap-ul include toate URL-urile paginate

   • Nu doar baza scroll-ului infinit

4. Produsele au URL individual

   • Pagina de categorie e pentru descoperire
   • Produsele sunt conținutul real

Rezultat:

Platformele AI citează paginile noastre individuale de produs, pe care le descoperă prin structura paginată a categoriilor.

A fost extrem de util. Iată planul meu de implementare:

Abordare: Paginare hibridă

Faza 1: Adaugă rute paginate (Săptămâna 1-2)

• Creează rutele /blog/archive/[page]
• SSR pentru conținut complet în HTML
• Include navigare de paginare
• Actualizează sitemap-ul să le includă

Faza 2: Actualizează scroll-ul infinit existent (Săptămâna 3)

• Păstrează scroll-ul infinit pentru /blog
• Folosește paginile de arhivă ca sursă de date
• Canonical de la /blog către /blog/archive/1

Faza 3: Testare și validare (Săptămâna 4)

• Testează cu JS dezactivat
• Teste curl pentru user-agent AI
• Monitorizează ratele de citare AI

Implementare tehnică:

/blog                 → Scroll infinit (pentru oameni, canonical la archive/1)
/blog/archive/1       → Paginat (pentru crawlere, canonical spre sine)
/blog/archive/2       → Paginat (pentru crawlere)
/blog/[slug]          → Articole individuale (conținutul principal)

Principii cheie:

• Conținut accesibil fără JavaScript
• Fiecare bucată de conținut are URL direct
• Sitemap-ul include toate paginile de conținut
• Scroll-ul infinit este o îmbunătățire, nu o cerință

Mulțumesc tuturor pentru ghidajul tehnic detaliat.