Skip to content
Search

Open Graph-metatagger: det du må vite

En praktisk guide til Open Graph-metatagger: hva de gjør, viktige tags og eksempler, plattform-fallbacks, teststeg og en sjekkliste for riktige sosiale forhåndsvisninger.

Open Graph Meta Tags - What You Need to Know

Hva Open Graph gjør og hvorfor det betyr noe

Open Graph metatagger forteller sosiale plattformer hvilken tittel, beskrivelse og bilde som skal vises når noen deler en URL. Plassert i HTML-headen standardiserer disse taggene hvordan sider forhåndsvises på tjenester som støtter protokollen. Når du angir dem, kontrollerer du utdragene folk ser i feeds, private meldinger og chat-forhåndsvisninger i stedet for å la plattformens heuristikker velge.

Noen tekniske notater som påvirker implementering og feilsøking: Google bruker mobilversjonen av en side som hovedgrunnlag for crawling and indexing; since July 2024 Google crawls Search with Googlebot Smartphone by default. Facebook, Twitter/X og andre sosiale scrapers kan hente en side med forskjellige user-agents og cache forhåndsvisninger. Merk også at Google fjernet tradisjonelle cached pages tidlig i 2024, noe som ikke endrer hvordan Open Graph fungerer men påvirker hvordan search engines viser eldre sidesnapshots.

Viktige Open Graph-tags og eksempel på markup

De sentrale Open Graph-tagene du bør inkludere i head på hver delbar side er og:title, og:description, og:image, og:url og og:type. Legg dem til sammen med standard meta description og strukturert data; social crawlers leser kun head, så inkluder fullt renderede tagger der.

Eksempel på HTML (legg inn i <head>):

<meta property="og:title" content="Din sidetittel">
<meta property="og:description" content="Kort oppsummering som utfyller tittelen">
<meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png">
<meta property="og:url" content="https://yourdomain.com/your-page">
<meta property="og:type" content="article">

Hvis du publiserer innhold programmatisk (CMS-maler eller server-side rendering), sørg for at disse taggene genereres server-side slik at scrapers mottar dem uten å være avhengig av client-side JavaScript.

Plattformforskjeller og fallbacks

Open Graph er en bredt støttet protokoll, men hver plattform bruker sine egne regler og fallbacks.

Siden plattformer cacher forhåndsvisninger ulikt, test alltid siden din på de tjenestene du forventer at brukere deler på. Bruk plattformenes debuggere for å inspisere hva hver tjeneste henter ut og for å tømme cachede snapshots når du oppdaterer metadata.

Retningslinjer for bilder og tilgjengelighet

Visuelle elementer er det mest synlige i en sosial forhåndsvisning. Sikre at bilder er store nok til å vises skarpt på høy-DPI-enheter og er visuelt sentrert for vanlige beskjæringsforhold. En mye brukt tilnærming er å tilby et bilde i landskapsformat og inkludere eksplisitt width/height-metadata der det støttes (og:image:width og og:image:height) slik at scrapers vet dimensjonene uten å laste ned hele filen.

Sjekk også disse praktiske punktene:

Eksempel: sjekk bilde-headerne med en kommando som curl -I https://yourdomain.com/wp-content/uploads/your-image.png for å bekrefte 200-respons og Content-Type.

Hvordan teste og feilsøke Open Graph

Når en forhåndsvisning ser feil ut, følg en systematisk sjekkliste i stedet for å gjette. Start med rå HTML-head for å bekrefte at taggene finnes, sjekk hvordan scrapers henter siden og om proxyer eller cacher returnerer foreldet innhold.

For sider du eier er Google Search Console sin URL Inspection fortsatt nyttig for indekserings- og mobilrenderingssjekker, men det er ikke en erstatning for plattformenes egne debuggere når du diagnostiserer sosiale forhåndsvisningsproblemer.

Vanlige feil og en rask implementeringssjekkliste

Rask implementeringssjekkliste:

Hvis du ønsker en grundigere teknisk audit av hvordan sidene dine serveres og rendres, se Les Technical SEO Guide for layout, rendering og server-side hensyn.

FAQ: Hva hvis en plattform ignorerer min og:image?

Plattformer bruker sine egne heuristikker og caching. Bekreft at bilde-URLen returnerer 200-status og korrekt Content-Type, er stor nok og har egnet aspektforhold, og ikke er blokkert av robots.txt. Bruk plattformens debugger for å se nøyaktig hva scraperen hentet og for å tvinge en re-scrape.

FAQ: Kan jeg bruke forskjellig tekst for Twitter/X og Facebook?

Ja. Twitter/X støtter twitter:*-tagger for tittel, beskrivelse og bilde. Hvis du trenger en annen overskrift eller bilde på Twitter/X, inkluder både og:* og twitter:* tagger — plattformen vil foretrekke sine egne tagger når de er til stede.

FAQ: Bør Open Graph-tagger legges til på alle sider?

Prioriter delbare sider: blogginnlegg, landingssider og produktsider får vanligvis mest utbytte. For nettstedets fellesider (juridisk, admin) er fordelen mindre, men ufarlig. Hvis en side sannsynligvis ikke blir delt, gir taggene liten verdi men også liten kostnad.

FAQ: Påvirker Open Graph-tagger SEO-rangeringer?

Open Graph-tagger styrer sosiale forhåndsvisninger og endrer ikke direkte hvordan search engines rangerer sider. Men bedre forhåndsvisninger kan øke antall klikk fra sosiale kanaler, noe som indirekte kan påvirke brukerengasjementssignaler. Husk skillet mellom crawling, index og ranking: OG-tagger påvirker hva sosiale plattformer viser, ikke søkemotors indekseringsregler.

Related articles