Innholdsfortegnelse
Viktige takeaways
- Metakoder gir viktig informasjon om en nettside for søkemotorer, nettlesere og nettjenester.
- Viktige typer inkluderer metabeskrivelse, åpen graf, viewport og HTTP-equiv-tagger.
- Egendefinerte metakoder tilbyr fleksibilitet, men krever nøye dokumentasjon og planlegging.
Ved siden av sidens tittel og skriptene og stilarkene den bruker, kan en HTML-hodedel inneholde metakoder. Disse er avgjørende for SEO, tilgjengelighet og den generelle ytelsen til nettstedet.
Lær hvordan du bruker metakoder og finn ut om informasjonen de kan gi.
Metakoder er elementer som gir tilleggsinformasjon om en nettside. Nettlesere viser ikke disse metadataene direkte, men alle verktøy kan bruke dem til ulike formål. Dette inkluderer søkemotorer, nettlesere og andre nettjenester.
Dataene du oppgir i meta-tagger bidrar til å forbedre søkemotorrangeringer, bidrar til nettsidens respons og tilgjengelighet, og forbedrer visningen av sidene dine på sosiale medier.
Metakoder er selvlukkende tagger; det er ingen fordi de ikke omslutter noe innhold. De inneholder alle sine data i attributter. Du kan legge til metakoder i head-delen av HTML-filen din:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
Dette eksempelet på HTML-boilerplate inneholder to metakoder i head-delen. De gir informasjon om henholdsvis tegnsettet (UTF-8) og viewport.
De fleste metakoder bruker en kombinasjon av følgende attributter for å inneholde dataene deres.
- navn og innhold: Navneattributtet er som en etikett, mens innholdsattributtet lagrer dataene knyttet til den etiketten. Dette gir et fleksibelt, utvidbart system for å lagre alle metadata du trenger.
- egenskap: Denne attributten brukes noen ganger som et alternativ til navn og tjener omtrent samme formål.
- http-equiv: Står for «HTTP-ekvivalent», definerer dette attributtet en HTTP-header for verdien spesifisert i innholdsattributtet.
- skjema: Dette attributtet, brukt med navn, definerer datatypen i innholdsattributtet.
Du vil finne at følgende metakoder vanligvis støttes av ulike nettjenester og nettlesere.
Meta Description Tag
Dette utdraget på opptil 155 tegn oppsummerer innholdet på en side. Søkemotorer viser det ofte under sidetittel og URL. Det er viktig å gi en kortfattet og nøyaktig beskrivelse for å oppmuntre brukere til å klikke på koblingen og besøke siden din.
<meta name="description" content="A brief description of your page">
Åpne Graph Meta Tags
Facebook, og andre sosiale medieplattformer, gjør betydelig bruk av disse taggene. De bruker informasjonen i disse kodene 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="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
SEO Meta Tags
Disse kodene gir informasjon for søkemotorer og kan bidra til å forbedre sidens rangering. De er også inkludert på listen over viktige beste praksiser for SEO. De inkluderer attributter som roboter, forfatter og mer. Selv om viktigheten av disse kodene har blitt mindre over tid, er det fortsatt viktig å inkludere dem i HTML-dokumentet.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
Viewport Meta Tag
Viewport-metakoden er et viktig element i responsiv webdesign. Den forteller nettleseren å justere nettsidens layout i henhold til enhetens bredde, for å sikre at innholdet vises riktig og er lesbart på mobile enheter.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-Equiv Meta Tags
Disse metakodene er avgjørende for å kontrollere spesifikke aspekter ved hvordan nettlesere og servere behandler nettsider. De inkluderer attributter som oppdatering og X-UA-kompatibel. Selv om deres direkte innvirkning på SEO kan variere, spiller de en avgjørende rolle i å påvirke sidens oppførsel og kompatibilitet.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Du vil ikke bruke dem alle samtidig i prosjektene dine, men det er fortsatt viktig å ha en god forståelse av de forskjellige metataggene som er tilgjengelige. Bruk av metakoder gir også fordeler ved å forbedre organiseringen av HTML-dokumenter.
Metakoder er fleksible fordi:
- Du står fritt til å bruke et valgfritt navn for å lagre data du ønsker.
- Nettlesere vil ikke vise innholdet sitt, selv om det alltid vil være synlig i sidekilden.
Her er et eksempel på en egendefinert metatag:
<meta name="target-audience" content="developers">
I dette eksemplet spesifiserer den tilpassede taggen målgruppen for innholdet, noe som indikerer at den er rettet mot utviklere.
Egendefinerte metakoder tilbyr en måte å utvide standardsettet med tagger som er allment anerkjent. Det er imidlertid viktig å nøye dokumentere de egendefinerte taggene du bruker og ha en god forståelse av hvordan du vil bruke dem. Andre tjenester vil ikke bruke eller gjenkjenne dem som standard, så du vil sannsynligvis skrive din egen kode på et tidspunkt for å behandle dem.