JavaScript SEO: Så ser du till att Google kan indexera din JavaScript-sajt

I den här guiden går jag igenom allt du behöver veta om JavaScript SEO.

Du kommer bland annat att lära dig:

• 🕷️ Hur du säkerställer att Google kan crawla och indexera din sajt
• 🔗 Best practice för interna länkar
• 🚀 Hur du förhindrar att JavaScript slöar ner din sajt
• ✅ Dos and don’ts när du skapar URL:er

Vad är JavaScript?

JavaScript, även kallat JS, är ett programmeringsspråk (eller skriptspråk) som främst används för webben.

Det spelar en central roll vid byggandet av moderna, dynamiska och skalbara sajter.

Enligt PYPL Index är JavaScript det tredje mest populära programmeringsspråket i världen, endast slaget av Python och Java.

Skriptspråket var ursprungligen ett renodlat frontend-språk, som exekverades i en webbläsares Javascriptmotor, men idag används JavaScript även utanför webbläsaren.

Ett vanligt exempel är Node.js, en plattform som tillåter utvecklaren att använda Javascript på serversidan för att kunna arbeta med t.ex. anslutningar till databaser och att skicka e-mejl.

Vad är JavaScript SEO?

Javascript SEO är en disciplin inom teknisk SEO som fokuserar på att optimera sajter byggda i JavaScript för sökmotorer.

Kortfattat handlar det om att säkerställa att Google (och andra sökmotorer) kan crawla, rendera och indexera sajtens huvudsakliga innehåll.

JavaScript SEO omfattar även att se till att sökmotorer kan förstå länkar och bilder korrekt. Och att se till att sajtens laddningshastighet inte blir negativt påverkad av JavaScript-koden.

Vad är en “JavaScript-sajt”?

Som sagt: Hela 95% av alla sajter använder sig – på ett eller annat sätt – av JavaScript. I vilken utsträckning varierar såklart. Vissa är helt beroende av JavaScript för att fungera, medan andra använder JavaScript för ett fåtal interaktiva element.

”JavaScript-sajter” syftar på de förstnämnda. Dvs. sajter vars huvudsakliga innehåll laddas genom en DOM-manipulation via JavaScript.

Så ser du om en sajt är byggd i JavaScript

Det absolut lättaste sättet att se hur beroende en sajt är av JavaScript (som renderas i browsern) är att besöka sidan och stänga av JavaScript i din webbläsare.

Öppna webbläsarens utvecklingsverktyg genom att högerklicka på sidan i fråga, och välj ”granska” eller ”inspektera”.

Med utvecklingsverktyget uppe:

1. Håll in ctrl, shift och p för att få upp en sökruta
2. Skriv in ”disable JavaScript” och tryck på enter
3. Ladda om sidan

Nu ser du sidan, minus alla de element som kräver JavaScript för att renderas.

Ett annat sätt att snabbt kontrollera om en webbplats är byggd med ett JavaScript-ramverk är att använda verktyg som BuiltWith eller Wappalyzer.

Har JavaScript en negativ effekt på SEO?

Det beror på. JavaScript behöver inte ha en negativ effekt på SEO, men ställer ofta till det när sökmotorer ska crawla och indexera sajten.

För även om sökbotarna med tiden har blivit allt bättre på att tolka JavaScript-kod så finns det fortfarande en del fallgropar. Och även om sökboten kan crawla sajten så är rendering av JavaScript mer resurskrävande.

Hur crawlar Google JavaScript?

Innan vi går igenom hur du jobbar med JavaScript SEO är det viktigt att du förstår hur Google bearbetar din JavaScript-sajt.

För HTML-sidor sker processen i tre steg, där Google:

1. Crawlar sidan
2. Laddar ner HTML-filen och övriga resurser (så som CSS-filer)
3. Indexerar sajten

För en JavaScript-sajt tillkommer ytterligare ett steg som ofta benämns som ”second wave indexing” eller ”second wave crawling”.

”Second wave indexing” innebär att Google köar, eller nedprioriterar, indexering av innehåll som kräver att klienten (dvs. webbläsaren eller i det här fallet, Googlebot) renderar Javascript-filer. Detta steg sker inte direkt och processen kräver, som tidigare nämnt, mer resurser från sökjätten.

Det, i sin tur, innebär att:

• Det tar längre tid för nytt innehåll att bli indexerat av Google
• Det ”kostar” mer i Crawl Budget

Om Google bedömer att processen är för resurskrävande, att det tar lång tid att rendera JavaScriptet eller om de stöter på något annat problem under renderingen, så kan de i värsta fall välja att helt strunta i detta steg. Vilken i slutändan med största sannolikhet leder till att din sidas innehåll bedöms som ”tunt” och inte indexeras överhuvudtaget.

Tack och lov finns det ett effektivt sätt att kringgå problemet. Genom att för-rendera sajten, innan sökmotorn crawlar den, slipper du eventuella indexeringsbekymmer!

4 sätt att för-rendera en JavaScript-sajt

Enligt min erfarenhet är för-rendering avgörande om du vill att din JavaScript-sajt ska kunna konkurrera i det organiska sökresultatet. Nedan har sammanfattar jag fyra av de vanligaste metoderna för att för-rendera JavaScript.

Server-side rendering (SSR)

Server-side rendering är när JavaScriptet renderas på en server istället för av klienten (webbläsaren, Googlebot etc.). En ren HTML-version av sidan skickas till klienten.

I och med att JavaScriptet för-renderas av servern blir processen, när Googlebot genomsöker sidan, precis densamma som för alla ”vanliga” HTML-sidor, utan det extra steget som JavaScript annars kräver.

Problemet med SSR är att det är resurskrävande och att det kan vara komplext för utvecklare att implementera. Men det finns verktyg som Gatsby och Next.JS (för React-ramverket), Angular Universal (för Angular-ramverket) eller Nuxt.js (för Vue.js-ramverket) som underlättar implementeringen.

Hybrid rendering

Hybrid Rendering är en kombination av client-side rendering och server-side rendering. Sidans huvudsakliga innehåll renderas server-side innan det skickas till klienten, medan övriga resurser hanteras client-side.

Dynamisk rendering

Dynamisk rendering innebär att servern analyserar om klientens användaragent är en bot eller en ”riktig besökare”. Upptäcker servern att det är en bot som skickar förfrågan så presenteras en server-side renderad version av sajten medan alla andra behöver rendera JavaScriptet på klientsidan.

Dynamisk rendering är ett kostnadseffektiv alternativ till full server-side rendering.

Static-site generating (SSG)

Static-site generating är nära besläktat med Server-side rendering. Sidan genereras av servern, men renderas redan i samband med att den byggs. Med andra ord: istället för att rendera sidan på servern i samband med en förfrågan från klienten så är sidan redan färdigrenderad på servern där den väntar på att skickas till klienten.

Vilken typ av rendering föredrar Google?

På företagets blogg, Google Search Central, skriver sökjätten att de rekommenderar dynamisk rendering av JavaScript-sajter:

”För närvarande är det svårt att bearbeta JavaScript och inte alla sökmotorer kan bearbeta det framgångsrikt eller omedelbart. I framtiden hoppas vi att det här problemet kan åtgärdas, men under tiden rekommenderar vi dynamisk rendering som en lösning på problemet. Dynamisk rendering innebär att växla mellan renderat och för-renderat innehåll på klientsidan för specifika användaragenter.”

Vanliga JavaScript SEO-problem (och hur du undviker dessa)

Att sökmotorer kan crawla, rendera och indexera din sajts huvudsakliga innehåll är en förutsättning för att lyckas med din JavaScript SEO. Men det är långt ifrån det enda SEO-problemet som kan uppstå när du bygger din sajt i JavaScript. Nedan har jag listat andra JavaScript relaterade SEO-problem, och hur du undviker dom.

Länkar

Interna länkar spelar en viktig roll inom SEO. Det är via länkar som sökbotarna upptäcker och indexerar nya sidor på din sajt. De navigerar, precis som dina användare, genom att följa länkar från en sida till en annan.

I samband med detta får de dessutom en bättre förståelse för sajtens struktur, arkitektur och hur olika sidor på sajten förhåller sig till varandra.

Därför är det oerhört viktigt att inte utelämna href-attributet för länkar på din JavaScript-sajt. Utan href-attributet kommer nämligen inte sökbotarna kunna avgöra vart en länk pekar, eftersom den inte kör JavaScriptet under crawling-processen.

Laddningshastighet

JavaScript kan ha en negativ inverkan på din sajts laddningshastighet. Skripten renderas nämligen i bakgrunden, innan din sajts innehåll laddas för besökaren. För att optimera denna process måste du:

1. Minska antalet JavaScript-filer som laddas ner av webbläsaren
2. Minimera storleken på de filer som laddas ned

Med andra ord: Försök att kombinera alla viktiga JavaScript-filer i en enda JavaScript-fil. Minimera sedan storleken på filen.

Det finns en rad olika gratis verktyg som kan hjälpa dig att ”minifiera” dina JavaScript-filer, så som Minifier.org och JScompress.com.

Lazy loading

När du laddar en sida med JavaScript, se till att inte försena inläsningen av innehåll som du vill ska indexeras av Google. ”Lazy loading” bör bara användas för bilder, aldrig textinnehåll.

Serverfel

JavaScript renderat på klientsidan kan inte returnera serverfel på samma sätt som server-renderat innehåll. Se till att omdirigera fel till en sida som returnerar en 404-statuskod.

URL:er

Se till att statiska webbadresser genereras för sajtens alla olika sidor, istället för att använda #.

Dina URL:er bör alltså se ut så här:
✅ dindomän.com/webbsida

Och inte så här:
🚫 dindomän.com/#/webbsida

Eller så här:
🚫 dindomän.se#webbsida

Om du inte använder statiska URL:er så kommer sidorna inte att indexeras, eftersom Google vanligtvis ignorerar hash.

Så testar och felsöker du din sida för JavaScript SEO-problem

Det finns olika sätt att felsöka din JavaScript-sajt. Det enklaste är att använda dig av ett av följande Google-verktyg: Google Search Console, Mobile Friendly Test eller Rich Results Test.

I Google Search Console:

1. Klistra in den URL du vill testa i sökfönstret och tryck på enter
2. Klicka på ”Test Live URL”
3. Klicka sedan på ”View Tested Page”

Den HTML-kod du nu ser är (i det närmaste) identisk med vad Googlebot ser när den crawlar sidan.

4. Kopiera valfri mening i den huvudsakliga texten på din sida och sök efter den i HTML-koden

Får du en träff kan du andas ut. Skulle meningen däremot inte hittas så indikerar det att Google inte kan rendera (och indexera) din sida korrekt.

Processen ser närmast identisk ut i såväl Mobile Friendly Test som Rich Results Test-verktyget, med den lilla skillnaden att steg 2 skippas.

Slutsats

JavaScript-sajter beskrivs ofta som en SEO:ares värsta mardröm.

Och det är lätt att förstå varför: Få saker kan slå hårdare mot din organiska synlighet än dåligt implementerad JavaScript-kod.

Med det sagt: Det är oftast just implementationen som är problemet – inte JavaScriptet i sig. Så länge du följer ”best practice” för JavaScript SEO kommer din sajt ha precis samma förutsättningar att synas i det organiska sökresultatet som vilken annan sajt som helst.