Oblig 3 Webutvikling



Like dokumenter
Oblig 3 Webutvikling. Oppgave 1

Responsiv design Skalering av siden trenger å gjøres noe med, slik at den er tilpasset de fleste skjermstørrelser.

Webutvikling Oblig 3. Oppgave 1

Oblig 3 Webutvikling

OBLIG 1 - WEBUTVIKLING

Oblig 1. Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

OBLIG 2 WEBUTVIKLING

Søkemotorer. - en guide for en bedre rangering. Søkemotorer en guide for bedre rangering. InBusiness AS

Oblig 4 Webutvikling. Oppgave

Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

SENSORVEILEDNING. Dato: Eventuelt:

OBLIG 1 WEBUTVIKLING. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oblig 4 Webutvikling

NORSKE MUSEER. Google Plus Local / Google Local. Agnete Tøien Pedersen Head of SEO. Copyright 2011, iprospect, Inc. All rights reserved.

SEO. Erlend Nilsen Senior rådgiver Seo og Content Marketing

Oblig 1 Webutvikling av Jon-Håkon Rabben

Oblig 1 Erlend Hannestad

Norsk konsulentselskap Alt innen brukeropplevelse på nett

Hvordan setteopp en wordpress site med wampserver. Lokal site på din pc.

SEO. Søkemotoroptimalisering. Bjørn Ove Width 07 Interaktiv FROKOSTSEMINAR 2018

DIAGNOSERAPPORT. B&W Caravan DA Utført av: Jan Erik Iversen

Søkemotoroptimalisering. Lenker/ popularitet. Tekster/innhold. Plattform/webarkitektur. SEO pyramiden

Dennis Myhre Oblig 4 Wordpress Dokumentering og Eksamensoppgaver

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Businesscatalyst PAGES

DIAGNOSERAPPORT. Arne Fallrø AS. Utført av: Jan Erik Iversen

6 TEKNISK - MOBIL Teknisk stand mobil-versjonen av nettsiden. 7 TEKNISK - DATAMASKIN Teknisk stand på desktop-versjonen av nettsiden.

WEBUTVIKLING OBLIG 4. Installasjon

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress

Intro til WWW, HTML5 og CSS

Brukermanual. PUS i Web. Mai 2009 (Versjon 1)

DIAGNOSERAPPORT. for. Dato: Utført av: Tommy Svendsen

Bli elsket av Google. Hva er SEO. Målet for kurset

Oblig 5 Webutvikling. Av Thomas Gitlevaag

Øving 4: Brukergrensesnitt

SJEKKLISTE: 10 ting du må ha på plass for SEO i 2019

Oblig 5 Webutvikling

Hvordan komme høyere opp på søketreff hos Google?

Høgskoleni østfold EKSAMEN

DIAGNOSERAPPORT. Utført av: Jon Petter Hellesvik

Oppbygging av innhold på responsive nettsider.

Webutvikling oblig 1 Marius Hanssen

Høydepunkt fra seminaret. Bli bedre på søk. i regi av Den norske dataforeningen 30/ Siv Fjellkårstad sivaf@usit.uio.no

praktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems.

Mamut Business Software. Introduksjon. Mamut Enterprise Product Search Kelkoo

Brukerveiledning. Madison Møbler Nettbutikk

HTML5. Skjemaer på nettsider. Skjemaer med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS

EKSAMEN. Noen spørsmål kan besvares som punktlister. Prøv her å strukturere svaret slik at hvert punkt omhandler ett tema/element.

Forskningsdagenes programdatabase

en hjemmeside Lesson Introduksjon Du kjenner en del HTML tagger, så nå er det på tide å lage din første hjemmeside! La oss begynne med en gang.

Avansert tekstmodul Eksempel Administrasjon Bilde Eksempel på en bildemodul Eksempel på en bildemodul lagt til uten

DIAGNOSERAPPORT. Pris kr 1 890,- eks MVA. for. Dato: Utført av: Jon P Hellesvik

SEO Agnete Tøien Pedersen Head of SEO. Copyright 2011, iprospect, Inc. All rights reserved.

Eksamensoppgaven: Oppgavesettet består av fire deler: DEL 1: Påstander, DEL 2: Flervalg, DEL 3: Kodeoppgave og DEL 4: Langsvar.

Frikart til Garmin. Manual for Frikart til Garmin GPS

DEFINISJONER I DIGITAL MARKEDSFØRING

HTML: Del inn nettsiden

Oppgave 1. Webutvikling. Oblig 5. Sette opp WAMP og Wordpress. Først og fremst må man laste ned WAMP.

Administrasjon av saker. - Redigere saker med standard mal

!!!!!!!!!!!! !!!!!!!!!!! SEO HURTIG GUIDE WORDPRESS

Ønsker du hjelp vedrørende utfyllingen, så kan du ringe oss på og avtale et møte. Vi utvikler for å begeistre.

Hvaskjer.nu: løsningsbeskrivelse

EKSAMEN / 6101N WebPublisering

Forsvunnet katt webside

Lærebok. Opplæring i CuraGuard. CuraGuard Opplæringsbok, - utviklet av SeniorSaken -

Brukerveiledning WordPress. Innlogging:

Hva er det med internett, hvorfor satse på det?

Administrering av SafariSøk

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

Innhold som treffer Magnus Strømnes Bøe

Så hva er affiliate markedsføring?

Vedlikeholde nettstedet i Joomla 2.5 +

Skrive for WEB 9. juni 2016

Refleksjonsnotat Web.

EKSAMEN Webpublisering

Facebookstrategi. Med Acrobat Reader kan du navigere og fylle ut felter i dette PDF dokumentet. Kursansvarlig: Stig Solberg

Jeg lastet ned wordpress 4.0 fra wordpress.org og lastet dette opp til public_html på webområdet mitt via en ftp-klient.

CASCADING STYLESHEETS (CSS)

VI HJELPER KUNDENE Å FINNE DEG

Formatering og bruk av bilder på Hemings hjemmeside

Søkesystemer og thesauri

Produktinformasjon WIPS publiseringsløsning

Salg og markedsføring på internett. Børre Berglund

Steg 1: Vi starter fra toppen

the web Introduksjon Lesson

DIAGNOSERAPPORT. for. Dato: Utført av: Jon P Hellesvik

GoOnline Site Search

REFLEKSJONSNOTAT FOR WEBPERIODEN

BRUKERMANUAL WEB-publisering og e-post

8 LINKER Oversikt over innkommende og utgående linker.

Manual for PENDULUM MUSIKER WEBSIDE

Hvor og hvordan lagrer du mediafilene dine?

Håndbok for Office 365

Øving 7: Søking og navigasjon

Kom i gang. Nå er det enklere en noensinne å redigere hjemmesiden din med Plone CMS. 17. mars 2010

Kan Content Marketing gi deg håret tilbake?

Den beste måten hvis du skal endre allerede eksisterende artikler

Transkript:

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. (http://www.rosnaes.no/) 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) 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

Tekst Innhold og semantikk Side tittel 25 bokstaver, anbefalt å bruke 60 80 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 http://www.rosnaes.no/ 3/18

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

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

<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: http://schema.org/organization 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 > 69179310 </span> Email <span itemprop= email > kundeservice@rosnaes.no </span> 6/18

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 email. I dette skjemaet må kunden fylle ut fullt navn, email adresse og en beskrivelse av hva de eventuelt lurer på. Under ligger en illustrasjon av kontaktskjemaet jeg ville laget. 7/18

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 http://www.google.com/webmasters/tools/richsnippets) 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

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

Hvordan Google benytter mine data om Event : 10/18

Hvordan Google benytter mine data om Movie : 11/18

12/18

Hvordan Google benytter mine data om Book : 13/18

Hvordan Google benytter mine data om Product : 14/18

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

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

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

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