JavaScript SEO: co z vašeho webu vidí Google a AI crawlery

Proč na JavaScriptu u SEO záleží

Když prohlížeč otevře stránku, dostane od serveru HTML. Na klasickém webu v něm je všechno: nadpis, text, odkazy, ceny. Moderní weby postavené na frameworcích jako React, Vue nebo Angular to často dělají jinak. Server pošle téměř prázdnou kostru a obsah do ní doplní až JavaScript v prohlížeči. Návštěvník rozdíl nepozná, robot ano.

Robot vyhledávače nebo AI asistenta je program, který stránku stáhne a přečte. Pokud JavaScript nespustí, vidí jen tu prázdnou kostru. Pro něj pak na stránce není žádný text, žádné produkty a žádné odkazy na další stránky. A co robot nevidí, to nemůže zařadit do výsledků ani citovat v odpovědi.

Pro AI viditelnost je to zásadní rozdíl. Web, který v Googlu funguje dobře, může být pro ChatGPT nebo Perplexity skoro prázdný. Přístup AI robotů přitom nemusí blokovat jen JavaScript, ale i robots.txt nebo firewall. Ten se věnuje článek robots.txt a AI boti.

Příklad: autoservis v Liberci si nechal udělat nový web jako aplikaci v Reactu. Vypadá skvěle, načítá se plynule a v Googlu se po pár týdnech objevil. Na otázku „kde v Liberci opraví klimatizaci v autě“ ho ale ChatGPT při zkoušení majitele ani jednou necitoval. Důvod se ukázal po zobrazení zdroje stránky: server posílal jen prázdný prvek <div id="root"> a odkaz na skript. Ceník, seznam služeb i adresa vznikaly až v prohlížeči. Pro AI crawlery byl web prázdný.

Server-side, client-side a předgenerované stránky

Způsobu, jakým web vyrábí HTML, se říká vykreslování (anglicky rendering). Pro SEO jsou důležité tři varianty:

• Client-side rendering (CSR), vykreslení v prohlížeči. Server pošle kostru a JavaScript, obsah vznikne až u návštěvníka. Typické pro single-page aplikace (SPA) v Reactu nebo Vue bez dalšího nastavení. Pro SEO nejrizikovější.
• Server-side rendering (SSR), vykreslení na serveru. Server při každém požadavku poskládá hotové HTML s obsahem. JavaScript pak stránku jen „oživí“ (tomu se říká hydratace). Robot dostane vše hned.
• Static site generation (SSG), předgenerované stránky. HTML vznikne předem při sestavení webu a server ho jen posílá. Rychlé a pro roboty ideální, hodí se pro obsah, který se nemění každou minutu.

Existuje ještě dynamický rendering: robotům se posílá předem vykreslená verze a lidem běžná aplikace. Google ho dnes označuje za dočasné obejití problému, ne za doporučené řešení. Pokud web stavíte znovu, zvolte rovnou SSR nebo SSG.

Proč nestačí, že Googlebot JavaScript zvládne? Vykreslování je pro Google náročnější než prosté stažení HTML, proto stránky čekají ve frontě. U nového obsahu to znamená pomalejší zařazení do výsledků. Když skript selže nebo načítá data z pomalého rozhraní, Google může uložit stránku bez obsahu. A nakonec: HTML ze serveru je jediná verze, kterou spolehlivě přečtou všichni roboti, od Googlu přes Seznam až po AI asistenty.

Jak otestovat, co robot vidí

Rozdíl mezi tím, co vidí člověk a co robot, ověříte za pár minut. Projděte tyto kroky na titulní stránce, jedné kategorii a jednom detailu produktu nebo článku:

1. Zobrazit zdroj stránky. V prohlížeči stiskněte Ctrl+U (na Macu Cmd+Option+U). Uvidíte HTML přesně tak, jak ho poslal server. Hledejte přes Ctrl+F nadpis stránky a větu z textu. Pokud tam nejsou, AI crawlery je nevidí. Pozor: panel Elements ve vývojářských nástrojích ukazuje stav po spuštění JavaScriptu, ten pro test nepoužívejte.
2. Příkaz curl. V terminálu stáhněte stránku bez prohlížeče, příklad je pod tímto seznamem. Výstup ukáže, jestli je hledaný text v HTML ze serveru.
3. Vypnutý JavaScript. Ve vývojářských nástrojích Chromu otevřete příkazovou nabídku (Ctrl+Shift+P), napište „Disable JavaScript“ a stránku obnovte. Co zmizí, to robot bez JavaScriptu nevidí.
4. Kontrola URL v Google Search Console. Vložte adresu, spusťte test živé URL a otevřete zobrazení testované stránky. Uvidíte HTML po vykreslení Googlem a snímek obrazovky. Tak poznáte, jestli Googlebot obsah zvládne vykreslit. Postup najdete v návodu na Google Search Console.

curl -s -A "OAI-SearchBot" https://www.vasweb.cz/sluzby/ | grep -i "výměna oleje"

# Prázdný výstup = text v HTML ze serveru chybí

Kontrolujte nejen viditelný text, ale i to, co robot potřebuje k orientaci: značku <title>, meta popisek, kanonickou adresu, strukturovaná data a hlavně odkazy. Odkaz musí být v HTML jako <a href="/kontakt">. Prvek, který na stránku přejde jen po kliknutí přes JavaScript, robot jako odkaz nepozná.

Řešení pro React, Next.js a další frameworky

Dobrá zpráva: moderní frameworky umí server-side rendering i předgenerování, jen ho je třeba použít.

• Next.js (React). V aktuálních verzích se komponenty ve výchozím stavu vykreslují na serveru. Problém vzniká, když se data načítají až v prohlížeči (například v useEffect) nebo když je celá stránka označená jako klientská. Data pro obsah načítejte na serveru a metadata nastavte přes vestavěné API pro metadata.
• Nuxt (Vue) má SSR ve výchozím nastavení. Zkontrolujte, že ho nikdo nevypnul kvůli jednoduššímu hostingu.
• Čistá SPA v Reactu nebo Vue (například vytvořená přes Vite bez dalšího frameworku). Nejčistší je přechod na Next.js, Nuxt nebo Astro. Pokud to nejde, pomůže předgenerování důležitých stránek (prerendering) při sestavení webu.
• Angular nabízí vykreslování na serveru jako součást frameworku. Ověřte, že je zapnuté pro veřejné stránky.
• Astro a další generátory statických webů posílají ve výchozím stavu hotové HTML. JavaScript přidávají jen k interaktivním částem.

Stavebnice, e-shopové platformy a WordPress

Majitelé webů na WordPressu, Shoptetu nebo běžných stavebnicích obvykle nemusí řešit framework. Tyto systémy posílají hlavní obsah stránky v HTML. Problém ale bývá v doplňcích:

• Vložené widgety. Recenze, ceníky, rezervační kalendáře nebo menu restaurace načtené ze služby třetí strany přes skript. Kavárna v Brně má třeba celé menu ve vloženém widgetu, a AI asistent pak na dotaz „kde v Brně mají ovesné mléko“ nemá co citovat.
• Obsah v záložkách a rozbalovacích blocích, který se načte až po kliknutí. Pokud je text v HTML jen skrytý, je to v pořádku. Pokud se stahuje až po kliknutí, robot ho nevidí.
• Nekonečné načítání produktů nebo článků při posouvání. Bez klasického stránkování s vlastními adresami robot uvidí jen první várku.
• Texty jako obrázky. Ceník nebo leták vložený jako obrázek bez textu nepřečte robot ani čtečka pro nevidomé.

U widgetů je řešení jednoduché: nejdůležitější informace (otevírací dobu, ceny, hlavní položky menu) napište i jako běžný text na stránku.

Nejčastější chyby JavaScript SEO

• `noindex` v HTML ze serveru, který JavaScript později odstraní. Google takovou stránku nemusí vůbec vykreslit a do indexu ji nezařadí. Pravidla k indexaci popisuje článek noindex a nofollow.
• Titulek, popisek a kanonická adresa nastavené až skriptem. AI crawlery je neuvidí a Google je může přečíst pozdě nebo jinak. Mějte je v HTML ze serveru. Proč na kanonické adrese záleží, vysvětluje článek kanonická URL.
• Adresy s mřížkou typu /#/produkty/kava. Část za # robot nepovažuje za samostatnou stránku. Používejte běžné adresy.
• Falešné chyby 404. SPA vrátí kód 200 i pro neexistující adresu a teprve skript zobrazí „stránka nenalezena“. Server má vracet skutečný kód 404.
• Zablokované skripty. robots.txt zakazuje složku s JavaScriptem nebo CSS, a Google pak stránku nevykreslí správně.
• Pomalé načítání. Velké balíky JavaScriptu zpomalují zobrazení i reakci stránky a zhoršují Core Web Vitals. Víc v článku rychlost webu.

Jak ověřit, že je opraveno

Po úpravě zopakujte test zdrojem stránky a příkazem curl. V Search Console spusťte Kontrolu URL a požádejte o novou indexaci u nejdůležitějších stránek. V přehledu indexace stránek pak během několika týdnů sledujte, jestli ubývá stránek, které Google procházel, ale do indexu nezařadil. Pokud Google stránky dál neindexuje, příčiny může být víc; projděte článek proč Google neindexuje stránky.

Pro AI je nejjednodušší test přímo zeptat se. Vložte adresu stránky do ChatGPT nebo Perplexity a požádejte o shrnutí jejího obsahu. Pokud asistent odpoví, že stránka je prázdná nebo nic neobsahuje, máte jasnou odpověď. Bezplatný sken Zmínky čte stránku podobně jako AI crawlery, tedy bez spouštění JavaScriptu, a upozorní na mělký obsah nebo chybějící nadpisy v HTML ze serveru. Jako doplněk můžete AI asistentům nabídnout přehled webu v souboru llms.txt, ten ale chybějící obsah v HTML nenahradí.