Hvordan håndterer AI-crawlere uendelig scroll? Vores indhold bliver ikke indekseret

Lad mig gennemgå, hvordan forskellige AI-crawlere håndterer JavaScript:

AI-crawler JavaScript-understøttelse:

Kerneproblemet:

Uendelig scroll kræver:

1. JavaScript-eksekvering
2. Scroll-event
3. Yderligere HTTP-forespørgsler
4. Rendering af nyt indhold

De fleste AI-crawlere fejler ved trin 1 eller 2.

Hvorfor SSR ikke er nok:

Din SSR serverer den første side. Men indhold fra uendelig scroll er ikke “indledende” – det indlæses ved interaktion. SSR løser ikke afhængigheden af interaktion.

Det grundlæggende problem:

Uendelig scroll er grundlæggende uforenelig med nuværende AI-crawleres evner. Du har brug for en alternativ tilgang.

Vi havde præcis dette problem. Her er vores løsning:

Implementering af hybrid tilgang:

// URL-struktur
/blog              // Uendelig scroll (standard for brugere)
/blog/archive/1    // Paginering (crawler-venlig)
/blog/archive/2

Vigtige implementeringsdetaljer:

1. Sitemap inkluderer kun paginerede URL’er

   • AI-crawlere finder /blog/archive/* siderne
   • Disse gengiver alt indhold server-side

2. Uendelig scroll-side indlæser samme indhold

   • Bruger paginerings-API i baggrunden
   • Bedre UX for mennesker

3. Interne links peger på individuelle artikler

   • Ikke på uendelig scroll-position
   • Hver artikel har sin egen URL

4. robots.txt-vejledning:

# Lad crawlere fokusere på individuelle artikler
# Ikke uendelig scroll-containeren
Sitemap: /sitemap.xml

Resultater:

• Brugeroplevelsen uændret (uendelig scroll)
• AI-crawlere tilgår alt indhold via arkivsider
• Individuelle artikler er alle indekseret
• Citeringsraten steg 4x efter implementering

Next.js-specifik tilgang:

Brug af 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 } };
}

Fordele:

• Statiske sider for hver paginering
• Fuld indhold i HTML ved build time
• AI-crawlere får alt indhold
• Hurtig indlæsning (statisk)

Tilføj derefter uendelig scroll som forbedring:

• Klientside uendelig scroll bruger samme API
• Progressiv forbedring
• Fungerer også uden JS

Dette giver dig det bedste fra begge verdener.

Prerendering som mulighed:

Prerenderingstjenester for AI-crawlere:

Du kan detektere AI crawler user agents og servere prerenderet indhold:

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

AI-crawler detektion:

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

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

Prerendering-muligheder:

• Prerender.io
• Rendertron
• Puppeteer-baseret løsning
• Prerendering ved build time

Bemærk:

Ikke alle AI-crawlere identificerer sig tydeligt. Nogle kan blive overset. Dette er et supplement, ikke en erstatning for korrekt paginering.

Testmetoder for AI-crawler tilgængelighed:

Manuelle tests:

1. Deaktiver JavaScript-test:

   • Åbn din blog i browseren
   • Deaktiver JavaScript
   • Hvilket indhold er synligt?
   • Dette svarer til hvordan mange crawlere ser siden

2. Vis kildekode-test:

   • Vis sidens kildekode (ikke inspect element)
   • Er dit indhold i HTML’en?
   • Eller kun JavaScript-pladsholdere?

3. curl-test:

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

   • Indeholder svaret faktisk indhold?

Automatiserede tests:

4. Google Search Console:

   • URL-inspektionsværktøj
   • “Se gengivet side” viser hvad Googlebot ser
   • (Ikke AI-crawlere, men lignende JS-rendering)

5. Lighthouse-audit:

   • Tjek “SEO”-kategori
   • Flagger crawlbarhedsproblemer

Det du ønsker at se:

• Indhold i det indledende HTML-svar
• Links til alle sider kan opdages
• Ingen JS nødvendig for at vise indhold

E-commerce perspektiv:

Vi har 10.000+ produkter med “load more”-funktionalitet. Her er vores løsning:

Kategori-side struktur:

/category/shoes                    # Første 24 produkter + load more
/category/shoes?page=2            # Produkter 25-48
/category/shoes?page=3            # Produkter 49-72

Implementering:

1. Første side har altid pagineringslinks

   • Selv med uendelig scroll slået til
   • Footer har side 1, 2, 3… links

2. ?page= parametre er kanoniske

   • Hver side har sit eget indhold
   • Ikke dublet af hovedsiden

3. Sitemap inkluderer alle paginerede URL’er

   • Ikke kun uendelig scroll-base-URL

4. Produkter har individuelle URL’er

   • Kategoripaginering er til opdagelse
   • Produkterne er det egentlige indhold

Resultat:

AI-platforme citerer vores individuelle produktsider, som de finder via den paginerede kategoristruktur.

Dette har været utroligt hjælpsomt. Her er min implementeringsplan:

Tilgang: Hybrid-paginering

Fase 1: Tilføj paginerede ruter (uge 1-2)

• Opret /blog/archive/[page] ruter
• SSR for fuldt indhold i HTML
• Inkludér pagineringsnavigation
• Opdatér sitemap til at inkludere disse

Fase 2: Opdatér eksisterende uendelig scroll (uge 3)

• Behold uendelig scroll for /blog
• Brug arkivsider som datakilde
• Canonical fra /blog til /blog/archive/1

Fase 3: Test og validering (uge 4)

• Test med JS deaktiveret
• curl-tests for AI user agents
• Overvåg AI-citeringsrater

Teknisk implementering:

/blog                 → Uendelig scroll (mennesker, kanonisk til archive/1)
/blog/archive/1       → Paginering (crawlere, kanonisk til sig selv)
/blog/archive/2       → Paginering (crawlere)
/blog/[slug]          → Individuelle artikler (hovedindhold)

Vigtige principper:

• Indhold tilgængeligt uden JavaScript
• Hvert indlæg har en direkte URL
• Sitemap inkluderer alle indholdssider
• Uendelig scroll er en forbedring, ikke et krav

Tak til alle for den detaljerede tekniske vejledning.