Varför bör du som webbutvecklare tänka på SEO?

Lästid: 9 minuter

Funktionaliteten är största prioriteringen när man skapar en e-handels hemsida. Design brukar vara nästa på listan, efter det kommer kanske frågeställningar om vilken domän man ska ha och hur koden ser ut? Är det lätt att ändra koden om det behövs?

Men när kommer då tankarna om sökoptimering? I detta inlägget kommer jag att diskutera varför du som webbutvecklare bör tänka på SEO (sökmotoroptimering) när du utvecklar en e-handelssida med Javascript.

Vad är SEO?

SEO står för sökmotoroptimering (Search Engine Optimisation på engelska) och handlar om hur du optimerar din hemsida eller e-handelssida för olika söktermer för att öka chanserna att hamna längst upp på förstasidan av Google.

Att hamna högt upp på Googles sökresultat sida eller SERPen som det brukar kallas (SERP står för Search Engine Results Page) kan uppnås på två olika sätt. Organiskt eller paid.

Organisk

Organiskt trafik på din hemsida kommer från besökare som klickar på de resultat som du inte betalt för på Googles sökresultat sida, som leder till din hemsida efter att de sökt på Google.

Betald

Betald trafik är de besökare som kommer till din hemsida genom betald marknadsföring. På Googles sökresultat sida är annonserna knutna till sökord. De visas ovanför det organiska sökresultatet och markeras med ordet “annons”.

Ett exempel på organisk trafik är om du säljer kläder och du sökoptimerat på sökordet “tröja”, då vill du att din sida med tröjor kommer upp som ett resultat på Google när en användare söker på det ordet. Helst längst upp såklart.

Det är en ganska förenklad beskrivning av SEO, men nu har du fått en insikt i vad det är. Men varför är det viktigt?

Har du en hemsida vill du självklart ha besökare, för besökare kan betyda kunder. Googles algoritmer räknar ut vilken position just dina sidor ska få på sökresultatsidan utifrån fler än 200 punkter, varav sökordet och var det används är en av de viktiga faktorerna. Strukturen på din hemsida spelar också roll, vilket leder oss till punkt två.

Varför ska du tänka på SEO när du programmerar?

Vilken struktur är då bäst för din hemsidas SEO? Att strukturera din meny i ett logiskt hierarkisk upplägg med viktigaste sidorna högst upp kan påverka din ranking. Att placera viktig information eller sökord högst upp och först är en bra praxis.

Det naturliga sättet människor läser texter är från vänster mot höger och sedan nedåt i en Z form. Det finns undantag i kulturer där man läser från höger till vänster.

Håll din kod ren och fin så att webbläsare enkelt kan läsa av den. I hemsidas kod ska du använda sökord som kan hjälpa din hemsidans ranking på Google, i de så kallade meta-taggarna som till exempel Title, Description och ALT-tag.

SEO kriterier från Google

Gör din hemsida enkel att navigera. Din meny och menyvalen ska vara uppenbara, besökaren ska direkt förstå vad som finns bakom varje rubrik de klickar på. Detta spelar roll för besökarens upplevelse på sidan och i förlängningen påverkar det också sidans ranking. Visar det sig att besökarna endast stannar i några sekunder och sedan går tillbaka till sökresultat sidan och väljer att besöka en annan sida kan det ses som negativt. Det är en indikation att besökaren inte hittade det den sökte efter. Men om besökaren stannar en längre stund ses det som att du har värdefull information på din hemsida som besökaren tycker är värd att läsa eller ta del av.

”Google strävar efter att de bästa sidorna för besökaren hamnar högst upp”

Tiden som besökare spenderar på din hemsida spelar stor roll och då är det viktigt att ha en hemsida med snabb svarstid, detta kommer jag diskutera mer längre ner. Här är det bra att ha designen i åtanke när du programmerar för bättre SEO. När du programmerar en e-handels hemsida ska du alltid tänkte på användarvänligheten för besökaren, då Google kan mäta hur lång tid varje besökare spenderar på hemsidan. Desto längre tid och mer engagemang du får från dina besökare desto bättre ranking kan du få.

Säkerhet på hemsidan när du programmerar

Det finns vissa åtgärder du bör tänka på när det kommer till säkerhet när du programmerar en e-handels hemsida. Två punkter jag vill diskutera är Åtkomsthantering och Iframe.

Det låter som en självklarhet när man säger att du inte ska ge alla eller vem som helst åtkomst till din kod. Utan endast de du litar på och också de som du vet kommer göra ett bra jobb.

Ingen kan se in i framtiden och därför kan det vara svårt att programmera för att undvika fel eller buggar. Det är helt okej att koden inte är helt optimal med en gång, det är en del av programmerandet att hela tiden arbeta mot en strukturerad och optimerad kod, så försök att tänka långsiktigt. Ställ dig frågor som, Vad kan gå fel med denna CTA (Call to action), samarbetar hemsidan med dessa animationer? Försök sedan att programmera för att allt ska fungera.

Åtkomsten till din kod ska vara begränsad till de i ditt team (om du jobbar i ett). Välj ett lösenord som ingen kan gissa sig till, stora och små bokstäver, siffror och tecken. Använd ingenting som relaterar till dig eller ditt jobb, för högst säkerhet. Får fel person behörighet till din kod kan personen använda den som sin egen eller förstöra hemsidan du byggt, så ta vara på det du skapar och håll det säkert!

Iframe är en tag ( <iframe/ > ) som du skriver in i HTML fil, det ger dig en ruta på din hemsida som speglar en annan hemsida. Detta kan till exempel användas i din portfolio. Om du har en hemsida med animationer och visuella element som rör sig, kan detta vara svårt att visa upp endast med bild, då kan du använda dig av Iframe och visa din hemsida live.

Detta låter ju perfekt men det finns risker med Iframe, en del företag väljer därför att koda bort möjligheten till Iframe. Det som kan hända är att någon använder din hemsida för att få tillgång till känslig information från besökare på din hemsida. De kan då spegla hela din hemsida och låtsas vara du, de ändrar all kod förutom din <style> / CSS för att behålla samma utseende som din hemsida, men kan till exempel stjäla användares konto eller kortinformation.

Varför programmering är mer än hemsidans funktionalitet

Att skapa en hemsida handlar också om designen, vilka fonter du använder och vilka animationer du har, med mera. Visst är det häftigt när det visuella är precis som du föreställt dig? Men när du designar för ögats skull är det lätt att glömma funktion på hemsidan. Det som kan hända när du har animation på animation är att du ofta försämrar hastigheten på din hemsida då webbläsaren måste läsa in mycket kod.

Ditt val av fonter kan också spela roll. När du väljer fonter för din hemsida rekommenderar Google att du ska använda dig av Googles förråd av typsnitt, Google Fonts. Förr fungerade det så att om du använde ett typsnitt som från Google så behövde webbläsaren inte ladda ner den för att läsa in typsnittet. Google utnyttjade det faktum att typsnitten sparades i ett cacheminne som var gemensamt för alla webbplatser. Detta gav en snabbare laddningstid av din hemsida eftersom typsnittet med största sannolikhet redan fanns nedladdat.

Idag använder vi inte längre gemensamma cacheminnen på grund av säkerhetsrisker. Så just den fördelen med Google Fonts har försvunnit. Idag rekommenderar man att istället manuellt ladda ner och installera Google Fonts på sin webbplats.

Hemsidans funktionalitet och SEO

Om du ska skapa en hemsidan för en e-handelsplattform, är synlighet på Google väldigt viktigt. Att tänka på sökmotoroptimering brukar inte ens vara på topp 10 av vad en utvecklare fokuserar på. Standarden har blivit att man har en utvecklare och i efterhand anlitar någon SEO kunnig. Men med lite tips kan du göra det lite enklare för din kund eller dig själv nästa gång du bygger en hemsida för e-handel.

Ett exempel är att använda Sökmotoroptimerade ord i din kod, alltså inte i kommentarer för det syns inte i webbläsaren. Du kan istället döpa titlar eller klasser (class) till SEO vänliga ord för Google att hitta.

Bilder i din HTML fil

Om din kund vill att du lägger in deras bilder direkt i koden kan du gör det i HTML fil och för att ändra utseendet på bilden, som storlek, border eller skugga görs i din CSS fil eller style tag i HTML (<style/>). SEO innefattar också bilder, vilka du väljer och vad du döper de till. När du hämtar eller laddar ner bilden kan du sedan döpa om texten och även skriva en ALT text till bilder.

En ALT text är texten du skriver om din bild, ALT texten kommer att visas när du hovrar över bilder. Google läser av ALT texter och det är ett bra ställe att få med ditt sökord så att sidan förhoppningsvis rankas högre.

Här är ett exempel på hur du kan skriva in ALT text i html kod:

I kodexemplet följer jag samma tema som jag diskuterade lite tidigare i ämnet “Vad är SEO?” där exemplet var att du säljer tröjor på din e-handelsplattform. Jultröja blir alltså din ALT text till bilden. Använd ditt sökord även i bildnamnet. Tänk dock på att inte använda å, ä, ö eller andra specialtecken i dina filnamn. Ersätt mellanslag med vanliga bindestreck (inte underscore).

Skapa en användarvänlig hemsida

Om det tar mer än 5.3 sekunder för din hemsida att ladda är det stor chans att besökaren lämnar din hemsida. Enligt Hubspot Academy väljer 79% av användaren att besöka din konkurrent om din hemsida har lång svarstid.

Tänk därför på detta när du programmerar för en snabbare sida:

Ha minimalt med kommentarer i din CSS fil
Ha inte för många line breaks
Ha inte för mycket white space
Komprimera bilder på hemsidan
Gör dina bilder responsiva

Kommentarer är bäst att ha i din HTML fil och inte i din CSS, detta kan vara på gott och ont. Som programmerare (speciellt om man jobbar i team) är det viktigt att kommentera i sin fil för ett bättre samarbete. Men dina kommentarer i filen kan också bidra till längre svarstid på din hemsida. Line breaks och whitespace ingår i samma kategori, det är snyggt men tar upp plats som webbläsaren behöver läsa in.

Att komprimera dina bilder betyder att du ändrar storleken på bilderna till en mindre storlek men behåller samma kvalitet i grafiken (samma antal pixlar). Väljer du att komprimera dina bilder, glöm inte att spara originalbilden också. En komprimerad bild är en bild med mindre minne och därav minskar laddnings/svarstiden när webbläsaren läser in bilden.

När du skriver din CSS kod så kan du göra din bilder responsiva genom att koda:

img {

width: 100%;

height: auto;

}

Med denna kod kommer webbläsaren att läsa in din bild med rätt storlek för rätt skärm. Bilderna du väljer kommer att anpassa sig efter vilken enhet besökaren använder, om det är en telefon eller en dator och även storleken på skärmen

Listan med saker du kan göra är lång, men dessa är några åtgärder som ökar hastigheten på din hemsida. En sidas hastighet är en av faktorerna som påverkar placeringen på Google.

Optimera hemsidan för mobil

Som jag tidigare nämnde är det viktigt att göra hemsidor telefonanpassade och responsiva till olika enheter och skärmstorlekar. Det bidrar till att besökaren får en bra användarupplevelse på hemsidan.

Men också för din Google rankning. Google belönar hemsidor som har responsiv design på hemsida. Att ha responsiv design betyder att det inte spelar någon roll vilken enhet eller skärmstorlek besökaren använder, hemsidan kommer automatiskt att anpassa sig efter skärmstorleken.

Hur ska du programmera för bäst SEO?

Om du skapar din egna e-handelsplattform eller jobbar som konsult till en kund, kom ihåg att UX design på hemsidan är lika viktig som SEO. Jag har nämnt många punkter som kan hjälpa din hemsida redan från start med SEO. En stor del av optimeringen på hemsidan handlar om innehållet (i till exempel bloggartiklar), beskrivningar, ALT taggar, och så vidare. Om du tänker på alla relevanta områden redan när du programmerar kommer din hemsida ett steg närmare en bättre sökoptimering.

Självklart behöver hemsidan fortfarande ha ett intressant och värdefullt innehåll (som bloggar och produktbeskrivningar) för att hittas och få bättre ranking på Google, men nu har du sett till att förutsättningarna är de bästa.

En intressant faktor som jag tidigare inte nämnt, är betydelsen av URL det vill säga adressen till din sida. URL är också ett ställe där du kan använda dina sökord för att få större chans att prestera på Google. Var försiktig när du ändras en sidas URL. Du vill inte råka ut för att besökare som går till den gamla URLen får ett 404 felmeddelande (sidan kan inte hittas).

Så tänk på vad du ändrar och om det förändrar din URL. Google gillar INTE om du har URLer som får 404 felmeddelanden. Det du kan göra för att fixa detta problemet är att göra en “redirect” som länkar besökaren till den nya och rätta sidan. I de allra flesta fallen använder du en så kallad 301 redirect (permanent flytt).

Vad ska du ha i åtanke när du programmerar en e-handels hemsida?

Programmera för snabb hastighet
Använd sökorden i sidans Meta-taggar
Gör hemsidan responsiv
Se till att typsnitt cashas
Gör dina bilder responsiva
Använd sökord på filnamn
Ta säkerhetsåtgärder för att skydda din kod

Det var mina tips för dig som programmerar en e-handels hemsida! Lycka till med programmeringen och glöm inte bort SEO.