Open Graph-tags: den komplette guide til delingsforhåndsvisninger

Open Graph-tags er <meta>-tags i sidens <head>, som bestemmer, hvordan den ser ud, når den deles: titlen, den korte beskrivelse, billedet og linket. Facebook skabte protokollen, og i dag læser LinkedIn, X, Slack, Discord, WhatsApp, iMessage og de fleste andre apps den. Fire tags udgør kernen, og:title, og:type, og:image og og:url, og tilføjer du en beskrivelse, en billedstørrelse og et Twitter card-tag, dækker du næsten alle platforme.

De Open Graph-tags, hver side har brug for

Indsæt dette i sidens head, og udskift værdierne. Hvert tag bruger property, ikke name, og alle URL’er er absolutte.

<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@harbourkitchen" />
</head>

og:image: størrelse og format

Billedet er det, folk faktisk lægger mærke til. Brug 1200×630 pixels, et forhold på cirka 1,91:1, som er den størrelse, platformene forventer til store forhåndsvisninger, og den, der står i Open Graph-billedstørrelse. Hold de vigtige ord og logoet væk fra kanterne, for nogle apps beskærer til et kvadrat eller runder hjørnerne.

Gem det som PNG, når det mest er tekst og gradient, eller som JPEG i høj kvalitet til fotos, og hold filen lille, helst nogle hundrede kilobyte, da platformene har deres egne størrelsesgrænser, og store filer indlæses langsomt i feeds. PNG eller JPG forklarer valget, og optimering af billeder til nettet dækker komprimering.

Twitter card-tags til X

X bruger sine egne twitter:-tags, skrevet med name i stedet for property. Det, der betyder noget, er twitter:card. Når twitter:title, twitter:description eller twitter:image mangler, falder X tilbage på de tilsvarende Open Graph-tags, så du sjældent behøver at gentage dem.

Open Graph-tags til artikler

Blogindlæg og nyhedssider kan fortælle mere om sig selv med og:type sat til article og nogle få ekstra egenskaber. Nogle apps viser dato eller forfatter, og de hjælper platformene med at forstå siden.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />

Open Graph-tags i et framework

De fleste frameworks genererer disse tags ud fra data. I Next.js eksporterer du et metadata-objekt fra siden eller layoutet, og frameworket skriver tagsene for dig. Sæt metadataBase én gang, så relative billedstier bliver absolutte.

export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}

Test og ret forhåndsvisninger

1. 1

   Se kildekoden

   Åbn sidens kildekode, ikke inspektøren, og bekræft, at tagsene står i serverens HTML. Mange crawlere kører ikke JavaScript.

2. 2

   Tjek billedets URL

   Indsæt og:image-adressen i et privat vindue. Den skal kunne indlæses uden login.

3. 3

   Hent siden igen

   Kør URL’en gennem Facebooks Sharing Debugger og LinkedIns Post Inspector for at rydde deres cache.

4. 4

   Versionér billedet

   Hvis et gammelt billede bliver hængende, så skift filnavnet, eller tilføj en query string som ?v=2, og hent siden igen.

5. 5

   Del det privat

   Send linket til dig selv i Slack eller en beskedapp for at se en rigtig forhåndsvisning.

Tagsene er den lette del; billedet er designarbejdet, og det skal kunne læses i miniaturestørrelse. I Gradiently er linkforhåndsvisningen en af de indbyggede størrelser i 1200×630, Mark holder sit roligste område bag ordene, og Designer kan lave delingsbilledet til en side ud fra én sætning og derefter de matchende opslagsstørrelser til alle platforme.