Tittel, beskrivelse og sociale kort
Skriv head-delen som får klikk — og test den i arbeidsområdet.
Head-delen av en side er butikkvinduet i søkeresultatet: tittelen er navnet på treffet, beskrivelsen er salgsteksten under, og de sociale kortene er hva folk ser når lenken deles. I denne øvelsen skriver du hele vinduet selv — for en ekte, fiktiv bedrift.
Tittelen: navnet på treffet
<title> blir den klikkbare overskriften i søkeresultatet — og fanetittelen i nettleseren. Tre regler som holder: den skal være unik per side, ha hovedordet tidlig («snekker», «tømrer», stedet du jobber i), og holde seg rundt 50–60 tegn — alt etter det klippes vekk i resultatet. Slik kan det se ut for en annen bedrift:
<head> <meta charset="utf-8" /> <title>Kafé og frokost i Trondheim — Kafé Solglimt</title> <meta name="description" content="Kafé Solglimt serverer frokost, kaker og lunsj i Trondheim sentrum. Kom innom, eller bestill bord på forhånd." /></head>Beskrivelsen: grunnen til å klikke
<meta name="description"> rangerer deg ikke opp — det var den ærlige leksjonen fra grunnkurset. Men den står under tittelen i resultatet, og der selger den klikket: hva får du som besøkende, hvor, og hvorfor akkurat nå. «Velkommen til vår nettside» er en kastet plass.
Oppgaven
Øvelsen ligger i arbeidsområdet nederst på siden. Bedriften er Fjellheim Snekkeri AS — en tømrer- og snekkerbedrift i Lillehammer. Fem punkt, som svarer direkte til de fem sjekkene i arbeidsområdet:
- Skriv en unik `<title>` med hovedordet tidlig — «snekker» eller «tømrer» og Lillehammer i den første halvdelen.
- Legg inn en `<meta name="description">` som gir grunn til å klikke — hva de får, hvor, og en invitasjon.
- Legg inn en `<link rel="canonical">` som peker på sidens egen adresse (finn på: fjellheimsnekkeri.no).
- Legg inn Open Graph-kortet:
<meta property="og:title">og<meta property="og:description">. - Sett `lang="no"` på
<html>-taggen.
Sosiale kort: Open Graph
Deler noen lenken din i sosiale medier eller en chat, leser plattformen ikke <title> — den leser Open Graph-merkene: og:title og og:description. De skal si det samme som tittelen og beskrivelsen, men er skrevet for delingen. Canonical-merket peker på sidens offisielle adresse — vi går ærlig rundt hvorfor det trengs i leksjon 6.
Obs
Google skriver gjerne selv
Google omskriver ofte både tittel og beskrivelse når den tror noe annet passer søkeren bedre. Det er ikke en grunn til å droppe dem — det du skriver, er fortsatt utgangspunktet og det som vises i de fleste treff.
Du kan nå
- skrive en unik tittel med hovedordet tidlig — og en lengde som ikke klippes
- gi beskrivelsen et konkret grunn til å klikke, ikke en tom velkomsthilsen
- legge canonical og Open Graph-kort i head-delen, med lang="no" på <html>
Arbeidsområdet
NettsideBedriften i fanen ved siden av har en side — men head-delen er tom. Skriv tittel, beskrivelse, canonical og Open Graph-kortet etter de fem punktene i oppgaven over, fyll inn lang="no" på <html>-taggen, trykk «Kjør» for å se siden — og «Sjekk løsningen» når du tror alt er på plass.
Tips: Ctrl + Enter kjører koden, Ctrl + Shift + Enter sjekker løsningen (Cmd på Mac).
Framdriften din
0 av 5
- Har en tittel med innhold
- Har en meta-beskrivelse med content
- Har en canonical-lenke med href
- Har et Open Graph-kort med og:title
- Har lang="no" på <html>
Trykk «Kjør» for å se siden din.
Forhåndsvisningen åpner her, ved siden av koden din.
Konsoll
Kjør koden for å se output her.