Är React ett bra val ur SEO-synpunkt?

path

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.

Relaterad läsning

Fem nyheter från Laravel 6 vi gillar

Tech

Fem nyheter från Laravel 6 vi gillar

Som vi väntat på Laravel 6. Vi delar med oss i detta inlägg om vad vi uppskattar mest med den nya releasen.

Så tar du din affärsidé från idé till produkt

Guider

Så tar du din affärsidé från idé till produkt

Kämpar du med att ta din affärsidé från idé till produkt? Kanske är du osäker på hur du ska börja eller saknar kompetensen i bolaget. Här ger vi våra bästa råd om hur du borde ta dig an utvecklingen av din idé - Proxifys utvecklingsmetodologi

Fem viktiga regler om du har utvecklare på distans

Guider

Fem viktiga regler om du har utvecklare på distans

Att kommunikation kan vara en utmaning när man har utvecklare som befinner sig i ett annat land säger sig självt. Det behöver dock inte nödvändigtvis vara ett problem. Nedan har vi därför samlat ihop fem regler för hur du borde kommunicera med ditt offshore-team.

Utmaningar med offshoring och hur du hanterar dem

Guider

Utmaningar med offshoring och hur du hanterar dem

Att outsourca utveckling kan verkligen innebära en del utmaningar. Vissa är kanske unika för just ditt företag, men troligtvis kan du känna igen dig utmaningarna vi nämner i artikeln

Fem etablerade företag du inte visste har utvecklare på distans

Nyheter

Fem etablerade företag du inte visste har utvecklare på distans

Alla företag som nämns i artikeln har vid någon tidpunkt använt sig av outsourcing för att täcka utvecklingsbehov på vägen att bli de stora miljardbolag som de är idag.

Varför frilansande utvecklare är i linje med lean startup

Nyheter

Varför frilansande utvecklare är i linje med lean startup

Oavsett om ditt företag är en ledare inom er industri, ett växande medelstort bolag eller en startup, har du antagligen hört talas om lean startup-metoden.

Hur säkerhetsställer Proxify att arbetet faktiskt utförs?

Nyheter

Hur säkerhetsställer Proxify att arbetet faktiskt utförs?

Hur kan du ens vara säker på att utvecklaren faktiskt jobbar?

Fem sätt att effektivt projektleda utvecklare på distans

Guider

Fem sätt att effektivt projektleda utvecklare på distans

En kritisk framgångsfaktor för att lyckas med utvecklare på distans är projektledning. Vi har samlat våra fem bästa tips för hur du som projektledare lyckas med ditt nya team.

Varför offshoring till Ukraina?

Nyheter

Varför offshoring till Ukraina?

Anledningar varför du borde använda dig utav utvecklare från Ukraina.

Uppdaterad version av PhpStorm (2019.2)

Tech

Uppdaterad version av PhpStorm (2019.2)

Nu går det att köra Composer genom en remote PHP interpreter. Perfekt om man kör Docker eller har problem med PHP-versioner. Läs mer på [Jetbrains](https://www.jetbrains.com/phpstorm/whatsnew/).

Borde du anlita en byrå, konsult, frilansare eller anställa?

Guider

Borde du anlita en byrå, konsult, frilansare eller anställa?

Ska du anlita en byrå, konsultfirma, frilansare eller anställa? Här listar vi för- och nackdelar med respektive alternativ.

Vad gör en frontend-utvecklare och varför behöver du en?

Guider

Vad gör en frontend-utvecklare och varför behöver du en?

Det är vanligt att man stöter på begrepp som “front-end”, “back-end” och “full-stack” när man letar efter att anställa eller anlita frilansutvecklare. I detta inlägg reder vi ut vad en frontend-utvecklare gör och varför du behöver en.

Guide till hur du hittar och anlitar en frilansutvecklare

Guider

Guide till hur du hittar och anlitar en frilansutvecklare

Du kanske har en idé om att skapa en e-handel eller bygga en integration mellan ert CRM-system och webbplats. Ibland är det svårt att hitta resurser inom bolaget eller inte värt att anställa någon för projektet. Då kan det vara lämpligt att överväga att istället anlita en frilansande utvecklare.

React eller React Native? Vad är skillnaderna?

Tech

React eller React Native? Vad är skillnaderna?

Vad är React js och React Native? I detta inlägg redogör vi skillnaderna

React.js, AngularJS eller Vue.js?

Tech

React.js, AngularJS eller Vue.js?

Tre ramverk som blivit populära senaste åren är React, Angular och Vue. I det här inlägget försöker vi reda ut skillnaderna och vilket ramverk som passar ditt projekt.

Så fort jag sätter på datorn är jag på mitt kontor

Nyheter

Så fort jag sätter på datorn är jag på mitt kontor

Oleksandra Matviienko är utvecklaren som aldrig mer vill jobba på ett kontor. Friheten med att vara chef över sitt eget schema och att slippa långa möten är bara några av fördelarna med att vara frilansande utvecklare. Dessutom är oron för att distansen mellan henne och kunden skulle påverka jobbet överspelad – av flera anledningar.

Tuva Palm och nyckeln till techkompetensen

Guider

Tuva Palm och nyckeln till techkompetensen

Det finns en sak som irriterar Tuva Palm, och som gör henne ”ofantligt trött”. Hon upplever nämligen att det är svårare att göra sin röst hörd i tekniska frågor med ekonomer än med andra ingenjörer. Det är också delvis anledningen till att hon startat SHE Invest Sweden - som är en aktivt förvaltad aktiefond som investerar i jämlika bolag på Stockholmsbörsen.

React Native för Windows och Mac lanseras

Nyheter

React Native för Windows och Mac lanseras

Microsoft släpper React Native för Windows och Mac vilket förenklar utvecklingen av desktop-appar.

Öppen data och ny teknik demokratiserar innovation

Nyheter

Öppen data och ny teknik demokratiserar innovation

Från hemliga laboratorium för få speciellt utvalda, till samarbeten över organisationsgränser och självlärda utvecklare. Så beskriver Annie Lindmark, Innovationsexpert, innovationsskapandets transformation de senaste åren. Proxify har pratat med henne om tillväxtproblem, kompetensbrist, unicorns och hur man genomför systemförändringar.