# Open Graph-tagger: komplett guide til lenkeforhåndsvisninger

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

Hver delt lenke blir en liten plakat for siden din, bygget fra noen få metatagger. Med riktige tagger virker forhåndsvisningen designet; mangler én, gjetter plattformene. Her er hele settet, med kode du kan kopiere.

## The short version

- Open Graph-tagger er metatagger i sidens head som forteller sosiale plattformer og meldingsapper hvilken tittel, beskrivelse og hvilket bilde de skal vise når lenken deles.
- Open Graph-protokollen angir og:title, og:type, og:image og og:url som nødvendige grunntagger, og anbefaler sterkt og:description og og:site_name.
- Et og:image på 1200×630 piksler med en absolutt https-adresse fungerer godt på Facebook, LinkedIn, X, Slack, iMessage og de fleste andre apper.
- X leser twitter:card for å velge oppsett og bruker Open Graph-tagger til tittel, beskrivelse og bilde når egne tagger mangler.
- Plattformer mellomlagrer forhåndsvisninger. Når du endrer tagger, må du derfor hente nettadressen på nytt i et feilsøkingsverktøy som Facebook Sharing Debugger eller LinkedIn Post Inspector.

**Open Graph-tagger** er `<meta>`-tagger i sidens `<head>` som bestemmer hvordan den ser ut ved deling: tittel, kort beskrivelse, bilde og lenke. Facebook laget protokollen, og i dag leser LinkedIn, X, Slack, Discord, WhatsApp, iMessage og de fleste andre apper den. Fire tagger utgjør kjernen, `og:title`, `og:type`, `og:image` og `og:url`. Med beskrivelse, bildestørrelse og en Twitter-korttagg dekker du nesten alle plattformer.

## Open Graph-taggene alle sider trenger

Lim dette inn i sidens head og bytt verdiene. Hver tagg bruker `property`, ikke `name`, og alle nettadresser 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 komplett, fungerende sett. X låner tittel, beskrivelse og bilde fra Open Graph-taggene over.

| Tagg | Hva den gjør | Tips |
| --- | --- | --- |
| `og:title` | Den fete overskriften i forhåndsvisningen | Under omtrent 60 tegn; nettstedsnavn er unødvendig |
| `og:description` | Én eller to linjer under tittelen | Omtrent 110 til 160 tegn; noen apper skjuler den |
| `og:image` | Forhåndsvisningsbildet | Absolutt https-adresse, 1200×630 |
| `og:url` | Sidens kanoniske adresse | Samme som canonical-lenken, uten sporingsparametere |
| `og:type` | Hva slags side det er | `website` for de fleste sider, `article` for innlegg |
| `og:site_name` | Merkevaren din, vist i liten skrift | Hold den lik på alle sider |
| `og:image:alt` | En beskrivelse av bildet | Leses høyt av skjermlesere på noen plattformer |

Taggene som betyr noe i praksis. Hele listen finnes på protokollens eget nettsted, ogp.me.

## og:image: størrelse og format

Bildet er det folk faktisk legger merke til. Bruk **1200×630 piksler**, et forhold på omtrent 1,91:1, som er størrelsen plattformene forventer til store forhåndsvisninger, og den som står i [Open Graph-bildestørrelse](https://gradiently.design/nb/guide/open-graph-image-size). Hold viktige ord og logo unna kantene, siden noen apper beskjærer til kvadrat eller runder hjørnene.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-lenkebilde 1200×627: 1200 × 627
- Kvadratisk beskjæring 1200×1200: 1200 × 1200

Formen til stor forhåndsvisning og kvadratet enkelte chatteapper og Xs sammendragskort beskjærer til. Sentrer budskapet, så det fungerer i begge.

Lagre som PNG når bildet hovedsakelig er tekst og gradient, eller JPEG med høy kvalitet til fotografier. Hold filen liten, helst noen hundre kilobyte, siden plattformene setter egne grenser og store filer laster sakte i feeder. [PNG eller JPG](https://gradiently.design/nb/guide/png-vs-jpeg) forklarer valget, og [optimalisere bilder for nettet](https://gradiently.design/nb/guide/lighthouse-image-performance) dekker komprimering.

Et bredt delingsbilde på 1200 ganger 630 med restaurantnavn, en overskrift om vårmeny og en bestillingslinje over en myk gradient

Et delingsbilde laget for forhåndsvisningen: korte ord, sentrert og stort nok til å leses i størrelsen feeden viser.

> **Bildet må være tilgjengelig** Plattformene henter `og:image` fra egne servere. En relativ sti, en side bak innlogging, en brannmur som blokkerer ukjente roboter eller en utløpt signert adresse gir alle en tom forhåndsvisning.

## Twitter-korttagger til X

X bruker egne `twitter:`-tagger, skrevet med `name` fremfor `property`. Den viktige er `twitter:card`. Når `twitter:title`, `twitter:description` eller `twitter:image` mangler, bruker X tilsvarende Open Graph-tagger, så du trenger sjelden å duplisere dem.

| Tagg | Verdier | Merknader |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` eller `summary` | Stort bilde eller et lite kvadratisk miniatyrbilde |
| `twitter:site` | `@yourbrand` | Kontoen til nettstedet |
| `twitter:creator` | `@author` | Artikkelens forfatter |
| `twitter:image:alt` | Tekst | Bruk når bildet er ulikt OG-versjonen |

Legg bare til disse, og la Open Graph levere resten.

## Open Graph-tagger til artikler

Blogginnlegg og nyhetssider kan fortelle mer om seg selv med `og:type` satt til `article` og noen ekstra egenskaper. Noen apper viser dato eller forfatter, og taggene hjelper plattformene å 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 bruker ISO 8601. Hold modified_time sannferdig; oppdater bare når innholdet endres vesentlig.

## Angi Open Graph-tagger i et rammeverk

De fleste rammeverk lager disse taggene fra data. I Next.js eksporterer du et metadataobjekt fra siden eller layouten, og rammeverket skriver taggene. Angi `metadataBase` én gang, slik at relative bildestier blir 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' },
}
```

Sjekk dokumentasjonen for rammeverksversjonen din, siden metadata-API-er endres mellom versjoner. Se [dynamiske OG-bilder](https://gradiently.design/nb/guide/dynamic-og-images) for genererte bilder per side.

## Teste og rette lenkeforhåndsvisninger

1. **Se kildekoden** Åpne sidens kildekode fremfor inspeksjonsverktøyet, og bekreft at taggene finnes i serverens HTML. Mange roboter kjører ikke JavaScript.
2. **Sjekk bildeadressen** Lim og:image-adressen inn i et privat vindu. Den skal laste uten innlogging.
3. **Hent på nytt** Kjør nettadressen gjennom Facebook Sharing Debugger og [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) for å tømme mellomlagrene deres.
4. **Gi bildet en ny versjon** Henger et gammelt bilde igjen, endre filnavnet eller legg til en spørringsstreng som `?v=2`, og hent på nytt.
5. **Del privat** Send lenken til deg selv i Slack eller en meldingsapp for å se en faktisk forhåndsvisning.

### Tom eller feil forhåndsvisning

- Tagger lagt inn av JavaScript på klientsiden
- Relativ og:image-sti
- og:url peker på en annen side
- Lite bilde eller uvanlig form
- Taggene er endret, forhåndsvisningen er lik

### Løsning

- Rendre taggene på serveren
- Bruk en full https-adresse
- La og:url samsvare med den kanoniske adressen
- Eksporter i 1200×630
- Hent på nytt, eller gi bildet nytt navn

Taggene er den enkle delen; bildet er designjobben og må være leselig som miniatyrbilde. I Gradiently er lenkeforhåndsvisning en innebygd størrelse på 1200×630. Marken holder sitt roligste område bak ordene, og Designer kan lage delingsbildet til en side fra én setning, og deretter matchende innlegg til [hver plattform](https://gradiently.design/nb/guide/social-media-image-sizes).

## FAQ

### Hva er Open Graph-tagger?

Metatagger i sidens head, som og:title og og:image, som forteller sosiale plattformer og meldingsapper hva de skal vise når lenken deles.

### Hvilke Open Graph-tagger er nødvendige?

Protokollen lister og:title, og:type, og:image og og:url som grunntagger. Legg til og:description og og:site_name for en komplett forhåndsvisning.

### Hvilken størrelse bør og:image ha?

1200×630 piksler fungerer på Facebook, LinkedIn, X og de fleste chatteapper. Bruk en absolutt https-adresse og hold viktig innhold sentrert.

### Trenger jeg Twitter-korttagger hvis jeg har Open Graph?

Legg til `twitter:card`, vanligvis satt til `summary_large_image`. X bruker Open Graph til tittel, beskrivelse og bilde.

### Hvorfor oppdateres ikke lenkeforhåndsvisningen?

Plattformene mellomlagrer forhåndsvisninger. Hent nettadressen på nytt i Facebook Sharing Debugger eller LinkedIn Post Inspector, eller gi bildefilen et nytt navn.

### Bør jeg bruke property eller name til OG-tagger?

Open Graph-tagger bruker `property`, og Twitter-tagger bruker `name`. De fleste parsere godtar begge, men å følge konvensjonen hindrer overraskelser.