Oblig 3 Webutvikling

Transkript

1 Oblig 3 Webutvikling Oppgave 1 Ta for deg en selvvalgt bedrift (gjerne lokal/mindre) og tenk deg at du hadde fått i oppgave å være en SEO-konsulent for disse i én uke. På denne uken skulle du gjennomført hele prosessen med SEO fra analyse til implementering. Beskrive detaljert (ikke nødvendigvis så veldig mange ord, men mye innhold) hva du konkret ville gjort i følgende deler av prosessen (altså ikke overordnet beskrivelse av prosessen, men de konkrete tingene du ville gjort i dette konkrete caset) 1) Analyse av bedriften (målsetting, kundegrupper, produkter, konkurrenter, salgskanaler osv, osv. ) 2) Analyse av eksisterende nettsted 3) SEO-informasjon/plan (f.eks. nøkkelord, landingssider, kundegrupperinger på nett, bestillingsprosesser, nettstedskart) 4) Teknisk implementasjon - I enkle tilfeller beskriver du direkte kode som eksempler på grep du ønsker gjøre - I mer omfattende tiltak holder det å beskrive disse mer overordnet Svar oppgave 1 Jeg har valgt å ta for meg nettsiden til Røsnæs Bilopphuggeri AS. ( 1) Firmaet har kunder i alle aldre, damer og menn. Firmaet selger brukte bildeler og andre bilrelaterte produkter (olje, spylerveske osv.). Konkurrentene dette firmaet står ovenfor er andre bilopphuggerier rundt om i Østfold. Per dags dato kan du kun kjøpe produktene ved å dra til stedet de holder til, og eventuelt finne delene du trenger selv. De har et søkesystem gjennom NBF Bildeler sin side. Men ettersom de har et lager har de også stor mulighet til å kunne ha et register hvor de registrerer hvilke deler de har og de kunne også hatt en funksjon som gjør det mulig for kunder å handle på nett. 1/18

2 2) Den eksisterende nettsiden har et forferdelig design! Siden inneholder en mengde med bilder (ikke søkbare) som blant annet er en erstattning for nav meny. For å kunne navigere deg rundt på siden må du benytte deg av bildene som ved første øyekast ikke så ut som en meny. I selve koden er det heller ikke definert noen nav meny. Nettsiden er ikke responsiv, og er derfor ikke tilpasset de forskjellige plattformene som brukerne kan bruke. Når det gjelder koden, er det ikke stort å si annet enn at den er uoversiktlig og utrolig rotete. Det blir brukt internal css og inline css, samtidig bruker de enormt mange for å skape et mellomrom mellom teksten på siden. For å få en viss oversikt over nettsiden har jeg foretatt en liten SEO Analyse av nettstedet: Design Standardisering og Segmentering Doctype mangler Meta charset mangler W3C validatoren indikerer at det er 39 errors og 6 warnings på nettsiden. Header bruker ikke html5 Nav bruker ikke html5 Footer bruker ikke html5 Multimedia Bilder og ikoner Det finnes i hvert fall 15 forskjellige bilder som kan lastes ned Ingen av bildene har en alt tekst. (alternative text) Det finnes ikke noen form for favicon på siden. 2/18

3 Tekst Innhold og semantikk Side tittel 25 bokstaver, anbefalt å bruke bokstaver i tittel. Tittelen skal inneholde hovednøkkelordene som beskriver nettsiden og navnet på firmaet Titler o H1 mangler o H2 2 ok o H3 11 for mange o H4 1 ok o H5 mangler o H6 mangle Tekst styling o Strong 23 for mange o U mangler o Em mangler Nettverk Rangering Nettsiden er ikke populær nok, og har derfor ingen rank. Indeksering Robots.txt mangler Sitemap(s) mangler Sosiale nettverk Nettsiden er ikke linket opp mot noe sosialt nettverk i det hele tatt. Søkemotorer Forhåndsvisning av søkeresultat: Røsnæs Bilopphuggeri AS 3/18

4 3) Først og fremst ville jeg kodet store deler av siden på nytt, slik at vi ville fått en oversiktlig, strukturert og semantisk riktig nettside. Lage beskrivende og unike titler for hver og en side. Lage beskrivelser (<description>) for sidene. Lage nøkkelord, som har en sammenheng med resten av nettsiden. Erstattet bildene som skal indikere en meny, med en nav tag og laget en ordentlig meny. Definere alt teksten i imgtaggene. Laget et enkelt bestillingskjema, slik at kundene kan få tak i delene på nettet og ikke bare på området. Laget en søke side, slik at du kan vite hva de har av deler. Erstattet alle divtaggene med sematiske tagger som. Legg linker på siden. Laget et nettstedskart Lagt til en robots.txt fil, slik at crawlerne enklere kan indeksere siden. 4/18

5 4) Metadata <meta charset= utf8 > <title> Røsnæs Bilopphuggeri AS Bildeler til de fleste biler. </title> <meta name= description content= Vi har de fleste deler til de fleste biler, besøk oss for å se det store utvalget. > <meta name= keywords content= Bilopphuggeri, Bildeler, Vrakpant, Sanering, Demontering, Halden, Østfold > Strukturelle tagger <div id= header > <header> <h1> Røsnæs Bilopphuggeri AS </h1> </header> </div> <div id= menu > <nav> <ul> <li> Hjem </li> <li> Om oss </li> <li> Lageret </li> <li> Søk etter deler </li> </ul> </nav> </div> <div id= section > <section> Informasjon / Innhold som siden skal inneholde. </section> </div> 5/18

6 <div class= sidebar > <aside> Åpningstider </aside> </div> <div id= footer > <footer> Kontakt informasjon </footer> </div> Microdata Jeg ville brukt microdata i noen tilfeller, og jeg ville brukt følgende skjemaet: Navn på firmaet <span itemprop= name > Røsnæs Bilopphuggeri AS </span> Adresse <span itemprop= address > Røsnæs, Berg i Østfold </span> Telefonnummer <span itemprop= telephone > </span> <span itemprop= > kundeservice@rosnaes.no </span> 6/18

7 Skjemaer og funksjoner jeg hadde laget for nettsiden: Jeg ville laget en handlekurv funksjon, slik at når kunden finner en bildel de ønsker å kjøpe, kan han/hun enkelt legge den til i handlekurven og deretter gå videre til kassen eller lete videre etter eventuelle andre bildeler han/hun var på jakt etter. Jeg ville også laget en søkefunksjon ved hjelp av en database som vil inneholde alle de forskjellige bildelene firmaet har og ønsker å selge. I denne søkefunksjonen ville jeg fokusert på å legge bildeler etter merke og årsmodell på de forskjellige bilene, slik at kunden enkelt kan finne ut om de har den spesifikke delen til deres bil. Til slutt ville jeg laget et kontaktskjema, hvor kunden enkelt kunne komme i kontakt med firmaet via . I dette skjemaet må kunden fylle ut fullt navn, adresse og en beskrivelse av hva de eventuelt lurer på. Under ligger en illustrasjon av kontaktskjemaet jeg ville laget. 7/18

8 Oppgave 2 a) Lag minst 5 ulike nettsider som hver inneholder informasjon (kan klippes og limes fra andre kilder) som er strukturert med hvert sitt microdatavokabular. b) Vis for hver nettside hvordan Google benytter denne informasjonen (f.eks. screenshot av c) Hvilke andre tjenester (pluginmoduler, nettsider, applikasjoner osv) kan du foreslå som ville kunne benyttet disse vokabularene som du har tatt i bruk til noe? (Altså: Du skal finne på og beskrive slike tjenester selv) Svar oppgave 2 a) Disse nettsidene ligger som egne html sider under Oblig 3. b) Begynner på neste side (9)! c) Et eksempel på en annen tjeneste som kunne fått bruk for microdata kunne vært for eksempel en nettside hvor de informerte om kommende arrangementer, hadde de bruky av microdata kunne de fått til at dersom du gikk inn på et spesifikt arrangement ville den automatisk bli lagt til i kalenderen din. Et annet eksempel kan være for eksempel nettsiden for en matvarebutikk, hvor du kan gå inn å finne forskjellige oppskrifter, og dersom du hadde funnet en oppskrift du ville bruke til å lage middag ville handlelisten automatisk lagt seg inn på huskelisten på telefonen din slik at du vet hva du skal handle til middagen. 8/18

9 Svar oppgave 2 B Hvordan Google benytter mine data om Person : 9/18

10 Hvordan Google benytter mine data om Event : 10/18

11 Hvordan Google benytter mine data om Movie : 11/18

12 12/18

13 Hvordan Google benytter mine data om Book : 13/18

14 Hvordan Google benytter mine data om Product : 14/18

15 Gamle eksamensoppgaver Oppgave E1 a) Forklart kort, og så pressist som mulig, hva microdata er. b) Hvilken overordnet ide/prosjekt/målsetning skal microdata bidra til? Svar oppgave E.1 a) Microdata er tilleggsinformasjon i en html fil, i tillegg til html taggene. b) Microdata lager en viss struktur av metadata i det eksisterende innholdet på siden og bidrar til at nettsiden blir ekstremt maskinlesbar. Ved hjelp av microdata vil det være lettere for søkemotorer å skjønne hva vi skriver på nettsiden vår, som igjen gjør det lettere for oss å kunne søke etter noe å få opp nøyaktig det vi leter etter. Microdata vil også kunne bidra til at for eksempel arrangementer du søker på automatisk vil legge seg i kalenderen din slik at du ikke går glipp av det. 15/18

16 Oppgave E.2 Hvilke faktorer(/elementer/parametre/informasjon) for en webside bruker en søkemotor i rangeringen? (Dette blir selvsagt ikke noen absolutt og endelig liste, men få med de viktigste) Svar som en punktliste i kortfattet form. Svar oppgave E.2 Lengde på URL Domenets alder og historie Lengde på innhold Om nettsiden inneholder kopiert innhold Antall interne og eksterne linker Hvor mange sosiale medier den er koblet opp mot, og eventuelt hvor mange likes/delinger/besøkende de har. Sjekker om <description> er brukt, og hvor relevant innholdet i taggen er i forhold til innholdet på nettsiden. Sjekker om nøkkelord er brukt, både i tittel og body Hvor mange bilder er det på nettsiden og har alle en alt informasjon? Hvor mange h1, h2, og h3 tagger som er brukt 16/18

17 Oppgave E.3 Hva er Site Authority i forbindelse med SEO, og hvordan oppnår man dette? Svar oppgave E.3 Site authority eller page authority er et begrep som blir brukt til å beskrive sannsynligheten til at en tilfeldig side på din nettside vil dukke opp blant utallige mange andre sider når noe relevant til din side blir søkt etter. Denne funksjonen er basert på en algoritme som håndterer all mulig informasjon som er relevant til et eventuelt søkeord. Men hvordan oppgår du site authority? Du bør ha innhold som oppdateres ofte. Du bør få med ny og interessant informasjon når du oppdaterer. Informasjonen bør også være detaljert, relevant til siden din, lett og morsom å lese og nyttig for brukerne. Siden din bør også inneholde bilder, men for at søkemotorene skal skjønne noe bør du ha med en beskrivende alt tekst. Oppgave E.4 Hvorfor kan vi (som oftest) ikke se resultater av SEO (Search engine optimization) umiddelbart? Svar oppgave E.4 Før vi kan se noen resultater av SEO, må siden indekseres først. Crawlers må undersøke siden, og det er sjeldent dette blir gjort umiddelbart etter at du har endret på nettsiden din. 17/18

18 Oppgave E.5 a) Hvorfor er søkemotorens rankingalgoritmer som oftest hemmelige, og hvorfor endres de omtrent daglig? Søkemotorenes algoritmer er hemmelige av den grunn at deres algoritmer utfører enorme prosesser når det gjelder all den informasjonen som ligger på nettet, derfor er det viktig at disse algoritmene ikke havner i hendene på en eventuell konkurrent. De endres nesten hver dag slik at de som har eller lager websider ikke skal kunne jukse seg frem til en høyere rank. b) Hvorfor får vi endringer i en sides søkemotorrangering over tid, uten at sideinnholdet er endret? (her er det minst 2 grunner...) Det kan være fordi siden sjeldent blir besøkt, og inneholder uinteressant informasjon som aldri oppdateres. En annen mulighet er at det stadig kommer nye konkurrenter som kanskje oppdaterer siden sin ofte og kommer med ny og interessant informasjon. 18/18