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

[Canonical HTML page](https://gradiently.design/da/guide/open-graph-tags)

Hvert delt link bliver til en lille plakat for din side, bygget af nogle få metatags. Rammer du dem, ser forhåndsvisningen designet ud; mangler du et, gætter platformene. Her er hele sættet med markup, du kan kopiere.

## The short version

- Open Graph-tags er metatags i sidens head, som fortæller sociale platforme og beskedapps, hvilken titel, beskrivelse og hvilket billede de skal vise, når linket deles.
- Open Graph-protokollen regner og:title, og:type, og:image og og:url som de grundlæggende påkrævede tags, og og:description og og:site_name anbefales kraftigt.
- Et og:image på 1200×630 pixels med en absolut https-URL fungerer godt på Facebook, LinkedIn, X, Slack, iMessage og de fleste andre apps.
- X læser twitter:card for at vælge layoutet for forhåndsvisningen og bruger Open Graph-tags til titel, beskrivelse og billede, når dets egne tags mangler.
- Platforme gemmer forhåndsvisninger i cache, så når du har ændret tags, skal du hente URL’en igen i et fejlsøgningsværktøj som Facebooks Sharing Debugger eller LinkedIns Post Inspector.

**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.

```html
<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>
```

Et komplet sæt, der virker. X låner titel, beskrivelse og billede fra Open Graph-tagsene ovenfor.

| Tag | Hvad det gør | Tips |
| --- | --- | --- |
| `og:title` | Forhåndsvisningens fede overskrift | Under cirka 60 tegn; sitenavnet er ikke nødvendigt |
| `og:description` | En eller to linjer under titlen | Omkring 110 til 160 tegn; nogle apps skjuler den |
| `og:image` | Billedet i forhåndsvisningen | Absolut https-URL, 1200×630 |
| `og:url` | Sidens kanoniske adresse | Match dit kanoniske link, uden sporingsparametre |
| `og:type` | Hvad siden er | `website` til de fleste sider, `article` til indlæg |
| `og:site_name` | Dit brand, vist med små bogstaver | Hold det ens på alle sider |
| `og:image:alt` | En beskrivelse af billedet | Læses højt af skærmlæsere på nogle platforme |

De tags, der betyder noget i praksis. Den fulde liste findes på protokollens eget site, ogp.me.

## 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](https://gradiently.design/da/guide/open-graph-image-size). Hold de vigtige ord og logoet væk fra kanterne, for nogle apps beskærer til et kvadrat eller runder hjørnerne.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-linkbillede 1200×627: 1200 × 627
- Kvadratisk beskæring 1200×1200: 1200 × 1200

Den store forhåndsvisning og kvadratet, som nogle chatapps og X’ summary-kort beskærer til. Centrér budskabet, så det overlever begge.

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](https://gradiently.design/da/guide/png-vs-jpeg) forklarer valget, og [optimering af billeder til nettet](https://gradiently.design/da/guide/lighthouse-image-performance) dækker komprimering.

Et bredt delingsbillede på 1200 gange 630 med et restaurantnavn, en overskrift om en forårsmenu og en bookinglinje over en blød gradient

Et delingsbillede bygget til forhåndsvisningen: få ord, centreret og store nok til at kunne læses i den størrelse, et feed viser.

> **Billedet skal kunne nås** Platformene henter `og:image` fra deres egne servere. En relativ sti, en side bag et login, en firewall, der blokerer ukendte bots, eller en udløbet signeret URL giver alle en tom forhåndsvisning.

## 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.

| Tag | Værdier | Noter |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` eller `summary` | Stort billede eller et lille kvadratisk miniaturebillede |
| `twitter:site` | `@yourbrand` | Sitets konto |
| `twitter:creator` | `@author` | Forfatteren til en artikel |
| `twitter:image:alt` | Tekst | Brug den, når billedet afviger fra og-versionen |

Tilføj kun disse, og lad Open Graph levere resten.

## 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.

```html
<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" />
```

Datoer bruger ISO 8601. Hold modified_time ærlig; opdater den kun, når indholdet ændrer sig væsentligt.

## 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.

```ts
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' },
}
```

Tjek dokumentationen til din version af frameworket, for metadata-API’er ændrer sig mellem udgivelser. Til genererede billeder pr. side, se [dynamiske OG-billeder](https://gradiently.design/da/guide/dynamic-og-images).

## Test og ret forhåndsvisninger

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. **Tjek billedets URL** Indsæt og:image-adressen i et privat vindue. Den skal kunne indlæses uden login.
3. **Hent siden igen** Kør URL’en gennem Facebooks Sharing Debugger og [LinkedIns Post Inspector](https://www.linkedin.com/post-inspector/) for at rydde deres cache.
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. **Del det privat** Send linket til dig selv i Slack eller en beskedapp for at se en rigtig forhåndsvisning.

### Tom eller forkert forhåndsvisning

- Tags indsat med JavaScript i browseren
- Relativ og:image-sti
- og:url peger på en anden side
- Lille eller mærkeligt formet billede
- Tags ændret, forhåndsvisning uændret

### Løsning

- Render tags på serveren
- Brug en fuld https-URL
- Lad og:url matche den kanoniske adresse
- Eksportér i 1200×630
- Hent siden igen, eller omdøb billedet

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](https://gradiently.design/da/guide/social-media-image-sizes).

## FAQ

### Hvad er Open Graph-tags?

Metatags i sidens head, som og:title og og:image, der fortæller sociale platforme og beskedapps, hvad de skal vise, når linket deles.

### Hvilke Open Graph-tags er påkrævede?

Protokollen nævner og:title, og:type, og:image og og:url som de grundlæggende tags. Tilføj og:description og og:site_name for en komplet forhåndsvisning.

### Hvilken størrelse skal et og:image have?

1200×630 pixels fungerer på Facebook, LinkedIn, X og de fleste chatapps. Brug en absolut https-URL, og hold det vigtigste indhold centreret.

### Har jeg brug for Twitter card-tags, hvis jeg har Open Graph-tags?

Tilføj `twitter:card`, som regel sat til `summary_large_image`. X falder tilbage på Open Graph for titel, beskrivelse og billede.

### Hvorfor opdateres min linkforhåndsvisning ikke?

Platforme gemmer forhåndsvisninger i cache. Hent URL’en igen i Facebooks Sharing Debugger eller LinkedIns Post Inspector, eller omdøb billedfilen.

### Skal jeg bruge property eller name til og-tags?

Open Graph-tags bruger `property`, og Twitter-tags bruger `name`. De fleste parsere accepterer begge, men følger du konventionen, undgår du overraskelser.