SEO pro single page aplikace: jak dostat SPA do indexu Google a čtení AI

SEO pro single page aplikace je soubor technik, které dělají aplikaci v JavaScriptu postavenou na React, Vue, Angular nebo Svelte stejně snadno procházitelnou jako klasický web. Problém je dobře zdokumentovaný: Google ve svých základech SEO pro JavaScript vysvětluje, že stránky s JavaScriptem zpracovává ve třech fázích (procházení, vykreslení, indexace), a každá slabina SPA leží někde v tomto řetězci. Tento návod se zaměřuje na SPA; pro weby s JavaScriptem obecně si přečtěte náš návod k SEO pro JavaScript.

Co je single page aplikace a proč je pro SEO těžká?

Tradiční web vrací pro každou URL úplný HTML dokument. SPA vrací pro každou URL téměř stejný dokument: prázdný <div id="root">, několik meta značek a velký balík JavaScriptu. Prohlížeč stáhne balík, zavolá API a pak stránku vykreslí. Když návštěvník klikne na odkaz, JavaScript obsah vymění bez znovunačtení.

Pro člověka s rychlým telefonem je výsledek okamžitý. Pro crawler je první odpovědí prázdný základ: žádný nadpis, žádný text, žádné odkazy. Vše závisí na tom, zda robot JavaScript spustí, a kdy. Tento jediný fakt vysvětluje většinu problémů SEO u SPA:

• Opožděný nebo chybějící obsah: text existuje až po vykreslení, které Google provádí později a jiné roboty přeskakují.
• Jedna URL pro mnoho zobrazení: starší SPA směrují pomocí fragmentů (/#/pricing) a část za # se na server nikdy neodešle, takže se všechna zobrazení sloučí do jedné URL.
• Stejné titulky a popisy: základ nese jeden <title>, a pokud ho router neaktualizuje, každá stránka ho sdílí.
• Odkazy bez href: tlačítka a obslužné rutiny onClick pro uživatele navigují, ale crawlerům nedají nic, co by mohly sledovat.
• Měkké chyby 404: server odpovídá 200 na každou cestu, včetně stránek, které neexistují, takže se chybové zobrazení indexuje jako tenká stránka.
• Těžký JavaScript: velké balíky zpomalují první zobrazení a interakce, což poškozuje Core Web Vitals.

Jak Google prochází a vykresluje SPA?

Googlebot nejprve stáhne surové HTML a přečte v něm odkazy a direktivy. Stránky se stavem 200 pak zařadí do fronty pro Web Rendering Service, bezhlavý Chromium. Google uvádí, že stránka „může v této frontě zůstat několik sekund, ale může to trvat i déle“. Po vykreslení se výsledné HTML znovu zpracuje kvůli obsahu a odkazům a poté se indexuje.

Čtyři detaily z dokumentace Google mají pro SPA význam:

1. Spolehlivé odkazy jsou jen prvky <a> s href. Odkazy vložené JavaScriptem jsou v pořádku, pokud tento formát dodržují.
2. Fragmenty nejsou samostatné stránky. Google žádá používat History API (pushState) místo cest s #. Svůj starý systém procházení AJAX (URL s #!) označil za zastaralý v říjnu 2015.
3. noindex v původním HTML má přednost. Google může vykreslování přeskočit, když vidí noindex, takže jeho odstranění později pomocí JavaScriptu nefunguje.
4. Vykreslování používá uložené soubory. Googlebot agresivně ukládá do mezipaměti JavaScript a CSS, takže používejte soubory s otiskem obsahu v názvu (hash v názvu souboru), aby se nenačetly zastaralé balíky.

Praktický důsledek: Google může indexovat SPA vykreslenou v prohlížeči, ale ke každé stránce přidáváte druhý krok, zpoždění a místo, kde může selhat. Časový limit, zablokované volání API nebo chyba JavaScriptu během vykreslování nechá indexovanou verzi prázdnou. Co Google vidí, zkontrolujte nástrojem Kontrola URL v Search Console a pokud stránky zůstávají mimo index, přečtěte si náš návod ke způsobu, jakým Google indexuje.

Čtou ChatGPT, Claude a Perplexity JavaScript?

Většinou ne. Ve studii zveřejněné v prosinci 2024 o provozu své sítě zjistily Vercel a MERJ, že „žádný z hlavních AI crawlerů v současnosti nevykresluje JavaScript“: GPTBot, OAI-SearchBot a ChatGPT-User (OpenAI), ClaudeBot (Anthropic), PerplexityBot, Meta-ExternalAgent a Bytespider čtou jen surové HTML. JavaScriptové soubory stahují (asi 11.5% požadavků ChatGPT a 23.8% požadavků Claude), ale nespouštějí je. Výjimkou je Gemini, který se opírá o vykreslovací infrastrukturu Google, a AppleBot, který používá crawler založený na prohlížeči.

U SPA vykreslované v prohlížeči to znamená, že AI crawlery, které napájejí ChatGPT, Claude a Perplexity, vidí prázdnou stránku. Váš produkt se může umisťovat na Google a přesto být v odpovědích AI neviditelný, protože asistent nepřečetl ani slovo. Totéž platí pro většinu botů pro náhledy odkazů na sociálních sítích a v aplikacích pro zprávy, kteří čtou značky Open Graph v surovém HTML. Jakmile je obsah v HTML, zkontrolujte také, že váš robots.txt povoluje AI crawlery, které chcete.

Která strategie vykreslování má SPA použít?

Oprava spočívá v tom, odeslat skutečné HTML už v první odpovědi. Google označuje dynamické vykreslování (bótům se posílá předvykreslená verze) za „řešení obcházející problém, nikoli doporučené řešení“ ve své dokumentaci k dynamickému vykreslování a místo něj odkazuje na vykreslování na serveru, statické vykreslování nebo hydrataci. Níže uvedené definice vycházejí z referenční příručky Rendering on the Web na web.dev.

Většina moderních frameworků umožňuje kombinovat strategie podle trasy: statické pro marketingové stránky, vykreslované na serveru pro katalog, vykreslované v klientovi pro přihlášenou aplikaci. Tento hybridní přístup dává crawlerům plné HTML tam, kde probíhá vyhledávací provoz, a zachovává zážitek SPA tam, kde přidává hodnotu.

Možnosti frameworků

Zvláštní zmínku zaslouží weby generované AI tvůrci webů: mnohé exportují aplikaci React vykreslovanou v klientovi. Pokud jste svůj web postavili jedním z nich, podívejte se na naše poznámky k SEO a GEO pro Lovable, než předpokládáte, že Google a ChatGPT ho umějí přečíst.

Kontrolní seznam SEO pro SPA: co opravit trasu po trase

1. Dejte každému zobrazení čistou, procházitelnou URL

Používejte History API (/pricing, nikdy /#/pricing), jednu URL na každý kus obsahu a stejnou URL, ať návštěvník přijde přímo nebo navigací v aplikaci. Každá URL musí po otevření v nové záložce načíst správný obsah, což je test, který crawler provádí.

2. Používejte skutečné odkazy

Každý navigační prvek, který vede na indexovatelnou stránku, by měl být <a href="/path">. Komponenty odkazů frameworku (Link, NuxtLink, routerLink) tento značkovací kód vypisují; vlastní obslužné rutiny kliknutí na prvcích div nebo button ne. Dobré odkazy také nesou vaši architekturu webu: pokud stránka není propojena, crawlery ji jen zřídka najdou.

3. Aktualizujte titulek, popis a kanonickou URL pro každou trasu

Každá trasa potřebuje vlastní titulek, meta popis, kanonickou URL a značky Open Graph, pokud možno generované na serveru. Naše stránka o meta značkách uvádí, co nastavit. Udržujte jedinou kanonickou značku: Google doporučuje nastavit ji v HTML a pokud ji změní JavaScript, výsledek nesmí být v rozporu s původní.

4. Vracejte poctivé stavové kódy

Chybějící produkty a smazané články nesmí odpovídat 200 s chybovou zprávou. U SSR vraťte ze serveru skutečný kód 404 nebo 410. V čisté SPA přijímá Google dvě náhradní řešení: přesměrovat JavaScriptem na URL, která vrací 404, nebo do chybového zobrazení přidat meta značku robots noindex.

5. Dejte hlavní obsah a strukturovaná data do HTML

Nadpisy, text, ceny, FAQ a strukturovaná data JSON-LD by měly být v odpovědi serveru, ne načítány až po kliknutí nebo posunutí. Obsah za záložkami, které se vykreslují na vyžádání, nebo za tlačítky „načíst další“, je často přehlédnut.

6. Udržujte JavaScript lehký

Rozdělte balík podle trasy, odložte to, co není potřeba pro první zobrazení, a vyhněte se opětovnému vykreslování celé stránky při hydrataci. Mějte na paměti, že terénní data Chrome (CrUX) přiřazují metriky navigací v aplikaci URL, kterou návštěvník původně načetl, takže otestujte klíčové šablony jednotlivě.

7. Otestujte, co dostávají boti

Porovnejte tři verze každé klíčové šablony: surové HTML (zobrazení zdroje nebo načtení stránky nástrojem příkazové řádky), HTML, které vykreslil Google (Kontrola URL, pak „Zobrazit prohledanou stránku“), a stránku s vypnutým JavaScriptem. Pokud se hlavní text objeví jen ve druhé verzi, AI crawlery ho nevidí. Náš bezplatný audit procházitelnosti pro AI a kontrola indexovatelnosti provedou tyto kontroly na libovolné URL.

Jak poznat, že má vaše SPA problém s SEO?

SEO pro SPA a GEO: být nalezen na Google a citován AI

Po léta bylo vykreslování na straně klienta zvladatelným rizikem, protože Google JavaScript nakonec vykreslil. Jak se část objevování přesouvá do ChatGPT, Claude, Gemini a Perplexity, náklady se změnily: stránka, která existuje až po spuštění JavaScriptu, chybí ve zdrojích, které většina asistentů umí přečíst. Procházitelnost v surovém HTML se stala první podmínkou optimalizace pro generativní vyhledávače.

Jakmile je HTML úplné, zbytek se řídí obvyklými pravidly: stránky, které jasně odpovídají na jednu otázku, s doloženými fakty a strukturovanými daty, jsou ty, které asistenti citují. Funkce optimalizace GEO od Sorank vám pomohou takový obsah napsat a publikovat a sledování zmínek v AI ukáže, zda ChatGPT, Claude a Gemini citují vaši značku po opravě vykreslování.

Klíčové pravidlo SEO pro single page aplikace se vejde do jedné věty: cokoli chcete, aby Google zařadil a AI citovalo, musí být v HTML, které server odesílá. Ponechte SPA pro přihlášený zážitek, veřejné stránky vykreslujte na serveru nebo při sestavení a před každým vydáním i po něm otestujte, co dostávají boti.