JavaScript SEO: prečo Google nevidí vašu React či Vue aplikáciu a ako to opraviť

Prečo jednostránkové aplikácie a SEO nie sú kamaráti

Klasická jednostránková aplikácia (SPA) funguje tak, že server pošle takmer prázdnu stránku a JavaScript v prehliadači z nej poskladá obsah. Pre človeka je to neviditeľné. Robot, ktorý JavaScript nespustí, však vidí len toto:

<body>
  <div id="app"></div>
  <script src="/assets/index-3f2a9c.js"></script>
</body>

Googlebot JavaScript spúšťať vie, ale robí to v druhej fáze — stránku si zaradí do fronty na vykreslenie a vráti sa k nej neskôr. Ak je aplikácia pomalá, API neodpovie včas alebo skript skončí chybou, Google zaindexuje prázdnu stránku. A mnohí ďalší roboti JavaScript nespúšťajú vôbec: náhľady na Facebooku, LinkedIne či v aplikácii WhatsApp, väčšina AI robotov aj časť menších vyhľadávačov.

Spôsoby vykresľovania a ich vplyv na SEO

Moderné frameworky to riešia priamo: Next.js pre React, Nuxt pre Vue, SvelteKit, Astro či Angular s vykresľovaním na serveri. Najčastejšie a najrozumnejšie riešenie je kombinácia — verejné stránky (úvod, služby, cenník, blog, produkty) sa vykresľujú na serveri a samotná aplikácia po prihlásení beží ako SPA. Tú Google aj tak nevidí a nemá vidieť.

Odkazy musia byť odkazy

Google objavuje nové stránky tak, že nasleduje odkazy. Rozpozná však len skutočný element <a> s atribútom href. Tlačidlo či div, ktorý zmení stránku cez JavaScript, pre neho nie je odkaz.

<!-- Google tento odkaz nenájde -->
<span onclick="router.push('/cennik')">Cenník</span>

<!-- Google ho nájde a bude nasledovať -->
<a href="/cennik">Cenník</a>

• Komponenty routera sú v poriadku. Link v Next.js, RouterLink vo Vue či NuxtLink vykresľujú skutočné <a href>. Problém vzniká, keď ich niekto nahradí vlastným tlačidlom.
• Žiadne adresy s mriežkou. URL ako /#/cennik Google považuje za jednu stránku. Používajte normálne cesty cez History API.
• Stránkovanie namiesto nekonečného posúvania. Ak sa produkty načítavajú až pri posúvaní, Google ich neuvidí. Doplňte stránkovanie s vlastnými URL.

Každá URL vlastný titulok, popis a kanonickú adresu

Častá chyba SPA: všetky stránky majú rovnaký title „Moja aplikácia“, pretože sa nastavuje len raz v index.html. Pre Google sú to desiatky duplicitných stránok. Každá cesta potrebuje vlastný title, meta description, canonical a značky Open Graph pre náhľady pri zdieľaní.

Frameworky na to majú nástroje — Metadata API v Next.js, useHead v Nuxte, prípadne knižnice ako react-helmet-async či Unhead. Dôležité je, aby tieto značky boli v HTML, ktoré posiela server. Ak ich doplní až JavaScript, Facebook a LinkedIn ich neuvidia. Ako písať titulky, na ktoré sa kliká, nájdete v článku o title a meta description.

Skryté pasce, ktoré stoja indexáciu

• Falošné stránky 404. SPA často vráti na neexistujúcu adresu stav 200 a vykreslí „Stránka sa nenašla“. Google takú stránku považuje za skutočnú. Server musí pre neexistujúce URL vrátiť stav 404.
• Obsah až po kliknutí. Google na stránke neklikne ani nič nevyplní. Text v záložkách, ktoré sa načítajú z API až po kliknutí, nevidí. Obsah pošlite v HTML a záložky len skrývajte cez CSS.
• Blokované zdroje. Ak robots.txt zakazuje priečinok so skriptmi alebo API, ktoré stránka potrebuje na vykreslenie, Google vykreslí prázdnu stránku.
• Pomalé API. Ak dáta prídu po niekoľkých sekundách, vykresľovanie môže skončiť skôr. Pri SSR sa tento problém nerieši.
• Štruktúrované dáta z JavaScriptu. Google ich spracuje, no spoľahlivejšie je posielať ich v HTML zo servera.

Ako overiť, čo Google naozaj vidí

1. Zobrazte zdrojový kód. Skratka Ctrl+U (na Macu Cmd+Option+U) ukáže HTML zo servera. Ak v ňom nenájdete nadpis a text stránky, obsah vykresľuje až JavaScript. Pozor — nástroj Preskúmať prvok ukazuje stav po vykreslení, ten vás neprezradí.
2. Kontrola webovej adresy v Search Console. Zadajte URL, kliknite na Otestovať publikovanú URL a potom Zobraziť testovanú stránku. Uvidíte HTML po vykreslení aj snímku obrazovky tak, ako ju vidí Googlebot.
3. Vypnite JavaScript. V nástrojoch prehliadača vypnite JavaScript a načítajte stránku. Čo vidíte, vidí väčšina robotov okrem Googlu.
4. Overte náhľad pri zdieľaní. Ladiaci nástroj pre zdieľanie od Facebooku či Post Inspector od LinkedInu ukážu, čo z vašej stránky vyčítajú.

Rýchla kontrola z príkazového riadka — ak príkaz nevypíše nadpis, server ho neposiela:

curl -s https://www.vasaaplikacia.sk/cennik | grep -i "<h1"

Ako prejsť na SSR bez paniky

Ak už máte hotovú SPA, nemusíte ju prepisovať naraz. Postupujte podľa toho, ktoré stránky prinášajú najviac:

• Najprv verejné stránky. Úvod, služby, cenník, produkty a blog presuňte do frameworku so SSR alebo SSG. Aplikácia za prihlásením môže ostať bez zmeny na samostatnej ceste či subdoméne.
• Predvykreslenie pri builde. Pri menšom počte stránok stačí vygenerovať statické HTML kľúčových ciest pri každom nasadení.
• Dynamické vykresľovanie len dočasne. Posielanie iného HTML robotom než ľuďom Google označuje za dočasné obchádzkové riešenie, nie za dlhodobú cestu.

Bonusom je rýchlosť: stránka vykreslená na serveri ukáže obsah skôr, čo zlepší metriku LCP aj pocit používateľa. Viac v článku o Core Web Vitals.

Čo nie je v HTML zo servera, to pre polovicu internetu neexistuje. Moderný framework nie je problém — problém je, keď ho necháte robiť všetko v prehliadači. Zásada JavaScript SEO

Časté otázky

Vie Google spracovať JavaScript?

Áno, Googlebot používa aktuálnu verziu prehliadača Chromium a JavaScript spúšťa. Robí to však s oneskorením a nie vždy úspešne. Ostatné vyhľadávače, sociálne siete a AI roboti to väčšinou nerobia vôbec, preto je obsah v HTML zo servera najbezpečnejšia cesta.

Musím celú aplikáciu prepísať do Next.js alebo Nuxtu?

Nie. Stačí, aby sa na serveri vykresľovali verejné stránky, ktoré majú byť vo výsledkoch vyhľadávania. Časť aplikácie za prihlásením môže ostať ako klasická SPA.

Zrýchli SSR aj aplikáciu?

Prvé zobrazenie stránky väčšinou áno — používateľ vidí obsah skôr, než sa stiahne a spustí všetok JavaScript. Interaktivita závisí od toho, koľko JavaScriptu stránka potrebuje, takže aj pri SSR sa oplatí ho držať na uzde.