Viktige punkter angående metakoder
- Metakoder tilfører avgjørende informasjon om en nettside, som er nyttig for søkemotorer, nettlesere og diverse nettjenester.
- De viktigste metakodene inkluderer metabeskrivelser, Open Graph-koder, viewport-tagger og HTTP-equiv-tagger.
- Egendefinerte metakoder gir større fleksibilitet, men krever nøye planlegging og detaljert dokumentasjon.
I tillegg til sidens tittel, skript og stilark, kan HTML-dokumentets <head> seksjon inneholde metakoder. Disse kodene er essensielle for søkemotoroptimalisering (SEO), tilgjengelighet og den generelle ytelsen til et nettsted.
Lær mer om hvordan du bruker metakoder og hvilken informasjon de kan gi.
Metakoder er HTML-elementer som gir tilleggsinformasjon om en nettside. Disse metadataene vises ikke direkte i nettleseren, men de kan brukes av ulike verktøy, inkludert søkemotorer, nettlesere og andre nettjenester.
Informasjonen som legges til via metakoder bidrar til å forbedre søkemotorrangeringer, øke responsiviteten og tilgjengeligheten til nettsiden, samt forbedre hvordan sidene vises på sosiale medieplattformer.
Metakoder er selvlukkende tagger, det vil si at det ikke er noen avsluttende </meta> tagg, fordi de ikke omslutter noe innhold. Dataene deres er lagret som attributter. Metakoder plasseres i <head> delen av HTML-dokumentet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dokument</title>
</head>
<body></body>
</html>
Dette eksemplet på standard HTML-kode inneholder to metakoder i <head> seksjonen. Disse metakodene gir informasjon om henholdsvis tegnsettet (UTF-8) og viewport (visningsområdet).
De fleste metakoder bruker en kombinasjon av følgende attributter for å lagre data:
- name og content: Attributtet «name» fungerer som en etikett, mens «content»-attributtet inneholder dataene som er knyttet til denne etiketten. Dette gir et fleksibelt system for lagring av alle nødvendige metadata.
- property: Dette attributtet brukes noen ganger som et alternativ til «name» og tjener tilnærmet samme formål.
- http-equiv: Står for «HTTP-ekvivalent» og definerer en HTTP-header for verdien som er angitt i «content»-attributtet.
- scheme: Dette attributtet, brukt sammen med «name», definerer datatypen i «content»-attributtet.
Følgende metakoder er vanligvis støttet av ulike nettjenester og nettlesere:
Metabeskrivelse Tag
Dette er et utdrag på opptil 155 tegn som oppsummerer innholdet på en side. Søkemotorer viser ofte dette under sidetittelen og URL-en. Det er viktig å gi en konsis og nøyaktig beskrivelse for å oppmuntre brukere til å klikke på lenken og besøke nettsiden.
<meta name="description" content="En kort beskrivelse av din side">
Open Graph Metakoder
Disse kodene er mye brukt av Facebook og andre sosiale medier. De benytter informasjonen i disse taggene for å forbedre presentasjonen av lenker til siden din når brukere deler den. Open Graph-metakoder inkluderer attributter som og:title, og:description og og:image:
<meta property="og:title" content="Din sidetittel">
<meta property="og:description" content="En kort beskrivelse av din side">
<meta property="og:image" content="URL til et relevant bilde">
SEO Metakoder
Disse kodene gir informasjon til søkemotorer og kan bidra til å forbedre sidens rangering. De er en del av anbefalt praksis for SEO. De inkluderer attributter som roboter, forfatter og mer. Selv om viktigheten av disse kodene har avtatt over tid, er det fortsatt relevant å inkludere dem i HTML-dokumentet.
<meta name="robots" content="index, follow">
<meta name="author" content="Ditt navn">
Viewport Metakode
Viewport-metakoden er et viktig element i responsivt webdesign. Den instruerer nettleseren om å justere nettsidens layout i henhold til enhetens bredde, for å sikre at innholdet vises korrekt og er lesbart på mobile enheter.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-Equiv Metakoder
Disse metakodene er essensielle for å kontrollere spesifikke aspekter ved hvordan nettlesere og servere behandler nettsider. De inkluderer attributter som «refresh» og «X-UA-Compatible». Selv om deres direkte innvirkning på SEO kan variere, spiller de en viktig rolle for å påvirke sidens oppførsel og kompatibilitet.
<meta http-equiv="refresh" content="5;url=https://eksempel.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Du vil sannsynligvis ikke bruke alle disse metakodene samtidig i dine prosjekter, men det er likevel viktig å ha god forståelse av de ulike metataggene som finnes. Bruk av metakoder bidrar også til å forbedre organiseringen av HTML-dokumenter.
Metakoder er fleksible fordi:
- Du kan fritt velge et valgfritt navn for å lagre dataene du ønsker.
- Nettlesere vil ikke vise innholdet deres, men det vil alltid være synlig i kildekoden.
Her er et eksempel på en egendefinert metakode:
<meta name="malgruppe" content="utviklere">
I dette eksemplet spesifiserer den tilpassede taggen målgruppen for innholdet, og indikerer at det er rettet mot utviklere.
Egendefinerte metakoder gir en mulighet til å utvide standardssettet av anerkjente tagger. Det er likevel viktig å dokumentere de egendefinerte taggene du bruker nøye, og ha en klar forståelse av hvordan de skal brukes. Andre tjenester vil som standard ikke bruke eller gjenkjenne dem, så du må sannsynligvis skrive egen kode for å behandle dem.