Google har kommit långt sedan de dagar då JavaScript var en total blindfläck för sökmotorer. Idag renderar Googlebot de flesta moderna webbapplikationer utan större problem. Men "de flesta" betyder inte alla. Det finns fortfarande situationer där JavaScript ställer till det för din synlighet i sökresultaten.
Frågan är inte längre om Google kan hantera JavaScript. Frågan är vad som fungerar smidigt och var du fortfarande behöver vara försiktig.
Så fungerar Googles rendering av JavaScript
Googles crawlningsprocess har två steg. Först hämtar Googlebot din HTML. Sedan skickas sidan vidare till en renderingskö där en headless version av Chrome bearbetar JavaScript och genererar det slutliga innehållet.
Det här systemet använder en relativt uppdaterad version av Chromium. Google uppdaterar sin renderare kontinuerligt, och i skrivande stund kör de en version som ligger nära den senaste stabila Chrome. Det betyder att de allra flesta moderna JavaScript-funktioner stöds.
Vad Google klarar av idag
React, Vue, Angular och andra populära ramverk fungerar generellt bra. Google kan exekvera koden, vänta på asynkrona anrop och indexera det renderade innehållet. Lazy loading av bilder med IntersectionObserver fungerar. ES6-syntax som arrow functions, template literals och async/await hanteras utan problem.
Google har också blivit bättre på att följa länkar som genereras dynamiskt. Om din navigation byggs med JavaScript kommer Googlebot i de flesta fall att upptäcka och följa länkarna.
Renderingskön skapar fördröjning
Här kommer den första haken. Även om Google kan rendera din JavaScript-tunga sajt tar det tid. Sidor hamnar i en kö och kan behöva vänta allt från några timmar till flera dagar innan de renderas fullständigt.
För en nyhetssajt eller e-handel där snabb indexering är kritiskt kan den fördröjningen vara ett problem. Din HTML indexeras direkt, men om allt viktigt innehåll ligger bakom JavaScript ser Google bara ett tomt skal tills renderingen är klar.
Det här är anledningen till att server-side rendering eller static site generation fortfarande rekommenderas för sajter där snabb upptäckt spelar roll.
Problem som fortfarande finns
Trots alla förbättringar finns det scenarier där JavaScript skapar SEO-huvudvärk. Vissa beror på tekniska begränsningar hos Google, andra på hur utvecklare implementerar saker.
Oändlig scroll utan paginering
Oändlig scroll är populärt ur användarsynpunkt, men det är en klassisk SEO-fälla. Om allt innehåll laddas dynamiskt när användaren scrollar finns det ingen garanti att Googlebot når längre än den första vyn.
Google rekommenderar att du alltid erbjuder en alternativ paginerad version eller åtminstone ser till att alla sidor har unika URL:er som kan nås direkt.
Innehåll bakom användarinteraktion
Klickar användaren på en knapp för att visa mer text? Expanderar en accordion för att visa detaljer? Det innehållet riskerar att missas. Googlebot simulerar inte klick eller scroll på samma sätt som en riktig användare.
Visst finns det undantag. Google har blivit bättre på att upptäcka dolt innehåll som är en del av DOM:en från början. Men om innehållet först laddas efter en interaktion är risken stor att det aldrig indexeras.
Timeout och tunga resurser
Google sätter en tidsgräns för hur länge de väntar på att en sida ska rendera. Exakt hur lång den är har de aldrig specificerat, men det handlar sannolikt om sekunder snarare än minuter.
Om din sajt gör tunga API-anrop, laddar stora JavaScript-buntar eller har blockerande resurser kan renderingen time out innan allt innehåll hunnit visas. Resultatet blir att Google indexerar en ofullständig version av sidan.
Felaktiga canonical-taggar och meta-data
Ett vanligt misstag är att låta JavaScript manipulera canonical-taggar eller meta-beskrivningar efter initial laddning. Problemet är att Google ibland läser dessa värden innan renderingen är klar.
Se alltid till att kritiska SEO-element finns i den första HTML-responsen. Lita inte på att JavaScript hinner sätta dem innan Google snappar upp fel värden.
Praktiska lösningar för JavaScript-sajter
Du behöver inte överge moderna JavaScript-ramverk för att lyckas med SEO. Men du behöver vara medveten om begränsningarna och planera din arkitektur därefter.
Server-side rendering löser de flesta problem
SSR innebär att servern genererar fullständig HTML innan sidan skickas till webbläsaren. Google får direkt tillgång till allt innehåll utan att behöva vänta på rendering.
Next.js för React och Nuxt för Vue erbjuder SSR inbyggt och har blivit branschstandard av en anledning. Prestandavinsten för användare är en bonus, men SEO-fördelarna är det primära argumentet för många.
Hybrid rendering för stora sajter
Statisk generering fungerar utmärkt för innehåll som inte ändras ofta. Blogginlägg, produktsidor med stabil information och landningssidor kan förrenderas vid byggtid.
För dynamiskt innehåll som sökresultat eller personaliserade sidor kan du använda incremental static regeneration eller fallback till client-side rendering för mindre kritiska element.
Testa med Googles egna verktyg
Google Search Console har en URL-inspektionsfunktion som visar exakt hur Googlebot ser din sida. Använd den regelbundet för att verifiera att viktigt innehåll renderas korrekt.
Mobile-Friendly Test är ett annat verktyg som visar den renderade versionen. Jämför skärmdumpen med vad du förväntar dig och leta efter saknat innehåll.
Framtiden för JavaScript och SEO
Google fortsätter att investera i bättre JavaScript-rendering. De har uttalat att målet är att hantera webben som den faktiskt ser ut, inte som den såg ut 2010.
Men sökmotoroptimering handlar om att minimera risker. Även om Google blir bättre hela tiden finns det ingen anledning att göra det svårare för dem än nödvändigt. Webbplatser som serverar komplett HTML direkt kommer alltid ha en fördel i snabbhet och tillförlitlighet.
Den pragmatiska hållningen är att behandla JavaScript-rendering som ett säkerhetsnät, inte en primär strategi. Se till att ditt viktigaste innehåll finns tillgängligt utan att Google behöver exekvera en enda rad JavaScript. Allt utöver det är en bonus.
Har du en befintlig sajt byggd på ett JavaScript-ramverk? Börja med att inspektera dina viktigaste sidor i Search Console. Identifiera vad som renderas och vad som saknas. Därifrån kan du prioritera vilka förändringar som ger störst effekt för din synlighet.