Är React ett bra val ur SEO-synpunkt?

Enligt rapporten Svenskarna och Internet så använder 97 procent använder Google för att söka information. Det har därför aldrig varit viktigare att se till att ens hemsida syns på Google och andra sökmotorer. Men det räcker inte med att bara synas på Google. Det krävs också att du syns högt upp i sökresultatet eftersom att de allra flesta klickar på ett av de tre första alternativen.

Hur rankar man då högt på Google?

SEO, eller sökordsoptimering som det heter på svenska, är ett stort och komplext område. I den här artikeln redogör vi React (även ofta benämnt som React.js) och dess påverkan på SEO men för att summera SEO så handlar det om att hjälpa Google att hitta rätt sida för rätt användare. När en användare gör en sökning så försöker Google identifiera vilken sida som är mest relevant för just den sökningen.

Ingen vet den exakta algoritmen eftersom att den är hemlig men det finns flera saker som de allra flesta anser påverkar rankingen i Google så som andra sidor som länkar till din sida, bra innehåll som får läsaren att stanna länge på sidan, hur snabb sidan är och en sida som är enkelt för Google att förstå. Denna artikel fokuserar på Javascript, SEO och React. Behöver du en mer grundläggande SEO-guide så rekommenderar vi United Powers utförliga text och filmer.

Vad är React och hur påverkar det din SEO?

React ett effektivt Javascript-ramverket (även om vissa hellre skulle kalla det för ett bibliotek) som kan användas för att bygga användargränssnitt. Det gör det enkelt att bygga hemsidor och appar som känns snabba och som har mycket interaktivitet. React möjliggör tex den där app-känslan när du kan navigera mellan olika sidor utan att sidan laddas om vilket förbättrar användarupplevelsen.

React ger dig en SPA (Single Page Application) vilken kräver Javascript för att visa innehållet på sidan. Problemet med det är att Googles bot, som scannar in alla sidor på internet, inte är lika bra på att förstå en sida som visas med javascript jämfört med en sida där innehåller består av vanligt HTML-kod.

Länge kunde Google inte alls se innehåll som visats via Javascript och rekommenderade att man såg till att innehållet kunde visas även utan Javascript. För några år sen gick man ut och sa att man nu kan läsa och indexera sidor med Javascript.

Så Javascript och SEO är inte ett problem längre?

Ja och nej. Det stämmer att Google redan 2015 gick ut och sa att de nu även kan läsa innehåll som visas med hjälp av Javascript så i teorin ska det inte vara ett problem. Men som många gånger stämmer inte alltid teorin överens med hur det ser ut i praktiken. De allra flesta som arbetar med SEO anser att en så kallad SPA kommer ha svårare att ranka högt en likvärdig sida som inte kräver Javascript för att visa innehållet.

Ska man undvika React för SEO?

Nej, absolut inte. React.js, liksom Angular.js och Vue.js, hjälper utvecklaren att skapa en bra användarupplevelse vilket är positivt.

React och Server-Side Rendering

Nyckeln till att göra React mer SEO-vänligt är att se till att Google inte behöver använda sig av Javascript för att visa innehållet på sidan. Det kan man åstadkomma genom att använda sig av Server-Side Rendering (förkortas SSR).

Normalt körs React i din webbläsaren efter att du hämtat alla filerna från webbsidan du besöker (kallas Client Side Rendering). Server Side Rendering innebär att du kör Javascript-koden på servern innan du skickar filerna till användaren första gången.

Det gör att besökaren kan se innehållet direkt utan att behöva vänta på att React körs först. Det kan göra sidan lite snabbare (särskilt om besökaren har en lite äldre dator) men framförallt gör det att Google inte behöver köra React för att kunna se innehållet på sidan.

Hur sätter man upp Server-Side Rendering?

Det kan vara komplext att sätta upp Server-Side Rendering för React om man gör det från grunden. Som tur är finns det flera ramverk som bygger på React som gör det enkelt att sätta upp Server-Side Rendering för en React-sida. Två vanligt använda ramverk för SSR med React är Gatsby.js och Next.js.

Gatsby.js

Gatsby.js är ett React ramverk för att generera statiska sidor där du genererar alla sidorna din dator för att sen skicka upp den färdiga sidan till en server/lagringstjänst såsom amazon S3. Gatsby.js är ett väldigt bra alternativ för sidor där innehållet inte behöver förändras i realtid. Exempel på sajter som fungerar bra med Gatsby.js är bloggar. Gatsby.js är mindre optimalt för sidor med mycket användargenererat innehåll så som forum-sidor.

Läs mer om Gatsby.js på deras sida eller få hjälp av en av våra duktiga Gatsby-utvecklare.

Next.js

Next.js tar en annan väg än Gatsby (även om de har möjligheten att precis som Gatsby generera statiska sidor). När en besökare först landar på sidan så genererar Next.js innehållet statistiskt och skickar till besökarens webbläsare. Fördelen med Next.js är att det sker först när besökaren kommer till din sida. Det innebär att Next.js lämpar sig väl för sidor med mycket användargenererat innehåll så som tex forum-sidor.

Läs mer om Next.js på deras sida.

Ska du använda React för ditt nästa SEO-projekt?

Vilken teknologi du ska använda dig av är alltid projektspecifikt (och beroende på ditt teams tidigare erfarenheter av en viss tech stack). Men React, om man gör det rätt, är många gånger ett bra alternativ för att bygga en SEO-vänlig sida. Vi på Proxify har många duktiga React utvecklare som kan hjälpa er och se till att er sida fungerar bra från både ett användarperspektiv och ur SEO-perspektiv.