React SEO – Hur du hjälper Google på traven
Publicerad 15 december 2020, senast uppdaterad 2023-05-22
Ska du bygga en ny sajt och ska använda React? Spännande! I denna artikel ska jag lugnt och sansat ta dig igenom vad det betyder för SEO:n och hur du kan säkerställa att din nya sajt tas väl emot av Google och kan fortsätta att ranka högt för viktiga sökord. Om du inte tänker på detta innan lanseringen så kommer det att stå dig dyrt.
React, och andra JavaScript-ramverk, blir bara mer och mer populära dels hos webbutvecklare, dels hos beslutsfattare. VD:n och marknadsavdelningen vill ha effektiv utveckling ur kostnads- och tids-aspekten, och utvecklaren vill ha ett kompromisslöst ramverk att luta sig tillbaka på samt ett sprudlande community att söka stöd och råd inom. Problemet med JavaScript är att Google tyvärr inte alltid har resurser att exekvera koden med deras botar, och då missar de att indexera väsentligt innehåll.
React + Google = sant?
Ja och nej. I dagsläget har Google dessvärre problem med indexering och avspindling av JavaScript-element på sajten (jag har skrivit om detta på bloggen tidigare). Problemet som uppstår är att exekveringen av JS-kod stannar upp Googlebot och gör att denne måste invänta full inhämtning av koden innan den fortsätter jobba sig igenom resterande kod.
Men ska vi gå till botten av problemet så handlar det snarare om ett tidigare problem än så. Något många inte tänker på är att det finns funktioner som Google använder sig av, Googlebot och Caffeine, dessa funktioner jobbar tillsammans men har två arbetsuppgifter. Googlebot (den mest kända) spindlar av och försöker finna så många URL:er som möjligt genom att följa länkar på sajten, när vi använder oss av React så kommer den inte att finna några länkar i koden, utan kommer behöva skicka vidare den till Caffeine. Dennes uppdrag är att rendera upp och indexera innehållet – här kan du läsa mer om vad exakt som Caffeine gör.
Caffeine får i sin tur den URL som Googlebot spindlade av, renderar upp den och extraherar alla länkar som den numera hittar (när JS-koden är exekverad och länkarna dyker upp). Nu måste dessa länkar på nytt skickas tillbaka till Googlebot för avspindling innan de skicka tillbaka till Caffeine. Från de sidor som Caffeine skickar tillbaka kommer vi antagligen hitta fler ”gömda” länkar och problemet eskalerar.
Som ni säkert förstår leder detta till en resurskrävande process för Google, och er indexering kan fördröjas länge.
Om vi dessutom slänger in problem med rendering av sidan (för att det tar för lång tid, eller för att Google blockas från vissa element på sidan) så kan det stå er dyrt vid lansering.
Single Page Applications (SPAs)
Single Page Applications eller SPAs är ett sätt att enbart ladda in en sida, och dynamiskt ändra på innehållet baserat på vilken sida man befinner sig på. Detta kan låta smidigt men kan samtidigt innebära problem om Google har problem med exekveringen av React. Om innehållet inte läses in så kommer sidan se helt tom ut för Google, vilket, som ni säkert förstår, inte är bra.
Det är därför jätteviktigt att man säkerställer att allt funkar som det ska innan man lanserar sin sajt med de senaste ramverken, vilket leder oss in på lösningen på React och SEO.
Hur löser man detta?
Som tur är, eftersom React är populärt och dessutom open-source, så finns det lösningar på detta. Det handlar om något som kallas för Server-Side Rendering (SSR). SSR är en process där man hämtar hem en färdig-renderad version av sajtens sidor och när Googlebot knackar på så levererar servern dessa sidor till Googlebot.
Googlebot kan således snabbt se samtliga länkar och skicka dessa vidare till Caffeine för rendering och indexering. Detta underlättar ledtiden för att dessa botar ska samarbeta och skicka hundratals URL:er mellan varandra, och säkerställa att ni får snabb indexering vid er lansering.
Är ni i behov av en SEO-partner som kan hjälpa er med allt från kravspecifikation till att vara rådgivare och bollplank vid er kommande lansering? Eller kanske en strategisk partner som tar er SEO till nästa nivå? Kontakta oss på Pineberry!
