En framgångsrik
digital närvaro
Att optimera en webbplats på bästa sätt
När man pratar om att optimera en webbplats, så kan det egentligen betyda många olika saker. Begreppet ”optimera” är väldigt brett och kan appliceras på olika områden som sökmotorer (SEO), webbplatsens prestanda (t ex hur snabb tillgänglighet webbservern har och hur mycket belastning den tål), samt såklart själva användarupplevelsen. I slutändan så handlar allting om att man vill skapa en optimerad upplevelse för besökaren på webbplatsen, där informationen och upplevelsen är så lätt att ta till sig, som det bara är möjligt. Den här texten är indelad i följande kapitel om optimering:
1. Sökmotoroptimering eller SEO, Search Engine Optimizing
2. Optimering och test av prestanda
3. Optimering av användarupplevelse
1. Sökmotoroptimering eller SEO, Search Engine Optimizing
Sökmotoroptimering handlar om att genom analys och anpassningar göra det så enkelt som möjligt för sökmotorer att hitta och förstå innehållet på din webbplats. Inom sökmotoroptimering, eller SEO, skiljer man mellan det som kallas On-Page SEO eller On-Site SEO, och det som kallas Off-Page SEO.
On-Page SEO/On-Site SEO är helt enkelt den optimering som är möjlig att göra på webbplatsen, i och kring webbsidornas källkod. Off-Page SEO refererar i stället till det arbete som kan göras för att stärka trafiken till webbplatsen, genom länk- och sökstrategier och optimering av organiskt sök. Vi på Stunning fokuserar på On-Site SEO, dels i analys av din befintliga webbplats och dels när vi producerar en ny. För att din webbplats ska ha så stor chans som möjligt att bli korrekt indexerad av sökmotorerna, är det viktigt med:
- Avskalad och optimerad källkod, där innehållet på webbplatsen (text, bilder osv) får dominera
- Optimerad struktur för innehållet på webbplatsen, exempelvis navigation, flöden, text och rubriker
- Relevant och aktuellt innehåll på webbplatsen, med anpassade texter och sidor
Vi jobbar ofta med publiceringssystem/CMS som är Open Source, exempelvis WordPress och Drupal. En av fördelarna med t ex WordPress är att källkoden redan är anpassad för bra sökmotoroptimering. Nästa steg är att anpassa strukturen och navigationen för webbplatsen, både i webbplatsens egna struktur och interna länkar, samt utgående länkar.
Content is king
Det viktigaste för din webbplats är dock alltid innehållet. Här måste man göra en avvägning mellan vad som är optimalt för besökaren, och vad som är optimalt för sökmotorn.
Vårt råd är att fokusera på användaren, och att anpassa innehållet utifrån en människa. Det är trots allt dina besökare du vill nå, och att sökmotoroptimera en webbsida så pass mycket att innehållet får lida är ingen hållbar lösning. Det vill säga, du tjänar inte på att optimera för att öka trafiken till din webbplats, om denna optimering innebär att innehållet blir försämrat för besökaren. Risken är att dina besökare då lämnar sidan direkt, utan att läsa och/eller klicka sig vidare.
Det finns dock några steg som du alltid ska försöka följa när det gäller innehållet på din webbplats. Se till att innehållet är aktuellt, och uppdatera gärna kontinuerligt med nytt innehåll för dina återvändande besökare. Du kan använda t ex RSS-flöden så att dina besökare kan prenumerera på innehållet på din webbplats, utan att behöva besöka den varje gång de vill ta del av information.
Se till att anpassa dina texter till webben. När vi surfar på en webbplats har vi ofta helt andra preferenser och förväntningar, jämfört med när vi läser t ex en broschyr eller tidning. Håll gärna texterna koncisa och uppdelade på ett sätt, där det är lätt för besökaren att få en överblick över vilka delar av innehållet som är viktigt. Snabba fakta kan t ex ligga uppdelade i listor eller på annat sätt lyftas fram, medan fördjupande information kan vara underordnad för de besökare som har mer tid eller intresse.
I källkoden så bör navigationen på din webbplats bestå av text, inte av bilder eller Flash. Texten kan sedan anpassas i koden för att ha utseendet av t ex knappar i en meny.
Så här bör din sidas källkod vara uppbygd
Rubrikerna på din sida ska vara ordnade i en hierarki, med de HTML-taggar som är avsedda för just rubriker. Den viktigaste rubriken på en sida heter <h1>, och inom denna tag ska din sidas huvudrubrik ligga på följande vis: <h1>Det här är min sidas huvudrubrik<h1>.
För nästkommande rubriknivå använder man <h2>, sedan <h3> osv. Försök att ha med viktiga nyckelord i sidans rubriker, framförallt i <h1>-rubriken.
Varje HTML-sida har en <title>-tag som fungerar som sidans titel. Denna titel visas inte som innehåll på själva sidan, däremot visas den som titel på sidans flik i din webbläsare. Den används också som rubrik i t ex Googles sökträffar. Precis som med <h1>-rubriken bör <title>-taggen innehålla viktiga nyckelord som hänger ihop med den aktuella sidan. Det bästa är såklart att från början analysera vilka nyckelord som människor tenderar att använda mest, inom det intresseområde som din sida handlar om.
Försök använda ditt/dina nyckelord frekvent i texten på sidan, både i <h>-rubrikerna och inom <strong>-taggar (dvs fet stil). Men skriv på ett naturligt, mänskligt vis och överanvänd inte nyckelorden på ett sådant sätt att texten blir märklig för läsaren. Ditt nyckelord ska i bästa fall också finnas med i din webbplats domän.
I sökträffar på t ex Google så visas en kort beskrivning av din sida i träfflistan. Denna beskrivning kallas för Meta description och finns i varje sidas källkod. Du kan ha en övergripande beskrivning för din webbplats, men varje sida kan också ha en egen, unik beskrivning om innehållet på just den sidan. Den här texten behöver vara kort och koncis och ska innehåll max 155 tecken, annars riskerar texten att klippas av sökmotorn.
Har du ingen Meta description på en sida så skapar sökmotorn en egen beskrivning utifrån sidans innehåll. Denna automatiserad beskrivning kan dock ofta bli märklig och du saknar kontroll över vad som presenteras för din presumtiva besökare. Det bästa är att skriva egna Meta descriptions för dina sidor. Återigen, skriv text som är inbjudande och riktade till människor!
Det här var en kort genomgång om sökmotoroptimering. På våra seminarier & workshops berättar vi mer om hur du skriver för webben och utformar din text korrekt för sökmotorerna.
2. Optimering och test av prestanda
En webbplats prestanda och tillgänglighet är kopplad till många faktorer. Dels handlar det om servern/servrarna där en webbplats är placerad. Vanligt för små och medelstora webbplatser är att allt innehåll ligger på en och samma server, men för större webbplatser har man ofta fördelat tyngre och resurskrävande innehåll till t ex separata servrar eller virtuellt utrymme.
De allra flesta serverleverantörer och webbhotell har en mycket bra upptid, dvs den tid som din webbplats kan nås utan problem mot servern. Däremot är det varierande kring vilken mängd trafik, dvs antal besökare, som din webbplats klarar av att hantera. För webbhotell har man ofta en bestämd trafikgräns baserat på mängden data som dina besökare tankar ner varje månad, i och med sina besök på webbplatsen. Utöver själva mängden data, är en server också begränsad till hur stor trafik den kan ta emot på en och samma gång, och hur många processer den kan hantera. Oftast bygger en webbplats på en eller flera databaser, och varje besök på webbplatsen innebär att webbservern (förutom att ta emot information om besökaren och leverera data tillbaka) måste hantera en massa interna anrop.
Optimering av prestanda blir intressant om och när din webbplats får problem med tillgängligheten och/eller hastigheten. Det vanliga är att man börjar leta efter de ”flaskhalsar” som orsakar störst fördröjning, åtgärdar dessa för att sedan analysera resultatet.
Det finns många bra gratis verktyg för att mäta hur snabbt din webbplats läses in, av olika webbläsarklienter och från olika platser i världen. På sidan Webpagetest.org kan du testa din webbplats med olika anslutningar och från cirka 30 olika servrar runt om i världen. Du får så kallade waterfall-diagram (se bilden ovan) och skärdumpar på hur webbplatsen ser ut i olika webbläsare.
Förutom att använda externa sajter kan du som tillägg i webbläsaren Firefox installera Firebug (finns även som en light-version för andra webbläsare). Via Firebug kan du enkelt analysera din webbplats funktionalitet och inläsningstid. Även Firebug genererar s k waterfall-diagram där man mäter vilka processer som körs från det att du klickar dig in på en webbplats (dvs från det att webbläsaren skickar ett anrop till servern) tills dess att innehållet har lästs in och webbplatsen renderas klart i webbläsaren.
Ett vanligt sätt för att snabba upp webbsidor och webbapplikationer är att använda så kallat ”cachat” innehåll. Det finns dock olika typer av cache; din webbläsare kan t ex spara webbsidor och webbinnehåll i din enhets (dator/smartphone etc.) cache-minne. På så sätt kan delar av en webbplats ligga lagrade lokalt på den enhet som du surfar på webben med. Detta kan ibland innebära att du ser en ”gammal” version av en webbplats. T ex så kanske sidans stilmall (CSS-fil) har blivit uppdaterad på webbservern, men din webbläsare använder sig av den CSS-fil som finns lokalt på din enhet. Det är först när cache-minnet i din webbläsare ”töms”, som den ”nya” CSS-filen läses in från webbservern.
Via HTML5 kan man nu använda sig av ett s k cache-manifest på servern för att styra hur och vilka filer som cachas. Detta är väldigt användbart för bl a mobila applikationer i HTML, och webbplatser som behöver optimeras för mobila besökare.
Men även webbservrar använder sig av cache. De flesta företags webbplatser bygger på ett CMS-system där innehållet hämtas ur en eller flera databaser. Sidorna på webbplatsen är dynamiska och genereras fram för varje besökare. Dessa processer är resurskrävande och tar upp mycket minne. En statisk fil däremot, t ex en statisk HTML-sida, behöver inte genereras fram av webbservern, utan kan skickas direkt och utan att något serverscript behöver köras. Processen att skicka en fil kräver också långt mindre minne för servern, vilket möjliggör att ännu fler processer kan köras samtidigt.
Därför använder man sig ofta av olika tekniker för att cacha resurskrävande innehåll och sidor på en webbplats. Dynamiska sidor som webbplatsen består av, kan genereras ut och lagras i serverns cache. På så sätt skickas färdiga sidor till besökarna, och antalet processer på webbservern kan minimeras.
För WordPress finns det flera bra cache-plugin, så att inte varje sida på din WordPress-sajt måste genereras av servern varje gång en sida visas. Ett är W3 Total Cache, och ett annat är WP Super Cache. Båda pluginen är gratis.