Hur hanterar AI-crawlers infinite scroll? Vårt innehåll blir inte indexerat

Jag förklarar hur olika AI-crawlers hanterar JavaScript:

AI-crawler JavaScript-stöd:

Kärnproblemet:

Infinite scroll kräver:

1. JavaScript-körning
2. Scroll-händelse
3. Ytterligare HTTP-förfrågningar
4. Rendering av nytt innehåll

De flesta AI-crawlers misslyckas vid steg 1 eller 2.

Varför SSR inte räcker:

Din SSR levererar initiala sidan. Men infinite scroll-innehållet är inte “initialt” – det laddas vid interaktion. SSR löser inte interaktionsberoendet.

Det grundläggande problemet:

Infinite scroll är fundamentalt inkompatibelt med nuvarande AI-crawler-kapacitet. Du behöver en alternativ metod.

Vi hade exakt samma problem. Så här löste vi det:

Hybridmetoden i praktiken:

// URL-struktur
/blog              // Infinite scroll (standard för användare)
/blog/archive/1    // Paginering (crawler-tillgänglig)
/blog/archive/2

Viktiga implementationdetaljer:

1. Sitemap innehåller endast paginerade URL:er

   • AI-crawlers hittar /blog/archive/* sidor
   • Dessa renderar allt innehåll server-side

2. Infinite scroll-sidan laddar samma innehåll

   • Använder paginerings-API i bakgrunden
   • Bättre UX för människor

3. Interna länkar pekar på individuella artiklar

   • Inte på infinite scroll-position
   • Varje artikel har egen URL

4. robots.txt-anvisning:

# Låt crawlers fokusera på individuella artiklar
# Inte infinite scroll-containern
Sitemap: /sitemap.xml

Resultat:

• Mänsklig UX oförändrad (infinite scroll)
• AI-crawlers får tillgång till allt innehåll via arkivsidor
• Individuella artiklar indexeras
• Citeringsfrekvens ökade 4x efter implementation

Next.js-specifik metod:

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

Fördelar:

• Statiska sidor för varje paginering
• Fullt innehåll i HTML vid build
• AI-crawlers får komplett innehåll
• Snabb laddning (statisk)

Lägg sedan till infinite scroll som förbättring:

• Klientsidans infinite scroll använder samma API
• Progressiv förbättring
• Fungerar även utan JS

Detta ger dig det bästa av två världar.

Lägger till prerendering som ett alternativ:

Prerenderingstjänster för AI-crawlers:

Du kan känna igen AI-crawler user agents och servera för-renderat innehåll:

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

AI-crawler-detektering:

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

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

Prerendering-alternativ:

• Prerender.io
• Rendertron
• Puppeteer-baserad lösning
• Prerendering vid build

Varning:

Alla AI-crawlers identifierar sig inte tydligt. Vissa kan missas. Detta är ett komplement, inte en ersättning för korrekt paginering.

Testmetodik för AI-crawler-tillgänglighet:

Manuella tester:

1. Inaktivera JavaScript-test:

   • Öppna din blogg i webbläsaren
   • Inaktivera JavaScript
   • Vilket innehåll syns?
   • Detta liknar en crawler utan JS

2. Visa sidkälla:

   • Visa sidkälla (inte inspektera element)
   • Finns ditt innehåll i HTML:en?
   • Eller bara JavaScript-platshållare?

3. curl-test:

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

   • Innehåller svaret faktiskt innehåll?

Automatiserade tester:

4. Google Search Console:

   • URL-inspektionsverktyg
   • “Visa renderad sida” visar vad Googlebot ser
   • (Inte AI-crawlers, men liknande JS-rendering)

5. Lighthouse-audit:

   • Kontrollera “SEO”-kategori
   • Crawlproblem flaggas

Du vill se:

• Innehåll i initialt HTML-svar
• Länkar till alla sidor är upptäckbara
• Ingen JS krävs för synlighet av innehåll

E-handelsvinkel:

Vi har 10 000+ produkter med “ladda fler”-funktion. Så här löste vi det:

Kategorisidstruktur:

/category/shoes                    # Första 24 produkter + ladda fler
/category/shoes?page=2            # Produkter 25-48
/category/shoes?page=3            # Produkter 49-72

Implementation:

1. Första sidan har alltid pagineringslänkar

   • Även med infinite scroll aktiverad
   • Sidfot innehåller sidor 1, 2, 3…

2. ?page=-parametrar är canonical

   • Varje sida har eget innehåll
   • Inte dubblett av huvudsidan

3. Sitemap inkluderar alla paginerade URL:er

   • Inte bara infinite scroll-bas-URL

4. Produkter har egna URL:er

   • Kategoripaginering är för upptäckt
   • Produkter är det verkliga innehållet

Resultat:

AI-plattformar citerar våra individuella produktsidor, som de hittar genom den paginerade kategoristrukturen.

Detta har varit otroligt hjälpsamt. Här är min implementeringsplan:

Metod: Hybridpaginering

Fas 1: Lägg till paginerade rutter (vecka 1–2)

• Skapa /blog/archive/[page]-rutter
• SSR för fullt innehåll i HTML
• Inkludera pagineringsnavigering
• Uppdatera sitemap att inkludera dessa

Fas 2: Uppdatera befintlig infinite scroll (vecka 3)

• Behåll infinite scroll för /blog
• Använd arkivsidorna som datakälla
• Canonical från /blog till /blog/archive/1

Fas 3: Testning och validering (vecka 4)

• Testa med JS inaktiverat
• curl-tester mot AI-user agents
• Övervaka AI-citeringsfrekvenser

Teknisk implementation:

/blog                 → Infinite scroll (människor, canonical till archive/1)
/blog/archive/1       → Paginerad (crawlers, canonical till sig själv)
/blog/archive/2       → Paginerad (crawlers)
/blog/[slug]          → Individuella artiklar (huvudinnehåll)

Viktiga principer:

• Innehåll tillgängligt utan JavaScript
• Varje innehåll har direkt URL
• Sitemap inkluderar alla innehållssidor
• Infinite scroll är en förbättring, inte ett krav

Tack alla för era detaljerade tekniska råd.