Ako si AI crawlery poradia s nekonečným scrollovaním? Náš obsah nie je indexovaný

Rozoberiem, ako rôzne AI crawlery spracúvajú JavaScript:

Podpora JavaScriptu v AI crawlery:

Hlavný problém:

Nekonečné scrollovanie vyžaduje:

1. Spustenie JavaScriptu
2. Vyvolanie udalosti scrollovania
3. Ďalšie HTTP požiadavky
4. Renderovanie nového obsahu

Väčšina AI crawlerov zlyhá už v kroku 1 alebo 2.

Prečo SSR nestačí:

SSR poskytuje počiatočnú stránku. Ale obsah načítaný nekonečným scrollovaním nie je “počiatočný” – načíta sa až po interakcii. SSR teda neodstráni závislosť na interakcii.

Zásadný problém:

Nekonečné scrollovanie je v súčasnosti zásadne nekompatibilné so schopnosťami AI crawlerov. Potrebujete iný prístup.

Mali sme presne tento problém. Tu je naše riešenie:

Implementácia hybridného prístupu:

// Štruktúra URL
/blog              // Nekonečné scrollovanie (default pre užívateľov)
/blog/archive/1    // Stránkované (prístupné pre crawlery)
/blog/archive/2

Kľúčové implementačné detaily:

1. Sitemap obsahuje len stránkované URL

   • AI crawlery objavujú stránky /blog/archive/*
   • Tieto renderujú plný obsah na strane servera

2. Stránka s nekonečným scrollovaním načítava rovnaký obsah

   • Využíva stránkovacie API na pozadí
   • Lepší UX pre ľudí

3. Interné odkazy smerujú na jednotlivé články

   • Nie na pozíciu v nekonečnom scrollovaní
   • Každý článok má vlastnú URL

4. robots.txt odporúčanie:

# Nech crawlery zamerajú pozornosť na jednotlivé články
# Nie na kontajner nekonečného scrollovania
Sitemap: /sitemap.xml

Výsledky:

• UX pre ľudí nezmenený (nekonečné scrollovanie)
• AI crawlery majú prístup ku všetkému obsahu cez archívne stránky
• Všetky články sú indexované
• Miera citácií sa po implementácii zvýšila 4-násobne

Špecifikum pre Next.js:

Použitie 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 } };
}

Výhody:

• Statické stránky pre každé stránkovanie
• Kompletný obsah v HTML už pri build time
• AI crawlery získajú celý obsah
• Rýchle načítanie (statické)

Potom pridajte nekonečné scrollovanie ako vylepšenie:

• Na strane klienta používa rovnaké API
• Progresívne vylepšenie
• Funguje aj bez JS

Takto získate to najlepšie z oboch svetov.

Dopĺňam možnosť prerenderovania:

Prerenderovacie služby pre AI crawlery:

Môžete detegovať user agent AI crawlerov a podávať im prerenderovaný obsah:

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

Detekcia AI crawlerov:

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

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

Možnosti prerenderovania:

• Prerender.io
• Rendertron
• Vlastné riešenie s Puppeteerom
• Prerendering pri build time

Pozor:

Nie všetky AI crawlery sa jednoznačne identifikujú. Niektoré tak môžu zostať neodhalené. Ide o doplnkový prístup, nie náhradu za správne stránkovanie.

Testovacia metodika pre prístupnosť obsahu AI crawlermi:

Manuálne testy:

1. Test s vypnutým JavaScriptom:

   • Otvorte blog v prehliadači
   • Vypnite JavaScript
   • Aký obsah je vidieť?
   • Takto to približne uvidia crawlery bez JS

2. Test zobrazenia zdroja:

   • Zobraziť zdrojový kód stránky (nie cez inspect)
   • Je tam váš obsah?
   • Alebo len JS placeholdery?

3. curl test:

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

   • Je v odpovedi skutočný obsah?

Automatizované testy:

4. Google Search Console:

   • Nástroj na kontrolu URL
   • “Zobraziť vykreslenú stránku” ukáže, čo vidí Googlebot
   • (Nie AI crawlery, ale podobné JS renderovanie)

5. Lighthouse audit:

   • Skontrolovať kategóriu “SEO”
   • Problémy s prehľadávaním budú označené

Čo chcete vidieť:

• Obsah už v počiatočnej HTML odpovedi
• Odkazy na všetky stránky sú objaviteľné
• Pre zobrazenie obsahu nie je potrebný JS

Pohľad z e-commerce:

Máme 10 000+ produktov s funkciou “načítať viac”. Tu je naše riešenie:

Štruktúra kategórie:

/category/shoes                    # Prvých 24 produktov + načítať viac
/category/shoes?page=2            # Produkty 25-48
/category/shoes?page=3            # Produkty 49-72

Implementácia:

1. Počiatočná stránka vždy obsahuje stránkovacie odkazy

   • Aj keď je zapnuté nekonečné scrollovanie
   • V pätičke sú odkazy na stranu 1, 2, 3…

2. ?page= parametre sú canonical

   • Každá stránka je vlastný obsah
   • Nie duplikát hlavnej stránky

3. Sitemap obsahuje všetky stránkované URL

   • Nie len základnú URL s nekonečným scrollom

4. Produkty majú vlastné URL

   • Stránkovanie kategórie je kvôli objaveniu
   • Produkty sú hlavný obsah

Výsledok:

AI platformy citujú naše produktové stránky, na ktoré natrafia cez stránkovanú štruktúru kategórií.

Toto bolo nesmierne užitočné. Tu je môj plán implementácie:

Prístup: Hybridné stránkovanie

Fáza 1: Pridať stránkované trasy (1.-2. týždeň)

• Vytvoriť /blog/archive/[page] trasy
• SSR pre kompletný obsah v HTML
• Pridať stránkovaciu navigáciu
• Aktualizovať sitemap na tieto stránky

Fáza 2: Aktualizovať existujúci nekonečný scroll (3. týždeň)

• Nekonečný scroll ponechať na /blog
• Ako zdroj dát použiť archívne stránky
• Canonical z /blog na /blog/archive/1

Fáza 3: Testovanie a validácia (4. týždeň)

• Testovať s vypnutým JS
• curl testy pre AI user agentov
• Sledovať mieru citácií v AI

Technická implementácia:

/blog                 → Nekonečné scrollovanie (ľudia, canonical na archive/1)
/blog/archive/1       → Stránkované (crawlery, canonical na seba)
/blog/archive/2       → Stránkované (crawlery)
/blog/[slug]          → Jednotlivé články (hlavný obsah)

Kľúčové princípy:

• Obsah prístupný aj bez JavaScriptu
• Každý obsah má priamu URL
• Sitemap obsahuje všetky obsahové stránky
• Nekonečné scrollovanie je vylepšenie, nie požiadavka

Vďaka všetkým za detailné technické rady.