Jak si AI crawlery poradí s nekonečným scrollováním? Náš obsah se neindexuje

Rozepíšu, jak různé AI crawlery pracují s JavaScriptem:

Podpora JavaScriptu u AI crawlerů:

Hlavní problém:

Nekonečné scrollování vyžaduje:

1. Spuštění JavaScriptu
2. Vyvolání události scroll
3. Další HTTP požadavky
4. Vykreslení nového obsahu

Většina AI crawlerů selže už v kroku 1 nebo 2.

Proč SSR nestačí:

SSR naservíruje úvodní stránku. Ale obsah z nekonečného scrollu není „úvodní“ – načítá se až po interakci. SSR neřeší závislost na interakci.

Zásadní problém:

Nekonečné scrollování je v současnosti zásadně nekompatibilní se schopnostmi AI crawlerů. Je potřeba zvolit alternativní řešení.

Řešili jsme přesně tento problém. Naše řešení:

Implementace hybridního přístupu:

// Struktura URL
/blog              // Nekonečný scroll (výchozí pro uživatele)
/blog/archive/1    // Stránkované (přístupné pro crawlery)
/blog/archive/2

Klíčové implementační detaily:

1. Sitemap obsahuje pouze stránkované URL

   • AI crawlery najdou stránky /blog/archive/*
   • Tyto stránky renderují plný obsah na serveru

2. Stránka s nekonečným scrollováním načítá stejný obsah

   • Na pozadí využívá stránkovací API
   • Lepší UX pro lidi

3. Interní odkazy vedou na jednotlivé články

   • Ne na konkrétní pozici v nekonečném scrollu
   • Každý článek má vlastní URL

4. robots.txt doporučení:

# Nechte crawlery zaměřit se na jednotlivé články
# Ne na kontejner s nekonečným scrollováním
Sitemap: /sitemap.xml

Výsledky:

• Uživatelský zážitek zůstává (nekonečný scroll)
• AI crawlery přistupují ke všem archivním stránkám
• Všechny články jsou indexovány
• Míra citací se po implementaci zvýšila 4x

Next.js konkrétní řešení:

Využití 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 pro každou stránku stránkování
• Kompletní obsah v HTML už při buildu
• AI crawlery získají všechen obsah
• Rychlé načítání (statické)

Nekonečný scroll poté přidat jako vylepšení:

• Na straně klienta využívá stejné API
• Progresivní enhancement
• Funguje i bez JS

Tím získáte to nejlepší z obou světů.

Přidávám možnost prerenderingu:

Prerenderovací služby pro AI crawlery:

Můžete detekovat AI crawler user-agenty a poskytnout jim prerenderovaný obsah:

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

Detekce AI crawlerů:

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

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

Možnosti prerenderingu:

• Prerender.io
• Rendertron
• Custom řešení na bázi Puppeteer
• Prerendering při buildu

Pozor:

Ne všechny AI crawlery se jasně identifikují. Některé tak mohou být přehlédnuty. Toto je doplňkový přístup, ne náhrada za správné stránkování.

Testovací metodika pro přístupnost AI crawlerům:

Manuální testy:

1. Test s vypnutým JavaScriptem:

   • Otevřete blog v prohlížeči
   • Vypněte JavaScript
   • Jaký obsah je vidět?
   • Přibližuje se pohledu crawleru bez JS

2. Test zobrazení zdrojového kódu:

   • Zobrazte zdrojový kód stránky (ne inspektor)
   • Je váš obsah v HTML?
   • Nebo jsou tam jen JS placeholdery?

3. Test s curl:

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

   • Obsahuje odpověď skutečný obsah?

Automatizované testy:

4. Google Search Console:

   • Nástroj pro kontrolu URL
   • „Zobrazit vykreslenou stránku“ ukáže, co vidí Googlebot
   • (Ne AI crawlery, ale podobné zpracování JS)

5. Lighthouse audit:

   • Zkontrolujte kategorii „SEO“
   • Upozorní na problémy s procházením

Co chcete vidět:

• Obsah v úvodní HTML odpovědi
• Odkazy na všechny stránky jsou dohledatelné
• Pro zobrazení obsahu není potřeba JS

Pohled e-commerce:

Máme 10 000+ produktů s funkcí „načíst více“. Naše řešení:

Struktura kategorie:

/category/shoes                    # Prvních 24 produktů + načítání dalších
/category/shoes?page=2            # Produkty 25-48
/category/shoes?page=3            # Produkty 49-72

Implementace:

1. Úvodní stránka vždy obsahuje stránkovací odkazy

   • I když je povoleno nekonečné scrollování
   • Ve footeru jsou odkazy na stránky 1, 2, 3…

2. ?page= parametry jsou canonical

   • Každá stránka je unikátní obsah
   • Ne duplikát hlavní stránky

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

   • Nejen základní URL s nekonečným scrollováním

4. Produkty mají vlastní URL

   • Stránkování kategorie slouží k objevování
   • Produkty jsou hlavní obsah

Výsledek:

AI platformy citují naše produktové stránky, které objeví díky stránkované struktuře kategorií.

Tohle bylo neskutečně užitečné. Plán implementace:

Přístup: Hybridní stránkování

Fáze 1: Přidat stránkované cesty (Týden 1-2)

• Vytvořit /blog/archive/[page] cesty
• SSR pro plný obsah v HTML
• Přidat stránkovací navigaci
• Aktualizovat sitemapu

Fáze 2: Úprava stávajícího nekonečného scrollu (Týden 3)

• Nekonečný scroll ponechat na /blog
• Jako datový zdroj využít archivní stránky
• Canonical z /blog na /blog/archive/1

Fáze 3: Testování a ověření (Týden 4)

• Testovat s vypnutým JS
• curl testy pro AI user-agenty
• Sledovat míru citací AI

Technická implementace:

/blog                 → Nekonečný scroll (pro lidi, canonical na archive/1)
/blog/archive/1       → Stránkované (pro crawlery, canonical na sebe)
/blog/archive/2       → Stránkované (pro crawlery)
/blog/[slug]          → Jednotlivé články (hlavní obsah)

Klíčové principy:

• Obsah dostupný i bez JavaScriptu
• Každý obsah má přímou URL
• Sitemap obsahuje všechny stránky s obsahem
• Nekonečný scroll je vylepšení, ne podmínka

Děkuji všem za detailní technické rady.