A keresőmotorok ma már képesek JavaScriptet futtatni, és a megjelenített tartalmat indexelni. Sok oldalnál azonban még mindig vannak JavaScript-problémák, amelyek ártanak a SEO-nak. Az a tartalom, amely a JavaScripttől függ a betöltődéshez, lehet, hogy nem kerül indexelésre. A késleltetve betöltött képeket talán nem találják meg. A kliensoldali renderelés lehet, hogy túl lassú. A keresőmotorok nem biztos, hogy megvárják, amíg minden betöltődik. A megfelelő JavaScript-optimalizálás biztosítja, hogy a keresők lássák az összes tartalmadat, megértsék, és hatékonyan be tudják járni.
Hogyan kezelik a keresőmotorok a JavaScriptet?
A Google úgy járja be az oldalakat, mint egy böngésző. Futtatja a JavaScriptet, megjeleníti a tartalmat, és indexeli, amit lát. Ez jó hír. Az összetett JavaScript-alkalmazások is indexelhetők.
A Google két hullámban dolgozza fel az oldalakat. Az első hullámban bejárja a HTML-t, hogy lássa az oldal alapszerkezetét. A második hullámban megjeleníti a JavaScriptet, hogy lássa a dinamikus tartalmat. Ez a kétlépcsős folyamat időt és erőforrást igényel.
Összetett JavaScriptet vagy nehéz renderelést tartalmazó oldalaknál a Google lehet, hogy nem vár meg mindent. Előfordulhat, hogy csak azt indexeli, ami néhány másodperc renderelés után látható. A lassan vagy késleltetve betöltődő tartalom nem biztos, hogy bekerül az indexbe.
Gyakori JavaScript SEO problémák
A kliensoldali renderelés késlelteti a tartalom láthatóságát. Egy üres HTML-oldal tölti be a JavaScriptet, amely megjeleníti a tartalmat. A Google először az üres oldalt látja. Ha a renderelés túl sokáig tart, a Google az üres változatot indexelheti.
A késleltetve betöltött képek és tartalom csak akkor töltődnek be, ha a látogató görget. A Google nem mindig görget. A képernyő alatti, késleltetve betöltött tartalmat lehet, hogy nem találja meg, és nem indexeli.
A JavaScript-hibák tönkreteszik a renderelést. Ha a JavaScriptben hibák vannak, az oldal nem biztos, hogy jól jelenik meg. A keresőmotorok törött, hiányos tartalmat látnak.
A paraméteres, dinamikusan generált URL-ek (page?id=123&sessionid=abc) duplikált tartalmat hoznak létre. Minden egyedi paraméter új URL-t csinál. A keresőmotorok ugyanahhoz a tartalomhoz több ezer duplikátumot láthatnak.
A JavaScript által generált meta címkéket nem biztos, hogy minden keresőrobot látja. A JavaScripttel hozzáadott Open Graph címkéket, közösségi kártyákat és más meta címkéket a közösségi média robotjai talán nem olvassák be helyesen.
Szerveroldali és kliensoldali renderelés
A szerveroldali renderelés a szerveren állítja elő a HTML-t, és úgy küldi el a böngészőnek. A HTML már tartalmaz minden tartalmat. A böngészők azonnal megjelenítik. A keresőmotorok rögtön látnak mindent.
A kliensoldali renderelés minimális HTML-t és olyan JavaScriptet küld, amely a böngészőben építi fel az oldalt. A tartalom a böngészőben jön létre, a JavaScript lefutása után. Ez tovább tart, és a keresőmotorok nem biztos, hogy mindent látnak.
SEO szempontjából a szerveroldali renderelés vagy a statikus generálás jobb. A HTML teljesen készen megy a böngészőnek (és a keresőmotoroknak). A tartalom azonnal látható.
A JavaScript renderelés tesztelése
Használd a Google Search Console URL-ellenőrző eszközét. Add meg az erősen JavaScript-alapú oldalt. A Google megmutatja, mit talált a renderelés után. Összehasonlíthatod a bejárt oldalt (amit a Google lát) azzal, amit te látsz a böngésződben.
Használd a Lighthouse-t a Chrome DevToolsban. Teszteli, mennyire bejárható az oldalad, és jelzi a JavaScripthez kapcsolódó problémákat.
Nézd meg az oldal forrását a böngészőben, hogy lásd a nyers HTML-t. Aztán vizsgáld meg az elemet, hogy lásd a renderelt DOM-ot. Hasonlítsd össze őket. Ha nagyon különböznek, kliensoldali renderelést használsz, ami összezavarhatja a keresőmotorokat.
Használj JavaScript-hibakereső proxyt vagy böngészőtesztelő szolgáltatást. Szimuláld, mit jár be a Google, és mi jelenik meg a renderelés után.
Bevált gyakorlatok a JavaScript SEO-hoz
A kritikus tartalomhoz használj szerveroldali renderelést (SSR) vagy statikus oldalgenerálást (SSG). Így a tartalom benne van a keresőmotoroknak küldött HTML-ben.
Töltsd be előre, vagy azonnal a fontos tartalmat. A képernyő felső részén lévő tartalomnál ne támaszkodj késleltetett betöltésre. A kritikus képeket és szövegeket töltsd be rögtön.
Kerüld a felesleges paraméterekkel generált URL-eket. Használj tiszta, egyszerű URL-eket. Ha mégis paramétereket kell használnod, canonical címkékkel vond össze a duplikátumokat.
Gondoskodj róla, hogy a meta címkék a HTML-ben legyenek, vagy a JavaScript gyorsan megjelenítse őket. A közösségi média robotjai és a keresőmotorok azonnal lássák a meta címkéket, ne csak nehéz renderelés után.
Teszteld a Google Search Console-lal. Nézd meg, mit lát a Google a renderelés után. Javítsd ki az eltéréseket aközött, amit te látsz, és amit a Google.
Csökkentsd a JavaScript-csomag méretét. A nagy JavaScript-fájlok tovább töltődnek le és futnak. A kisebb csomagok gyorsabban renderelődnek, és a keresőmotorok is gyorsabban járják be őket.
Keretrendszerek és SEO
A modern JavaScript keretrendszerek alapértelmezés szerint kliensoldali renderelést használnak. Ez SEO kihívásokat okoz, mert a tartalmat meg kell jeleníteni, mielőtt a keresőmotorok láthatnák.
Vannak olyan meta-keretrendszerek, amelyek szerveroldali renderelést vagy statikus generálást adnak a népszerű keretrendszerekhez. Sok kliensoldali renderelési problémát megoldanak.
Ha szerveroldali renderelés nélküli, kliensoldali keretrendszert használsz, különösen figyelj a JavaScript SEO-ra. Alaposan tesztelj a Google Search Console-lal.
Gyakori kérdések
Indexelni tudja a Google az erősen JavaScript-alapú tartalmat?
Igen, a Google tud JavaScriptet futtatni, és indexelni a megjelenített tartalmat. Ehhez azonban idő és erőforrás kell. A nagyon nehéz JavaScript lehet, hogy nem indexelődik teljesen, ha a renderelés túl sokáig tart. Tartsd hatékonyan a JavaScriptet, és a Google Search Console-lal teszteld, hogy a tartalmad indexelődik-e. A WEMASY weboldalépítőjével ezt közvetlenül a weboldaladon beállíthatod.
Szerveroldali vagy kliensoldali renderelést használjak?
A szerveroldali renderelés jobb a SEO-nak. A tartalom benne van a keresőmotoroknak küldött HTML-ben. A keresőmotorok azonnal látják, nem kell várniuk a JavaScriptre. A kliensoldali renderelés késéseket okoz, és fennáll a veszélye, hogy a tartalom nem kerül indexelésre. Azokhoz a tartalmakhoz, amelyeknek rangsorolódniuk kell a keresésben, használj szerveroldali renderelést vagy statikus generálást.
Kell a keresőmotoroknak más HTML-t kiszolgálnom?
Nem. A Google azt szereti, ha mindenkinek ugyanazt a HTML-t szolgálod ki. Ne készíts külön változatot a Googlebotnak. Használj megfelelő szerveroldali renderelést vagy renderelés-felismerést. A Google a normál látogatói változatot járja be, és minden tartalmat látnia kell.
Hogyan javítsam a késleltetve betöltött képeket a SEO miatt?
Töltsd be előre a képernyő felső részén lévő kritikus képeket. Használd a natív késleltetett betöltést (loading="lazy"), megfelelő tartalék megoldással a régebbi böngészőknek. Az Intersection Observer API-val töltsd be a képeket görgetés közben. A Google Search Console-lal teszteld, hogy a Google látja-e a képeidet.
Lassítja a JavaScript az oldalamat?
Igen, a JavaScript futtatása időbe telik. A nagy JavaScript-csomagok és a nehéz feldolgozás lassítják az oldal betöltését. Ez rontja a felhasználói élményt és a Core Web Vitals értékeket. Csökkentsd a JavaScript-csomag méretét, oszd fel a kódot, és halaszd későbbre a nem létfontosságú JavaScriptet. Csak azt töltsd be, ami kell.
Használjak JavaScriptet a meta címkék generálásához?
Ha lehet, kerüld. A meta címkék legyenek a HTML forrásban. A közösségi média robotjai és egyes keresőmotorok nem biztos, hogy futtatnak JavaScriptet. Ha mégis JavaScripttel kell meta címkéket generálnod, használj szerveroldali renderelést vagy előrenderelést, hogy benne legyenek a HTML-ben.