JavaScript SEO & Kétfázisú Indexelés (SSR vs. CSR vs. SSG)
Hogyan dolgozza fel a Google a modern JavaScript keretrendszereket (React, Next.js, Vue, Angular)? Kétfázisú indexelés, Hydration hibák és renderelési stratégiák.
Hogyan látja a Googlebot a JavaScript alapú weboldalakat? A Kétfázisú Indexelés (Two-Wave Indexing)
A hagyományos HTML oldalakkal ellentétben a kizárólag kliensoldalon renderelő (Client-Side Rendering - CSR) Single Page Application (SPA) weboldalakat a Google nem tudja azonnal feldolgozni. A folyamat két külön fázisra bomlik:
- 1. Fázis (Crawl & First Wave Indexing): A Googlebot letölti a szerverről az üres HTML vázat (pl. egyetlen `<div id="root"></div>` elemet). Azonnal indexeli a válaszban lévő statikus szövegeket és meta címkéket. Ha a tartalom csak JavaScript futtatás után jelenne meg, ebben a fázisban az oldal teljesen üresnek tűnik a keresőnek.
- 2. Fázis (Render Queue & Second Wave Indexing): A letöltött oldal bekerül a Web Rendering Service (WRS) renderelési várólistájába. Mivel a JavaScript futtatása a Google számára óriási számítási kapacitást és energiát igényel, a tényleges renderelés és a JavaScript által generált DOM kiolvasása órákkal, napokkal vagy akár hetekkel később történik meg.
- A késlekedés következménye: A friss termékek, hírek vagy árváltozások jelentős késéssel jelennek meg a Google keresőben, és a belső linkek felfedezése is drasztikusan lelassul.
Renderelési Stratégiák: CSR vs. SSR vs. SSG vs. ISR
A modern webfejlesztésben a megfelelő renderelési mód megválasztása alapvetően eldönti egy weboldal organikus keresési sikerét:
- CSR (Client-Side Rendering): A böngésző futtatja a teljes JavaScript kódot. SEO szempontból a legkockázatosabb módszer, mivel a keresőrobotok üres forráskódot látnak a letöltéskor.
- SSR (Server-Side Rendering): A szerver minden látogatói kérésre valós időben legenerálja a teljes HTML kódot. A Googlebot azonnal látja a szövegeket, viszont magasabb szerverterhelést és lassabb TTFB-t (szerver válaszidőt) eredményezhet, ha nincs mögötte hatékony gyorsítótár.
- SSG (Static Site Generation): A weboldal összes oldala a build folyamat során előre legenerálódik tiszta, statikus HTML-ként. SEO és sebesség szempontjából ez a legkorszerűbb és leggyorsabb architektúra (0 ms szerver renderelési késleltetés).
- ISR (Incremental Static Regeneration): Statikus oldalak háttérbeli, időszakos újragenerálása kérésre, ami ötvözi a statikus sebességet a dinamikus adatok frissességével.
A 4 legveszélyesebb JavaScript SEO hiba a valóságban
A modern JS keretrendszerek (React, Next.js, Vue, Nuxt) auditálásakor az alábbi kritikus hibák vezetnek a legtöbb láthatatlan rangsorolási vesztéshez:
- Törött vagy nem szabványos linkek: A JavaScript `onClick` eseménykezelőkkel vagy `<span>` tagekkel megvalósított kattintásokat a Googlebot nem képes linkként bejárni. A keresőmotorok kizárólag a valós, érvényes `href` attribútummal ellátott `<a href="...">` linkeket követik.
- Hydration hibák (Hydration Mismatch): Ha a szerver által küldött HTML nem egyezik a kliensoldali JavaScript állapotával, a böngésző eldobja a szerver DOM-ot és újragenerálja a fát. Ez megakaszthatja a robotok tartalom-értelmezését és látványos Cumulative Layout Shift (CLS) ugrálásokat okoz.
- Meta címkék és sémák késleltetett beszúrása: Ha a `<title>`, meta description és JSON-LD sémák csak kliensoldali API hívások után, másodpercekkel később szúródnak be a DOM-ba, a Googlebot első fázisú indexelője teljesen lemarad róluk.
- Blokkolt JavaScript fájlok a robots.txt-ben: Ha a robots.txt véletlenül tiltja a `/build/` vagy `/static/js/` mappák letöltését, a Google WRS motorja nem tudja renderelni a látványt, és hibásnak értékeli a mobilbarát megjelenést.
Nem vagy biztos benne, hogyan állítsd be a weboldaladon?
Minden weboldal és tartalomkezelő (WordPress, Webflow, Shopify vagy egyedi fejlesztés) más technikai felépítéssel működik. Ne pazarold az idődet a kockázatos kísérletezésre! Két debreceni egyetemistaként alaposan átvilágítjuk a teljes weboldaladat, feltárjuk az összes rejtett technikai, sebességi és SEO akadályt, és pontos, személyre szabott feladatlistát készítünk a javításhoz.