Vyhledávače dnes umějí spouštět JavaScript a indexovat vykreslený obsah. Přesto má mnoho webů s JavaScriptem problémy, které škodí SEO. Obsah, který se bez JavaScriptu nenačte, nemusí být indexovaný. Obrázky s líným načítáním nemusí být objeveny. Renderování na straně klienta může být příliš pomalé. Vyhledávače nemusí počkat, až se vše načte. Správná optimalizace JavaScriptu zajistí, že vyhledávače uvidí všechen váš obsah, pochopí ho a dokážou ho efektivně procházet.
Jak vyhledávače zacházejí s JavaScriptem
Google prochází stránky jako prohlížeč. Spouští JavaScript, vykresluje obsah a indexuje to, co vidí. To je dobrá zpráva. Složité JavaScriptové aplikace lze indexovat.
Google zpracovává stránky ve dvou vlnách. V první vlně projde HTML a zjistí základní strukturu stránky. Ve druhé vlně vykreslí JavaScript a uvidí dynamický obsah. Tento dvouvlnový proces vyžaduje čas a prostředky.
U stránek se složitým JavaScriptem nebo náročným vykreslováním nemusí Google počkat, až se vše načte. Může zaindexovat jen to, co je viditelné po několika sekundách vykreslování. Obsah, který se načítá pomalu nebo líně, se nemusí zaindexovat.
Časté problémy JavaScriptu se SEO
Renderování na straně klienta zdržuje viditelnost obsahu. Načte se prázdná stránka HTML a JavaScript teprve vykreslí obsah. Google nejdřív vidí prázdnou stránku. Pokud vykreslení trvá příliš dlouho, může Google zaindexovat prázdnou verzi.
Obrázky a obsah s líným načítáním se načtou, až když uživatel posune stránku. Google ne vždy posouvá. Obsah s líným načítáním pod ohybem se nemusí objevit ani zaindexovat.
Chyby v JavaScriptu rozbijí vykreslení. Pokud JavaScript obsahuje chyby, stránka se nemusí správně vykreslit. Vyhledávače pak vidí rozbitý, neúplný obsah.
Dynamicky generované adresy URL s parametry (page?id=123&sessionid=abc) vytvářejí duplicitní obsah. Každý jedinečný parametr vytvoří novou adresu. Vyhledávače pak mohou vidět tisíce duplicit téhož obsahu.
Meta značky generované JavaScriptem nemusí vidět všichni roboti. Značky Open Graph, karty pro Twitter a další meta značky přidané přes JavaScript nemusí roboti sociálních sítí přečíst správně.
Renderování na serveru a na straně klienta
Renderování na serveru vytvoří HTML na serveru a pošle ho do prohlížeče. HTML už obsahuje veškerý obsah. Prohlížeče ho zobrazí okamžitě. Vyhledávače vidí všechen obsah hned.
Renderování na straně klienta pošle minimum HTML a JavaScript, který stránku sestaví v prohlížeči. Obsah vzniká v prohlížeči až po spuštění JavaScriptu. Trvá to déle a vyhledávače nemusí vidět všechno.
Pro SEO je lepší renderování na serveru nebo statické generování. HTML se do prohlížeče (i k vyhledávačům) pošle kompletní. Obsah je vidět okamžitě.
Testování renderování JavaScriptu
Použijte nástroj Kontrola adresy URL v Google Search Console. Zadejte stránku s hodně JavaScriptu. Google ukáže, co po vykreslení našel. Můžete porovnat stránku tak, jak ji prošel (co vidí Google), s tím, co vidíte ve svém prohlížeči.
Použijte Lighthouse ve vývojářských nástrojích Chromu. Otestuje, jak dobře je stránka procházitelná, a upozorní na problémy související s JavaScriptem.
Zobrazte si v prohlížeči zdrojový kód stránky, abyste viděli surové HTML. Pak si zobrazte prvek v inspektoru a uvidíte vykreslený DOM. Porovnejte je. Pokud se hodně liší, máte renderování na straně klienta, které může vyhledávače mást.
Použijte nástroj pro ladění JavaScriptu, který umí simulovat prohlížeče a zařízení. Nasimulujte, co Google prochází a co se vykreslí.
Osvědčené postupy pro JavaScript SEO
Pro klíčový obsah používejte renderování na serveru (SSR) nebo statické generování webu (SSG). Tím zajistíte, že obsah je v HTML, které dostanou vyhledávače.
Důležitý obsah načítejte předem nebo hned. Nespoléhejte na líné načítání u obsahu nad ohybem. Klíčové obrázky a text načítejte okamžitě.
Vyhněte se dynamicky generovaným adresám URL se zbytečnými parametry. Používejte čisté a jednoduché adresy. Pokud musíte parametry použít, sloučte duplicity pomocí kanonických značek.
Dbejte na to, aby meta značky byly v HTML nebo je JavaScript vykreslil rychle. Roboti sociálních sítí i vyhledávače by měli meta značky vidět hned, ne až po náročném vykreslování.
Testujte v Google Search Console. Zkontrolujte, co Google vidí po vykreslení. Opravte jakékoli rozdíly mezi tím, co vidíte vy, a tím, co vidí Google.
Zmenšete velikost balíčku JavaScriptu. Velké soubory JavaScriptu se stahují a spouštějí déle. Menší balíčky se vykreslí rychleji a vyhledávače procházejí rychleji.
Frameworky a SEO
Moderní JavaScriptové frameworky ve výchozím nastavení používají renderování na straně klienta. To přináší výzvy pro SEO, protože obsah musí být vykreslen dřív, než ho vyhledávače uvidí.
Existují nadstavby těchto frameworků (meta-frameworky), které přidávají renderování na serveru nebo statické generování. Řeší mnoho problémů renderování na straně klienta.
Pokud používáte framework s renderováním na straně klienta bez renderování na serveru, musíte být na JavaScript SEO obzvlášť opatrní. Důkladně testujte v Google Search Console.
Často kladené otázky
Umí Google indexovat obsah s velkým množstvím JavaScriptu?
Ano, Google umí spouštět JavaScript a indexovat vykreslený obsah. Vyžaduje to ale čas a prostředky. Velmi náročný JavaScript nemusí být zaindexován celý, pokud vykreslení trvá příliš dlouho. Udržujte JavaScript efektivní a v Google Search Console testujte, jestli se váš obsah indexuje. S Tvůrcem webů od WEMASY to můžete nastavit přímo na svém webu.
Mám použít renderování na serveru, nebo na straně klienta?
Pro SEO je lepší renderování na serveru. Obsah je v HTML, které se pošle vyhledávačům. Vyhledávače ho vidí okamžitě a nemusí čekat na JavaScript. Renderování na straně klienta způsobuje zpoždění a hrozí, že se obsah nezaindexuje. Pro obsah, který se má umístit ve vyhledávání, použijte renderování na serveru nebo statické generování.
Musím vyhledávačům posílat jiné HTML?
Ne. Google dává přednost tomu, když všem posíláte stejné HTML. Nevytvářejte speciální verze pro Googlebota. Použijte správné renderování na serveru nebo detekci renderování. Google projde běžnou uživatelskou verzi a měl by vidět veškerý obsah.
Jak opravit obrázky s líným načítáním kvůli SEO?
Klíčové obrázky nad ohybem načítejte předem. Používejte nativní líné načítání (loading="lazy") se správnými záložními řešeními pro starší prohlížeče. Pomocí rozhraní Intersection Observer API načítejte obrázky při posouvání stránky. Otestujte v Google Search Console, že Google vaše obrázky vidí.
Zpomaluje JavaScript můj web?
Ano, spouštění JavaScriptu trvá. Velké balíčky JavaScriptu a náročné zpracování zpomalují načtení stránky. To škodí uživatelskému zážitku i Core Web Vitals. Zmenšete balíček JavaScriptu, rozdělte kód a odložte nepodstatný JavaScript. Načítejte jen to, co je potřeba.
Mám meta značky generovat pomocí JavaScriptu?
Pokud to jde, vyhněte se tomu. Meta značky by měly být ve zdrojovém HTML. Roboti sociálních sítí a některé vyhledávače nemusí JavaScript spouštět. Pokud musíte meta značky generovat JavaScriptem, použijte renderování na serveru nebo předrenderování, aby byly v HTML.