SEO pro Next.js a React weby
JavaScriptové weby přidávají krok renderování, ve kterém může důležitý obsah nebo odkazy ve výsledném HTML chybět. Rendering, hydrataci a indexaci řeším přímo v kódu.
Na této stránce
Co to je
Co je JavaScript SEO a proč JS weby mívají problém
JavaScript SEO řeší, jak zajistit, aby vyhledávače správně procházely, renderovaly a indexovaly weby postavené na JavaScriptu (React, Next.js, Vue). Je to obor technického SEO, který se zabývá tím, co se děje mezi stažením stránky a okamžikem, kdy ji Google zpracuje.
U klasického HTML webu přijde obsah ze serveru hotový. Google ho vidí hned ve zdrojovém kódu a nemusí nic dopočítávat. JavaScriptový web má oproti tomu krok navíc: část obsahu vzniká až poté, co prohlížeč spustí JavaScript.
Právě v tomto kroku vzniká řada problémů. Když klíčový text, odkazy nebo metadata závisí na chybné klientské implementaci, mohou ve vyrenderovaném HTML chybět nebo se dostat do indexu se zpožděním.
Jak to funguje
Jak Google renderuje JavaScript
Google nejdřív stáhne HTML, zpracuje v něm dostupný obsah a odkazy a stránku s odpovědí 200 zařadí do fronty renderování. Web Rendering Service potom spustí JavaScript v Chromiu a předá vyrenderované HTML zpět ke zpracování. Čekání ve frontě může trvat několik sekund i déle.
Stažení a zpracování HTML
Google stáhne HTML a zpracuje to, co v něm už je: text, odkazy a metadata. Obsah generovaný JavaScriptem uvidí až po renderování.
Fronta na rendering
Stránky s odpovědí 200 míří do fronty renderování, pokud je robots meta tag nebo hlavička nevyřadí z indexace. Doba čekání není pevně daná a u některých URL může být delší než několik sekund.
Spuštění JavaScriptu
Google stránku vyrenderuje v headless Chromiu, spustí JavaScript a teprve teď uvidí obsah, který se dogeneroval na klientu.
Google JavaScript spouští, ale serverové nebo statické renderování zůstává bezpečnější volbou pro důležitý veřejný obsah. Zrychluje přístup k obsahu uživatelům i crawlerům a nespoléhá na bezchybný běh JavaScriptu na klientu.
U malého webu nemusí klientské renderování způsobit viditelný problém. U e-shopu s tisíci produkty nebo webu s častými změnami ale zvyšuje nároky na testování, monitoring a správné načítání zdrojů.
Rendering strategie
SSR vs SSG vs ISR vs CSR, co kdy zvolit
Pro SEO je nejbezpečnější mít obsah hotový v HTML už při načtení, tedy SSR, SSG nebo ISR; čistý CSR, kde stránka přijde skoro prázdná a obsah staví JavaScript v prohlížeči, je pro indexaci nejrizikovější. Správnou metodu určuje hlavně to, jak často se obsah mění.
SSRServer-side rendering
HTML se generuje na serveru při každém požadavku.
Kdy zvolit: Obsah, který se často mění nebo je personalizovaný. Pro indexaci bezpečné, obsah je v HTML hned.
SSGStatické generování
HTML se předgeneruje jednou při buildu a servíruje se jako statický soubor.
Kdy zvolit: Obsah, který se mění zřídka. Nejrychlejší a pro indexaci bez problémů.
ISRInkrementální statická regenerace
Next.js přístup, který statické stránky po nastaveném čase znovu generuje na pozadí.
Kdy zvolit: Rozsáhlé weby s pravidelnou aktualizací. Spojuje rychlost statiky s aktuálností.
CSRClient-side rendering
HTML přijde téměř prázdné a obsah sestaví JavaScript v prohlížeči.
Kdy zvolit: Pro veřejný indexovaný obsah až poslední volba. Citlivější na chyby a vyžaduje důkladnější kontrolu.
| Metoda | Jak funguje | Kdy zvolit |
|---|---|---|
| SSRServer-side rendering | HTML se generuje na serveru při každém požadavku. | Obsah, který se často mění nebo je personalizovaný. Pro indexaci bezpečné, obsah je v HTML hned. |
| SSGStatické generování | HTML se předgeneruje jednou při buildu a servíruje se jako statický soubor. | Obsah, který se mění zřídka. Nejrychlejší a pro indexaci bez problémů. |
| ISRInkrementální statická regenerace | Next.js přístup, který statické stránky po nastaveném čase znovu generuje na pozadí. | Rozsáhlé weby s pravidelnou aktualizací. Spojuje rychlost statiky s aktuálností. |
| CSRClient-side rendering | HTML přijde téměř prázdné a obsah sestaví JavaScript v prohlížeči. | Pro veřejný indexovaný obsah až poslední volba. Citlivější na chyby a vyžaduje důkladnější kontrolu. |
Chyby z praxe
Časté JavaScript SEO chyby
Nejčastější chyby JavaScriptových webů jsou klientské odkazy bez pravého <a href>, obsah viditelný až po interakci, chybějící metadata v HTML a stránky, které u neexistujících URL vrací stav 200 místo 404. Většinu z nich web vizuálně neprozradí, projeví se až v indexu.
Hydration mismatch
HTML ze serveru a to, co dogeneruje JavaScript na klientu, se rozejdou. React obsah přepíše a výsledek renderu je nepředvídatelný – do indexu může odejít jiná verze stránky, než kterou jste odladili.
Odkazy bez pravého <a href>
Navigace řešená přes onClick nebo JavaScript bez atributu href. Google takové odkazy nesleduje spolehlivě, takže se k odkazovaným stránkám nemusí dostat.
Obsah načítaný až po interakci
Text nebo produkty, které se načtou až po scrollu nebo kliknutí. Robot při renderování neklikne ani nescrolluje, takže tento obsah neuvidí; správně nastavený lazy-load přes IntersectionObserver Google načte.
Soft 404
Neexistující URL vrací stav 200 a prázdnou nebo chybovou stránku místo pravého 404. Google je buď vyhodnotí jako soft 404 a nezaindexuje, nebo je omylem indexuje prázdné – a v obou případech na nich plýtvá crawlem.
Chybějící SSR metadata a canonical
Title, description nebo canonical se nastavují až JavaScriptem na klientu. Google je převezme až po vyrenderování – a když se liší od hodnot v HTML, může pracovat s jinou verzí, než čekáte.
Společný jmenovatel: obsah, který Google vidí, se liší od toho, co vidí uživatel.
Audit
JavaScript SEO audit
Technical / JavaScript SEO Sprint dělám od 45 000 Kč za projekt; projdu strategii renderování, indexaci, interní prolinkování, metadata a Core Web Vitals konkrétně pro váš JavaScriptový stack a připravím zadání pro vývoj s akceptačními kritérii a validací po nasazení. Konečná cena se odvíjí od velikosti webu, počtu šablon a technické složitosti; investici potvrdím po úvodním hovoru. Jednu úzce vymezenou otázku renderingu řeší zaměřená diagnostika od 25 000 Kč.
Rendering strategie
Jak se obsah dostává do HTML, jestli sedí volba SSR, SSG, ISR či CSR, a kde se zbytečně spoléhá na klientský render.
Indexace a prolinkování
Co Google reálně vidí po renderu, jestli sleduje odkazy a jestli se klíčové stránky dostávají do indexu.
Metadata a canonical
Title, description, canonical a strukturovaná data v HTML při načtení, ne až po spuštění JavaScriptu.
Výkon a Core Web Vitals
LCP, INP a CLS, velikost a načítání JavaScriptu a dopad renderu na rychlost na mobilu i počítači.
Od 45 000 Kč za projekt
Nevíte, jestli Google vidí váš JavaScriptový obsah?
Detail rozsahu a výstupů najdete na stránce SEO audit webu. Úvodní 15minutový hovor je zdarma.
Proč já
Proč JavaScript SEO se mnou
JavaScript SEO řeším z pozice člověka, který v Next.js sám vyvíjí, takže rozumím renderingu i tomu, jak ho čtou vyhledávače. Doporučení nejsou teoretická, vycházejí z reálné implementace a provozu.
Next.js je můj hlavní stack
Tento web na Next.js běží. Volbu metody renderování, generování metadat, sitemapy a canonical řeším přímo v kódu, ne jen v reportu.
Livesport a Flashscore
V Betting Content Section řeším obsahové i technické SEO napříč 20+ trhy. Indexace a rendering ve velkém měřítku, kde každá chyba násobí dopad.
Vlastní nástroje v Pythonu
Na opakované technické úlohy, jako je mapování přesměrování při migraci, používám vlastní skripty v Pythonu. Automatizace zrychluje zpracování a nechává více času na kontrolu rizik.
Časté otázky
6 otázek
01Co je JavaScript SEO?+
JavaScript SEO je obor technického SEO, který řeší, jak zajistit, aby vyhledávače správně procházely, renderovaly a indexovaly weby postavené na JavaScriptu (React, Next.js, Vue). U klasického HTML webu je obsah dostupný hned; u JS webu ho Google musí nejdřív vyrenderovat, což přidává krok, ve kterém nejčastěji vznikají chyby.
02Proč mají JavaScriptové weby problém se SEO?+
Google nejdřív stáhne HTML a URL s odpovědí 200 zařadí do fronty renderování. Web Rendering Service potom spustí JavaScript a zpracuje výsledné HTML. Pokud klíčový obsah, odkazy nebo metadata závisí na chybné klientské implementaci, mohou ve vyrenderované stránce chybět.
03Co je pro SEO lepší: SSR, SSG, ISR, nebo CSR?+
Pro SEO je nejbezpečnější mít obsah v HTML už při načtení, tedy SSR (server-side rendering), SSG (statické generování) nebo ISR (inkrementální statická regenerace) v Next.js. Čistý CSR (client-side rendering) je pro indexaci nejrizikovější. Správná volba závisí na tom, jak často se obsah mění.
04Jak zjistím, jestli Google vidí můj JavaScriptový obsah?+
Porovnejte zdrojové HTML ze serveru s vyrenderovaným DOM a použijte test živé URL v Google Search Console. Zkontrolujte, zda vyrenderované HTML obsahuje klíčový text, odkazy, metadata a strukturovaná data. Samotný rozdíl mezi zdrojem a DOM není chyba, rozhoduje výsledný obsah.
05Děláte JavaScript SEO audit?+
Ano, jako Technical / JavaScript SEO Sprint od 45 000 Kč za projekt. Projdu strategii renderování, indexaci, interní prolinkování, metadata a Core Web Vitals konkrétně pro váš JavaScriptový stack. Výstupem je zadání pro vývoj s akceptačními kritérii a validací po nasazení.
06Pracujete přímo s Next.js?+
Ano, Next.js je můj hlavní stack a tento web na něm běží. Volbu metody renderování, generování metadat, sitemap, kanonických URL a výkon řeším přímo v kódu, takže doporučení vycházejí z reálné implementace.
Začít spolupráci
15 minut. Tolik stačí k prvnímu plánu pro organický růst.
Projdu váš web a cíle. Doporučím konkrétní kroky s největším dopadem pro aktuální fázi firmy. První hovor je zdarma a bez závazku.
Domluvit konzultacimarketing@mipaco.cz