# Størrelse på OG-bilde: 1200×630 som fungerer overalt

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

Hver gang noen limer inn lenken din, avgjør et lite bilde om noen klikker på den. Her er størrelsen, taggene og oppsettet som får det bildet til å fungere.

## The short version

- Størrelsen på Open Graph-bildet som fungerer på nesten alle plattformer, er 1200×630 piksler, et sideforhold på omtrent 1.91 til 1.
- Plattformene leser og:image-taggen fra HTML-en på siden din når en lenke deles, og mellomlagrer så bildet, så endringer vises kanskje ikke før forhåndsvisningen oppdateres.
- Adressen i og:image må være en fullstendig https-URL som lastes uten innlogging, og taggene må ligge i HTML-en serveren sender, ikke legges til senere med JavaScript.
- Lenkeforhåndsvisninger vises ofte i liten størrelse, så et OG-bilde trenger en kort overskrift i stor skrift, sentrert, med romslige marger.
- Noen meldingsapper beskjærer forhåndsvisninger til et kvadrat, så de viktigste ordene hører hjemme midt i bildet.

Riktig **størrelse på OG-bilde** som fungerer nesten overalt, er **1200×630 piksler**, et liggende sideforhold på omtrent 1.91 til 1. Facebook, LinkedIn, X, Slack, Discord og de fleste meldingsapper bygger lenkeforhåndsvisningene sine fra dette ene bildet, angitt i `og:image`-taggen på siden din. LinkedIn oppgir lenkebildet sitt som 1200×627, nært nok til at én fil på 1200×630 dekker begge.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-lenkebilde 1200×627: 1200 × 627
- Midtkvadrat 630×630: 630 × 630

Standard lenkeforhåndsvisning, LinkedIns nesten identiske lenkebilde og midtkvadratet som overlever når en app beskjærer forhåndsvisningen.

## Hva et Open Graph-bilde er, og hvordan forhåndsvisninger hentes

Open Graph er et sett med `meta`-tagger i `head` på en nettside. Når noen limer inn lenken din i et innlegg eller en chat, sender plattformen en robot til siden, leser taggene, laster ned bildet og tegner forhåndsvisningskortet. Den gjør dette én gang og mellomlagrer så resultatet, noen ganger i flere dager.

Tre detaljer lurer de fleste. Bildeadressen må være en **fullstendig URL** som starter med `https://`, ikke en relativ sti. Den må lastes for hvem som helst, uten en innlogging eller et informasjonskapselbanner i veien. Og taggene må ligge i HTML-en serveren din sender, fordi de fleste roboter ikke kjører JavaScript, så tagger som legges til av et skript etter at siden er lastet, blir aldri sett.

```html
<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />
```

Taggene en lenkeforhåndsvisning trenger. X leser Open Graph-taggene når dens egne mangler, men `twitter:card` satt til `summary_large_image` ber om den store forhåndsvisningen.

> **Bredde og høyde hjelper** Når du angir `og:image:width` og `og:image:height`, kan noen plattformer tegne forhåndsvisningen ved første deling, i stedet for å vente til de har lastet ned og målt bildet.

## Design et OG-bilde som leses i miniatyrstørrelse

Et bilde på 1200×630 sees sjelden i 1200 piksler. I en feed på en telefon krymper det til en stripe i skjermens bredde, og i en chat kan det bli enda mindre. Design for den lille versjonen: en kort overskrift, stor skrift, sterk kontrast og ingenting viktig i hjørnene.

- **Tre til sju ord.** Sidetittelen kortet ned til poenget, ikke hele tittelen.
- **Stor skrift.** På lerretet på 1200×630 holder en overskrift på rundt 64 til 96 piksler i høyden seg lesbar når forhåndsvisningen krymper.
- **Marger på omtrent 60 piksler** eller mer, så ingenting berører en kant som en plattform kan avrunde eller beskjære.
- **Én liten merkevaresignatur**, som et ordmerke eller navnet på nettstedet ditt, på samme sted i hvert bilde.
- **En fast bakgrunn**, så folk kjenner igjen lenkene dine før de leser dem.

En lenkeforhåndsvisning på 1200 ganger 630 med teksten Slik designer du et lanseringsinnlegg på en gradientbakgrunn

En lenkeforhåndsvisning bygget for den lille versjonen: én kort linje, stor og sentrert, med en liten signatur over.

### Unngå

- Hele sidetittelen i liten skrift
- Et skjermbilde av selve siden
- Ord i hjørnene, der kvadratiske utsnitt kutter dem
- Tekst på et urolig foto uten et rolig område

### Gjør dette

- En kortet overskrift folk leser med ett blikk
- Et designet kort med én idé
- De viktigste ordene i midtkvadratet
- En rolig bakgrunn med høy kontrast bak skriften

Kontrast betyr mer i små størrelser, ikke mindre. Sjekk at overskriften oppfyller forholdstallene i [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility), og er bakgrunnen en gradient, tester du kontrasten der ordene faktisk står. [Tekst på gradient](https://gradiently.design/nb/guide/text-on-gradient) viser hvordan du finner den rolige sonen.

## Ett OG-bilde for hele nettstedet, eller ett per side

Alle nettsteder trenger et standardbilde til sider som ikke har noe bedre. Men et standardbilde på hver side gjør at hver delte lenke ser lik ut, og ingen kan se av forhåndsvisningen hvilken side det er. Sidene folk deler mest, fortjener sitt eget.

| Sidetype | Hva bildet bør si | Hvordan du lager det |
| --- | --- | --- |
| Forside | Navnet ditt og et løfte på én linje | Designet én gang, for hånd |
| Artikkel eller guide | Artikkelens korte overskrift | Generert fra tittelen |
| Produktside | Produktnavnet, med produktet vist | Generert, med produktbildet |
| Arrangementsside | Arrangementets navn og dato | Designet i arrangementets uttrykk |
| Alt annet | Navnet ditt og signaturbakgrunnen | Standardbildet for hele nettstedet |

Hvor et eget OG-bilde per side gjør nytte for seg, og hvor standardbildet er nok.

Å lage et eget bilde for hver artikkel for hånd skalerer ikke. De fleste moderne rammeverk kan gjengi et OG-bilde fra en mal når siden bygges eller først blir etterspurt. [Dynamiske OG-bilder](https://gradiently.design/nb/guide/dynamic-og-images) går gjennom fremgangsmåten.

- Guider: dyp fiolett: `linear-gradient(135deg, #140c2e 0%, #3b1f7a 55%, #7c4dff 100%)`
- Produkt: mørk blågrønn: `linear-gradient(135deg, #07201f 0%, #0e4d4a 55%, #2dd4bf 100%)`
- Arrangementer: glør: `linear-gradient(135deg, #2a0f0a 0%, #7a2a14 55%, #ff8a4c 100%)`

Én familie, tre seksjoner: samme struktur fra mørkt til lyst og samme vinkel, med en egen fargetone per seksjon, så forhåndsvisningene er konsekvente, men likevel forteller folk hvor en lenke fører.

## Slik tester du lenkeforhåndsvisningene dine

1. **Sjekk taggene** Åpne siden, vis kildekoden og søk etter `og:image`. Står den ikke i kildekoden, ser ikke robotene den.
2. **Åpne bildeadressen** Lim inn URL-en fra `og:image` i et privat nettleservindu. Den skal lastes direkte, over https, uten innlogging.
3. **Bruk plattformens inspeksjonsverktøy** [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) viser hvordan LinkedIn ser en URL, og oppdaterer mellomlageret. Facebook har et lignende verktøy, Sharing Debugger.
4. **Send den til deg selv** Lim inn lenken i en chatapp og i et utkast til et innlegg. Se på forhåndsvisningen på en telefon, der den er minst.
5. **Tøm mellomlageret etter endringer** Dukker et gammelt bilde stadig opp, gir du det nye bildet en ny adresse, for eksempel ved å legge til `?v=2` i URL-en, og inspiserer på nytt.

## Filformat og filstørrelse

Bruk **PNG** til designede kort med skrift og flate farger, og **JPEG** til fotografiske bilder. Unngå SVG, som de fleste roboter ikke godtar til forhåndsvisninger, og vær forsiktig med nyere formater som noen plattformer kanskje ikke leser. Hold filen lett, så roboten henter den raskt. Et designet kort trenger sjelden å være stort. Litt korn hindrer at en gradient får fargebånd når en plattform komprimerer den på nytt.

I Gradiently er **Lenkeforhåndsvisning (Open Graph) 1200×630** en av de innebygde størrelsene, så du kan sette et innlegg opp på nytt som en forhåndsvisning med **kopier til størrelser** og beholde ett uttrykk på tvers av innlegget og lenken. Ved en lansering er OG-bildet ett punkt på en lengre liste. [Grafikk til lanseringsdagen](https://gradiently.design/nb/guide/launch-day-graphics) har hele sjekklisten.

## FAQ

### Hva er den beste størrelsen på et OG-bilde?

1200×630 piksler, et sideforhold på omtrent 1.91 til 1. Det fungerer på Facebook, LinkedIn, X, Slack og de fleste meldingsapper.

### Hvorfor viser lenkeforhåndsvisningen min et gammelt bilde?

Plattformene mellomlagrer forhåndsvisninger. Oppdater siden i plattformens inspeksjonsverktøy, som LinkedIn Post Inspector, eller gi det nye bildet en ny URL så det hentes på nytt.

### Hvorfor vises ikke OG-bildet mitt i det hele tatt?

Vanligvis er URL-en i og:image relativ, sperret bak en innlogging eller lagt til med JavaScript etter at siden er lastet. Bruk en fullstendig https-URL i HTML-en som serveren gjengir.

### Bruker X Open Graph-bilder?

Ja. X faller tilbake på Open Graph-taggene når dens egne mangler. Legg til en twitter:card-tagg satt til summary_large_image for å få den store forhåndsvisningen.

### Bør hver side ha sitt eget OG-bilde?

Sider folk ofte deler, som artikler, produkter og arrangementer, har nytte av et eget bilde. Alt annet kan bruke et godt designet standardbilde for hele nettstedet.