Zabíjí JavaScript naši viditelnost pro AI? AI crawlery jako by přehlížely náš dynamický obsah

Vaše podezření je správné. Většina AI crawlerů JavaScript NEspouští.

Jak různé crawlery pracují s JS:

Proč na tom záleží: Pokud je váš obsah vykreslován na straně klienta JS, AI crawlery vidí:

<div id="app"></div>

Ne váš skutečný obsah.

Hierarchie řešení:

1. Server-side rendering (SSR) – obsah v počáteční HTML odpovědi
2. Statická generace stránek (SSG) – předem vytvořené HTML stránky
3. Prerenderovací služba – služba vykreslí JS pro boty
4. Hybridní rendering – SSR pro klíčový obsah, klient pro interakce

Váš React app může implementovat cokoli z toho. Next.js usnadňuje SSR/SSG.

Přesně tuto migraci jsme udělali. Praktická zkušenost:

Předtím (React SPA):

• Vykreslování na straně klienta
• Obsah přes API volání
• AI viditelnost: Nula

Poté (Next.js SSR):

• Server-side rendering pro všechny obsahové stránky
• Statická generace pro dokumentaci
• AI viditelnost: Roste každý týden

Tipy k implementaci:

1. Používejte App Router se Server Components Výchozí je SSR – obsah prostě funguje

2. Načítání dat na serveru

   // Běží na serveru, obsah v HTML
   async function Page() {
     const data = await fetch('...');
     return <Article data={data} />;
   }
   

3. Vyhněte se ‘use client’ u obsahových komponent Klientské komponenty jen pro interaktivitu

4. Metadata API pro SEO/AI

   export const metadata = {
     title: '...',
     description: '...',
   };
   

Náročnost migrace: Asi 3 týdny pro středně velký web. Stojí to za to.

Výsledky: První AI citace se objevily do 6 týdnů od spuštění SSR.

Pokud migrace není možná, prerendering je možnost:

Co prerendering dělá:

• Služba vykreslí váš JS pro požadavky botů
• Vrací crawlerům plné HTML
• Skuteční uživatelé dostanou vaši SPA

Oblíbené služby:

• Prerender.io
• Rendertron
• Řešení na bázi Puppeteer

Implementace: Middleware rozpozná uživatelského agenta bota a přesměruje na prerender službu.

Výhody:

• Žádné změny v kódu
• Funguje s jakýmkoli frameworkem
• Rychlá implementace

Nevýhody:

• Další náklady
• Latence pro požadavky botů
• Složitější cachování
• Závislost na třetí straně

Kdy použít:

• Velký legacy kód
• Migrace není krátkodobě možná
• Rychlá oprava AI viditelnosti

Kdy NEpoužívat:

• Nové projekty (rovnou SSR)
• Malé weby (migrace je jednodušší)
• Nízký rozpočet (prerendering stojí peníze)

Prerendering je přechodné řešení, ne ideální dlouhodobá strategie.

Možnosti frameworků pro AI-friendly weby:

Doporučení podle situace:

• Nový projekt: Next.js, Nuxt nebo SvelteKit
• Migrace z Reactu: Next.js
• Migrace z Vue: Nuxt
• Obsahově bohatý web: Gatsby nebo Astro
• Blog/dokumentace: Hugo, Eleventy nebo Astro

Pro AI viditelnost funguje cokoli se SSR/SSG. Čisté client-side rendering nefunguje.

Hybridní rendering pro komplexní aplikace:

Výzva: Některé části vaší aplikace POTŘEBUJÍ client-side rendering (dashboardy, interaktivní nástroje). Ale obsah potřebuje SSR.

Řešení: Hybridní rendering

1. Obsahové stránky: Plný SSR

   • Blogové příspěvky, dokumentace
   • Marketingové stránky
   • FAQ a znalostní báze

2. Interaktivní prvky: Klientská strana

   • Dashboardy
   • Formuláře a nástroje
   • Uživatelsky specifický obsah

Next.js App Router to usnadňuje:

• Server Components pro obsah
• Client Components pro interaktivitu
• Volně kombinovatelné na jedné stránce

Příklad struktury:

// Stránka je server-renderovaná
export default function Page() {
  return (
    <>
      <ServerRenderedContent /> {/* Toto AI uvidí */}
      <ClientInteractiveWidget /> {/* Toto AI nepotřebuje */}
    </>
  );
}

Princip: Cokoli chcete, aby AI viděla: Vykreslete na serveru. Vše ostatní: Klientská strana je v pořádku.

Testování AI viditelnosti obsahu:

Metoda 1: Zobrazit zdroj

• Pravé tlačítko → Zobrazit zdroj
• Pokud je obsah vidět = AI ho vidí
• Pokud jen <div id="root"></div> = AI ho nevidí

Metoda 2: Vypnutí JavaScriptu

• DevTools v prohlížeči → Nastavení → Zakázat JavaScript
• Obnovit stránku
• Pokud obsah zmizí = AI ho nevidí

Metoda 3: curl test

curl -A "GPTBot" https://yoursite.com/page | grep "váš obsah"

Pokud obsah vrátí, je to v pořádku.

Metoda 4: Google Rich Results Test

• Testuje vykreslený obsah
• Ukáže, co vidí Googlebot
• Podobné tomu, co vidí AI boti

Po implementaci SSR: Proveďte tyto testy znovu. Obsah by měl být viditelný všemi metodami.

Tip: Nastavte monitoring na zachycení regresí. SSR může přestat fungovat bez zjevných příznaků.

Dopady SSR na výkon:

SSR zvyšuje zatížení serveru:

• Každý požadavek potřebuje serverové vykreslení
• Vyšší výpočetní náročnost než statické soubory
• Klíčové je cachování

Strategie zmírnění:

1. Statická generace, kde to jde

   • Blogy, dokumentace = staticky
   • Dynamický obsah = SSR

2. Incremental Static Regeneration (ISR)

   • Pravidelná obnova statických stránek
   • Nejlepší z obou světů

3. Edge rendering

   • Vykreslení na CDN edge
   • Rychlejší TTFB globálně

4. Cachovací vrstvy

   • Caching celých stránek
   • Caching na úrovni komponent

Výhoda vs. nevýhoda: SSR stojí víc na výpočet, ale přináší AI viditelnost. Pro většinu firem stojí viditelnost za investici do infrastruktury.

Monitoring: Sledujte TTFB po implementaci SSR. Pokud je pomalý, boti mohou stránku opustit ještě před načtením obsahu.

Potvrdilo to problém i přineslo jasná řešení. Náš akční plán:

Ihned (tento týden):

1. Audit aktuálního renderingu pomocí curl testů
2. Identifikace nejdůležitějších obsahových stránek pro AI viditelnost
3. Kontrola robots.txt pro přístup AI botů

Krátkodobě (příští kvartál):

1. Zahájit migraci na Next.js u obsahových stránek
2. Zavést SSR/SSG pro blog, dokumentaci a marketingové stránky
3. Dashboard/aplikace ponechat na klientské straně

Implementační postup:

1. Začít s nejhodnotnějšími obsahovými stránkami
2. Po každé dávce testovat AI viditelnost
3. Pro často aktualizovaný obsah použít ISR
4. Monitorovat TTFB průběžně

Technická rozhodnutí:

• Next.js App Router se Server Components
• Statická generace pro dokumentaci
• SSR pro blog a marketing
• Klientské komponenty jen kde je to nutné

Testovací plán:

1. curl testy po každém nasazení
2. Kontrola zdrojového kódu
3. Monitorování AI citací v čase
4. Sledovat, které stránky jsou citované

Klíčový poznatek: Client-side rendering = neviditelné pro AI. SSR/SSG = viditelné. Migrace je pro AI viditelnost nevyhnutelná.

Díky všem – teď máme jasnou cestu vpřed!