System

Verktygen som anv¨andes f¨or att utveckla webbapplikationen kan delas in i frontend och backend. I frontend byggdes webbapplikationens struktur upp med HTML. F¨or att inf¨ora design och layout anv¨andes CSS. Ytterligare anv¨andes ocks˚a Bootstrap som ¨ar ett bibliotek med stilelement i HTML, CSS och JavaScript f¨or att inf¨ora responsivitet. F¨or att f˚a ytterligare funktionalitet anv¨andes jQuery som ¨ar ett JavaScript-bibliotek. JavaScript m¨ojliggjorde kommunikation och datautbyte med servern.

Webbapplikationens backend utvecklades med Flask som server. F¨or att HTML- koden skulle kunna renderas dynamiskt anv¨andes biblioteket Jinja2. Flask anv¨andes ocks˚a f¨or att sk¨ota kommunikationen mellan frontend och SQLite-databasen. F¨or testversionen av sidan anv¨andes Heroku f¨or drifts¨attning av webbapplikationen eftersom Heroku enligt Lee et al. hade st¨od f¨or Python [66], vilket Flask anv¨ander. Olika versioner av sidan kunde enkelt laddas upp direkt fr˚an git-repot som applika- tionen utvecklades i. Heroku m¨ojliggjorde ocks˚a att en egen dom¨an kunde anv¨andas vilket beh¨ovdes f¨or att indexera sidan genom Google Search Console.

3.3

Testning

Under testningsfasen genomf¨ordes totalt nio stycken olika iterationer. Den f¨orsta iterationen var den fullst¨andiga sidan, d¨arefter f¨oljde tv˚a iterationer vardera av responsivitet, 404-page, sitemap och nyckelord.

Testsidan inneh¨oll totalt 30 indexerbara URL:er, varav 13 stycken var olika ka- tegorier och sex stycken var produkter. Ut¨over det var bland annat startsida, re- sultatsidan, vanliga fr˚agor, mina bokningar, mina annonser och om oss med som URL:er.

I vardera av de valda faktorerna i alla iterationer skalades de f¨orst ned med n˚agot s¨amre utf¨orande och sedan en till iteration d¨ar faktorn ¨ar i h¨ogsta grad borttagen fr˚an sidan. Detta gjordes en faktor ˚at g˚angen. Ett undantag fr˚an detta blev nyc- kelordsiterationerna, d¨ar de tv˚a iterationerna blev helt frist˚aende fr˚an varandra. Orsak behandlas i avsnitt 5.1.2.4.

Hur de olika iterationerna f¨or de valda faktorerna s˚ag ut presenteras i ett avsnitt f¨or varje faktor i n¨asta kapitel. Metoden utf¨ordes i f¨oljande steg:

1. N¨ar en ny iteration lagts ut p˚a dom¨anen s˚a fokuserade gruppen p˚a att beg¨ara indexering p˚a 4 av 26 URL:er: startsidan, resultatsida, om oss och vanliga fr˚agor. Detta enligt metoden som n¨amndes i avsnitt 2.3.3.2.

2. N¨ar 24 timmar passerat samt att Google Search Console visat att sidan in- dexerats s˚a samlades data in fr˚an b˚ade WebSite Auditor, SERPROBOT och Google i inkognitol¨age. Hur detta gick till beskrivs senare i detta avsnitt. Den f¨orsta testningen genomf¨ordes alltid fr˚an en dator i ¨Osterrike.

3. Efter att 48 timmar passerat s˚a genomf¨ordes en liknande testning d¨ar exakt samma data samlades in. 48-timmarstestet utf¨ordes alltid ifr˚an Sverige. 4. N¨ar detta var genomf¨ort skickades direkt n¨asta iteration till dom¨anen, som

hade f¨orberetts under v¨antetiden.

Denna process upprepades en iteration ˚at g˚angen tills dess att data fanns f¨or alla iterationer av alla valda faktorer. Varje respektive testning skedde med 48 timmars mellanrum d˚a det var det st¨orsta tidsspann gruppen kunde f¨ardigst¨alla testningen p˚a inom tidsschemat. Gruppen lade in tv˚a testningar f¨or varje iteration f¨or att f˚a ett s¨akrare testresultat. Anledningen till varf¨or varannan testning skedde i ¨Osterrike berodde p˚a att den ena testpersonen befann sig d¨ar. Inkognitol¨aget f¨or Google anv¨andes d˚a det inte sparar n˚agon webbplatsinformation, se avsnitt 2.3.4.1. I programmet WebSite Auditor s˚a gjordes f¨or varje iteration en Page Audit p˚a si- dorna: startsidan1, om-oss2, resultatsidan3 och resultatsida/skidor4. F¨or startsidan s˚a valdes “utrustning” och “semester” som nyckelord att optimera efter, p˚a sidan /om-oss valdes “Om oss”, p˚a sidan /resultatsida valdes “annonser” och p˚a sidan /resultatsida/skidor s˚a valdes “skidor”.

F¨or Google i inkognitol¨age och SERPROBOT s˚a unders¨oktes alla nyckelord och fraser som tas upp i tabell 3.3.4.

S¨oknyckel Nyckelord

1 hyr semesterutrustning 2 hyr utrustning till ¨aventyr 3 ShareCation

4 hyr utrustning av privatpersoner 5 hyr utrustning ShareCation

6 hyr semesterutrustning av privatpersoner 7 hyr prylar till semester

8 hyr semesterutrustning ShareCation 9 hyr skidor ShareCation

10 hyr skidor av privatpersoner 11 semesterutrustning

12 ¨aventyr semesterutrustning

Tabell 3.1: Tabell ¨over vilka nyckelord som anv¨andes vid testningen med Google i in- kognitol¨age och p˚a SERPROBOT samt vilken s¨oknyckel detta nyckelord motsvaras av.

D¨arefter sammanst¨alldes resultaten fr˚an Google, SERPROBOT och WebSite Au- ditor vilket presenteras i kapitel 4.

1 www.sharecation.nu 2_{www.sharecation.nu/om-oss} 3 www.sharecation.nu/resultatsida 4_{www.sharecation.nu/resultatsida/skidor}

3.3.1 Responsivitet

1. Till den f¨orsta iterationen anv¨andes f¨oljande ˚atg¨arder p˚a respektive sida f¨or att direkt implementera responsivitet, ut¨over den responsivitet som generellt erh¨olls genom anv¨andandet av Bootstrap.

(a) Om oss:

<div class "col-md-3 col-sm-6 col-6"> anv¨andes f¨or varje bild f¨or att placera de p˚a r¨att plats i kolumnerna beroende p˚a sk¨armstorlek. (b) Mina bokningar:

<div class=table-responsive text-nowrap"> anv¨andes f¨or att skapa en responsiv tabell i vilken annonserna kunde ligga.

(c) Mina annonser:

<div class=table-responsive text-nowrap"> anv¨andes f¨or att skapa en responsiv tabell i vilken annonserna kunde ligga.

(d) Skapa ny annons:

<div class="col-lg-6 col-md-8 order-sm-1 order-md-1 order-lg-2 order-1"> samt <div id="vanster"class="col-md-12 col-lg-6 order-sm-2 order-md-2 order-lg-1 order-2"> anv¨andes f¨or att placera annonser-

na i r¨att kolumner beroende p˚a sk¨armstorlek.

2. Till iteration tv˚a skalades responsiviteten ned i form av borttagandet av ovanst˚aende ˚atg¨arder.

3. Till iteration togs all CSS och bootstrap bort fr˚an samtliga HTML-filer.

3.3.2 404-page

1. Till den f¨orsta iterationen anv¨andes en skr¨addarsydd 404-page. 404-pagen inneh¨oll tydlig information till anv¨andaren om att denne hade hamnat p˚a ett sidorsp˚ar samt l¨ankar tillbaka till startsidan. Om anv¨andaren befann sig l¨angre ned i en l¨ankstruktur, exempelvis p˚a resultatsida/skidor5 _{s˚a gavs det ¨aven} en m¨ojlighet f¨or anv¨andaren att klicka sig tillbaka till resultatsida/skidor6. Ut¨over detta s˚a inneh¨oll den optimerade 404-pagen samma meny och footer som de andra sidorna.

2. Till den andra iterationen togs l¨ankarna d¨ar anv¨andaren kunde g˚a tillbaka till startsidan eller steg h¨ogre upp i l¨ankstrukturen bort. Den skr¨addarsydda 404-pagen med footer och meny beh¨olls dock.

3. Till den tredje iterationen anv¨andes ingen 404-page. Det fanns allts˚a ingen 404-page att skicka fr˚an servern d˚a detta felmeddelande uppkom. Det innebar att servern sj¨alv skickade ett 404 error till klienten som hade efterfr˚agat en felaktig URL.

5

www.sharecation.nu/resultatsida/skidor

3.3.3 Sitemap

Sitemapen skapades enligt standardprotokollet som togs upp i avsnitt 2.2.3

1. Till f¨orsta iterationen gjordes en komplett Sitemap ¨over ShareCation d¨ar alla l¨ankar ingick och inneh¨oll elementen <loc>, <lastmod>, <changefreq> f¨or varje l¨ank. Inf¨or alla iterationer s˚a uppdaterades <lastmod> elementet s˚a att det skulle bli enklare att indexera sidan. Nedan visas ett kodexempel p˚a mina annonser: <url> <loc>https://www.sharecation.nu/mina-annonser</loc> <lastmod>2019-04-15</lastmod> <changefreq>weekly</changefreq> </url>

2. Till den andra iterationen skalades sitemapen ned och alla <lastmod>- och <changefreq>-taggar togs bort.

3. Till den tredje iterationen togs XML-filen bort fr˚an adressen http://www.sharecation.nu/sitemap.xml.

3.3.4 Nyckelord

1. F¨or den f¨orsta iterationen s˚a skapades en version utav sidan d¨ar utvalda nyc- kelord implementerades p˚a webbapplikationens olika sidor under titel, meta description samt headers. Varje sida hade ¨aven en tydlig URL-struktur d¨ar det klart gick att uppfatta vilken sida som anv¨andaren f¨or tillf¨allet nyttjade. Koden f¨or titel, meta description och headers lades till i de olika HTML-filerna under <head> p˚a f¨oljande s¨att:

Titel: <title>H¨ar ¨ar ett exempel p˚a en titel</title>

Description metatag: <meta name=‘‘description’’ content=‘‘H¨ar ¨ar ett exempel p˚a en description metatag’’>

Headers: <h1>H¨ar ¨ar ett exempel p˚a en header</h1>

Nedan visas de nyckelord som gruppen lade till f¨or startsidan i fet stil: Title: “ShareCation - Hyr utrustning och prylar av privatpersoner till din semester!”

Description metatag: “Saknas cykel eller skidor inf¨or din semester? ShareCa- tion ¨ar l¨osningen f¨or dig som vill hyra utrustning under resan, vi sparar b˚ade p˚a milj¨on och pl˚anboken!”

P˚a startsidan, se tabell 3.2, analyserades ¨aven nyckelordsdensiteten f¨or nyc- kelorden p˚a sidan, som inte ingick i description metatag.

Nyckelord Nyckelordsdensitet Cykel 3% Hyra 6% Skidor 3% Utrustning 3% Prylar 3% ¨ Aventyr 3%

Tabell 3.2: Nyckelordsdensitet f¨or nyckelord p˚a startsidan.

Alla dessa nyckelord f¨oljer rekommendationerna fr˚an teoriavsnittet 2.2.4 d¨ar Hui et al. f¨orespr˚akade en densitet omkring 3-8 procent [23].

I tabell 3.3 visas alla nyckelord som implementerades p˚a www.sharecation.nu samt dess s¨okningsfrekvens och hur h¨og konkurrensen var f¨or dem:

Nyckelord Genomsnittliga s¨okningar per m˚anad Konkurrens

Utrustning 1.000-10.000 L˚ag Prylar 1.000-10.000 H¨og Semester 10.000-100.000 L˚ag Pl˚anbok 1.000-10.000 H¨og Hyra 1.000-10.000 L˚ag ¨ Aventyr 1.000-10.000 L˚ag Resa 10.000-100.000 Medel Cykel 10.000-100.000 H¨og Skidor 1.000-10.000 H¨og Elcykel 10.000-100.000 H¨og Annonser 1.000-10.000 L˚ag T¨alt 10.000-100.000 H¨og Ryggs¨ack 10.000-100.000 H¨og Fj¨allvandring 1.000-10.000 Medel Hj¨alm 1.000-10.000 H¨og Student 10.000-100.000 L˚ag Kontakt 1.000-10.000 L˚ag Jobb 10.000-100.000 Medel Tj¨anst 1.000-10.000 L˚ag

Tabell 3.3: Genomsnittliga s¨okningar per m˚anad samt konkurrens f¨or nyckelord som anv¨andes p˚a sidan.

Alla nyckelord i tabell 3.3 analyserades ¨aven i Google Trends med filter p˚a Sverige f¨or att se om det var relevant att nyttja dessa under april m˚anad 2019. Gruppen fann att de flesta termer hade ett j¨amnt s¨okintresse under ˚arets alla m˚anader, med undantag f¨or att vissa termer hade ¨okad popularitet kring de-

cember, juni, juli och augusti. Ett f˚atal nyckelord var dock v¨aldigt s¨asongsbetonade, exempel p˚a detta ¨ar t¨alt och skidor, se figur 3.1. Eftersom april ligger i bryt- punkten f¨or sommars¨asongen och vinters¨asongen s˚a valde gruppen dock att ta med alla dessa nyckelord.

Figur 3.1: Skidors s¨okfrekvens ¨over 5 ˚ar Google trends

Ett annat nyckelord som hade en tydligt avvikande trend var elcykel som har en ¨okande popularitet sett ¨over en fem˚arsperiod, se figur 3.2. D˚a nyckelordet redan har en relativ h¨og s¨okfrekvens och det finns f¨orhoppnig om en h¨ogre, s˚a valde gruppen att ta med detta ord.

Figur 3.2: Elcykels s¨okfrekvens ¨over 5 ˚ar Google trends

Gruppen implementerade ¨aven en l¨ankstruktur p˚a alla sidor som tydligt visade vad sidan som anv¨andaren var p˚a inneh¨oll. Var anv¨andaren p˚a exempelvis mina annonser s˚a var adressen: www.sharecation.nu/mina-annonser. Undantag f¨or detta var produktsidan och en kategoriserad resultatsida: F¨or varje produkt s˚a visades:

www.sharecation.nu/[produkt-id]-[produkt-titel]

P˚a resultatsidan s˚a visades vilken kategori anv¨andaren filtrerade resultatet p˚a: www.sharecation.nu/[kategori]

2. Till iteration tv˚a ¨andrades URL-strukturen p˚a s˚a s¨att att den inte gav n˚agon info om var anv¨andaren befann sig. Alla URL:er b¨orjade med en 120 tec- ken l˚ang str¨ang d¨ar varje tecken generarades slumpm¨assigt. Exempelvis s˚ag URL:en till startisdan ut p˚a f¨oljande s¨att:

www.sharecation.nu/beFoJ2tMAEu7dx3qj0Kwoz8kRFwRJRmvyjZMuz4mufxx LQLvZs9NgSDaC98ABPnadH6Zgx7Z2VK7ao7bL8O5fF0q5c5s289ZIu7IUqTUjBE 7GBoC0VtkyCac

Gruppen s˚ag ¨aven till att alla icke aktuella URL:er togs bort fr˚an Googles s¨okresultat med Googles verktyg f¨or borttagning av webbadresser.

3. Till den tredje iterationen s˚a togs alla titlar och description metatag bort. Den ursprungliga l¨ankstrukturen ˚aterskapades s˚a att det gick att se vart p˚a sidan anv¨andaren befann sig.

Resultat

I detta kapitel presenteras resultatet fr˚an f¨orstudien, e-handelsplattformens slut- resultat samt resultat fr˚an de tester d¨ar olika s¨okmotoroptimeringsmetoder un- ders¨oktes.

4.1

F¨orstudie

Resultat fr˚an marknadsanalys, prototypen, val av faktorer och utformning av nyc- kelord.

4.1.1 Marknadsanalys

Det initiala behovet av den planerade webbsidan kartlades av en enk¨at, det fullst¨andiga resultatet av denna g˚ar att se i bilaga B.1. Det fastst¨alldes att 56,8 procent anv¨ander en s¨okmotor f¨or att hitta utrustning att hyra, 86,2 procent svarade att de kan t¨anka sig att hyra av privatpersoner och 72,9 procent kan t¨anka sig att hyra ut sin ut- rustning till privatpersoner. Det fanns en h¨ogre ben¨agenhet bland studenter ¨an arbetande att hyra ut och hyra av privatpersoner.

4.1.2 Prototyp

Under f¨orstudien togs en prototyp fram, se figur 4.1 och figur 4.2. Designen p˚a prototypen f¨oljdes v¨aldigt n¨ara n¨ar webbsidan skapades.

Figur 4.1: Prototyp f¨or startsidan

Startsidan best˚ar av en s¨okruta d¨ar anv¨andaren ska kunna skriva in en s¨okterm. Nedanf¨or denna finns knappar f¨or olika kategorier som anv¨andaren ska kunna trycka p˚a ist¨allet f¨or att skriva en s¨okterm. L¨angst upp p˚a sidan finns en navbar med funktioner som Vanliga fr˚agor, Logga in, Registrera dig samt Alla annonser.

Annonssidan best˚ar av en s¨okruta d¨ar anv¨andaren kan g¨ora en ny s¨okning. P˚a v¨anstra sidan finns en sitemap d¨ar anv¨andaren kan byta till en ny kategori. An- nonserna i den s¨okta kategorin visas i rutor d¨ar det ¨aven finns en knapp som g¨or att anv¨andaren kommer vidare till produktsidan. P˚a denna sida finns ¨aven samma navbar som p˚a startsidan med de funktioner som anses vara viktiga f¨or anv¨andaren och ska d¨armed vara ˚atkomliga p˚a alla sidor.

4.2

Implementation

I enlighet med avsnitt 3.2.1 utvecklades under projektets g˚ang tv˚a versioner av webbapplikationen som presenteras nedan. Vid vidareutvecklingen av testversionen till Single Page Application ¨andrades inte den optimering som gjorts av de utval- da faktorerna: responsivitet, sitemap, nyckelord och 404-page. Detta f¨or att g¨ora testversionen en s˚a tillf¨orlitlig representation av den fullst¨andiga applikationen som m¨ojligt.