# OG-bildstorlek: 1200×630 för länkförhandsvisningar överallt

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

Varje gång någon klistrar in din länk avgör en liten bild om någon klickar. Här är storleken, taggarna och layouten som får den bilden att fungera.

## The short version

- Open Graph-bildstorleken som fungerar på nästan alla plattformar är 1200×630 pixlar, ett förhållande på ungefär 1,91 till 1.
- Plattformar läser og:image-taggen i sidans HTML när en länk delas och cachar sedan bilden, så ändringar syns kanske inte förrän förhandsvisningen uppdaterats.
- og:image-adressen måste vara en fullständig https-URL som laddas utan inloggning, och taggarna måste ligga i den HTML som servern skickar, inte läggas till senare av JavaScript.
- Länkförhandsvisningar visas ofta små, så en OG-bild behöver en kort rubrik i stor text, centrerad, med generösa marginaler.
- Vissa meddelandeappar beskär förhandsvisningar till en kvadrat, så de viktigaste orden hör hemma mitt i bilden.

**OG-bildstorleken** som fungerar nästan överallt är **1200×630 pixlar**, ett liggande förhållande på ungefär 1,91 till 1. Facebook, LinkedIn, X, Slack, Discord och de flesta meddelandeappar bygger sina länkförhandsvisningar av just den här bilden, som anges i sidans `og:image`-tagg. LinkedIn anger sin länkbild som 1200×627, tillräckligt nära för att en enda fil på 1200×630 duger till båda.

- Open Graph 1200×630: 1200 × 630
- LinkedIns länkbild 1200×627: 1200 × 627
- Mittkvadrat 630×630: 630 × 630

Standardförhandsvisningen, LinkedIns nästan identiska länkbild och mittkvadraten som klarar sig när en app beskär förhandsvisningen.

## Vad en Open Graph-bild är och hur förhandsvisningar hämtas

Open Graph är en uppsättning `meta`-taggar i `head` på en webbsida. När någon klistrar in din länk i ett inlägg eller en chatt skickar plattformen en sökrobot till sidan, läser taggarna, laddar ned bilden och ritar förhandsvisningskortet. Det görs en gång och resultatet cachas sedan, ibland i flera dagar.

Tre detaljer fäller de flesta. Bildadressen måste vara en **fullständig URL** som börjar med `https://`, inte en relativ sökväg. Den måste laddas för vem som helst, utan inloggning eller cookiebanner i vägen. Och taggarna måste finnas i den HTML som din server skickar, eftersom de flesta sökrobotar inte kör JavaScript, så taggar som ett skript lägger till efter att sidan laddats syns aldrig.

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

Taggarna en länkförhandsvisning behöver. X läser Open Graph-taggarna när de egna saknas, men `twitter:card` satt till `summary_large_image` ber om den stora förhandsvisningen.

> **Bredd och höjd hjälper** Om du anger `og:image:width` och `og:image:height` kan vissa plattformar rita förhandsvisningen redan vid första delningen, i stället för att vänta tills de har laddat ned och mätt bilden.

## Så designar du en OG-bild som går att läsa som miniatyr

En bild på 1200×630 ses sällan i 1200 pixlar. I ett flöde på en mobil krymper den till en remsa lika bred som skärmen, och i en chatt kan den vara ännu mindre. Designa för den lilla versionen: en kort rubrik, stor text, stark kontrast och inget viktigt i hörnen.

- **Tre till sju ord.** Sidans titel förkortad till sin poäng, inte hela titeln.
- **Stor text.** På ytan 1200×630 förblir en rubrik på cirka 64 till 96 pixlars höjd läsbar när förhandsvisningen krymper.
- **Marginaler på cirka 60 pixlar** eller mer, så att inget rör en kant som en plattform kan runda av eller beskära.
- **En liten avsändarsignatur**, till exempel en logotyp eller ditt sidnamn, på samma plats i varje bild.
- **En enhetlig bakgrund** så att folk känner igen dina länkar innan de läser dem.

En länkförhandsvisning på 1200 gånger 630 med texten Så designar du ett lanseringsinlägg på en gradientbakgrund

En länkförhandsvisning byggd för den lilla versionen: en kort rad, stor och centrerad, med en liten signatur ovanför.

### Undvik

- Hela sidtiteln i liten text
- En skärmbild av själva sidan
- Ord i hörnen, där kvadratiska beskärningar klipper dem
- Text på ett rörigt foto utan lugn yta

### Gör

- En kortad rubrik som går att läsa med en blick
- Ett designat kort med en enda idé
- Nyckelorden i mittkvadraten
- En lugn bakgrund med hög kontrast bakom texten

Kontrast betyder mer vid små storlekar, inte mindre. Kontrollera att din rubrik klarar kraven i [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility), och om bakgrunden är en gradient, testa kontrasten där orden faktiskt sitter. [Text på gradient](https://gradiently.design/sv/guide/text-on-gradient) visar hur du hittar den lugna zonen.

## En OG-bild för hela sajten, eller en per sida

Varje sajt behöver en standardbild för sidor som inte har något bättre. Men en standardbild på varje sida gör att alla delade länkar ser likadana ut, och ingen kan se av förhandsvisningen vilken sida det gäller. De sidor som delas mest förtjänar en egen.

| Sidtyp | Vad bilden ska säga | Hur du gör den |
| --- | --- | --- |
| Startsida | Ditt namn och ett löfte på en rad | Designas en gång, för hand |
| Artikel eller guide | Artikelns korta rubrik | Genereras från titeln |
| Produktsida | Produktnamnet, med produkten synlig | Genereras, med produktbilden |
| Evenemangssida | Evenemangets namn och datum | Designas med evenemangets look |
| Allt annat | Ditt namn och din signaturbakgrund | Standardbilden för hela sajten |

Där en OG-bild per sida gör nytta och där standardbilden räcker.

Att göra en separat bild för varje artikel för hand skalar inte. De flesta moderna ramverk kan rendera en OG-bild från en mall när sidan byggs eller först efterfrågas; [dynamiska OG-bilder](https://gradiently.design/sv/guide/dynamic-og-images) går igenom tillvägagångssättet.

- Guider: djup violett: `linear-gradient(135deg, #140c2e 0%, #3b1f7a 55%, #7c4dff 100%)`
- Produkt: mörk petrol: `linear-gradient(135deg, #07201f 0%, #0e4d4a 55%, #2dd4bf 100%)`
- Evenemang: glöd: `linear-gradient(135deg, #2a0f0a 0%, #7a2a14 55%, #ff8a4c 100%)`

En familj, tre avdelningar: samma uppbyggnad från mörkt till ljust och samma vinkel, med en egen nyans per avdelning, så att förhandsvisningarna är enhetliga men ändå visar var en länk leder.

## Så testar du dina länkförhandsvisningar

1. **Kontrollera taggarna** Öppna sidan, visa dess källkod och sök efter `og:image`. Står den inte i källkoden ser sökrobotarna den inte.
2. **Öppna bildadressen** Klistra in `og:image`-URL:en i ett privat webbläsarfönster. Den ska laddas direkt, över https, utan inloggning.
3. **Använd plattformens inspektör** [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) visar hur LinkedIn ser en URL och uppdaterar sin cache. Facebook har en liknande Sharing Debugger.
4. **Skicka den till dig själv** Klistra in länken i en chattapp och i ett inläggsutkast. Titta på förhandsvisningen på en mobil, där den är minst.
5. **Tvinga fram en ny cache efter ändringar** Om en gammal bild fortsätter dyka upp, ge den nya bilden en ny adress, till exempel genom att lägga till `?v=2` i URL:en, och inspektera sedan igen.

## Filformat och storlek

Använd **PNG** för designade kort med text och plan färg, och **JPEG** för fotografiska bilder. Undvik SVG, som de flesta sökrobotar inte godtar för förhandsvisningar, och var försiktig med nyare format som vissa plattformar kanske inte läser. Håll filen liten så att sökroboten hämtar den snabbt; ett designat kort behöver sällan vara stort. Lite korn hindrar en gradient från att få band när en plattform komprimerar om den.

I Gradiently är **Länkförhandsvisning (Open Graph) 1200×630** en av de inbyggda storlekarna, så du kan lägga upp ett inlägg igen som en förhandsvisning med **Kopiera till storlekar** och behålla en enda look över inlägget och länken. Vid en lansering är OG-bilden bara en punkt på en längre lista; [grafik för lanseringsdagen](https://gradiently.design/sv/guide/launch-day-graphics) har hela checklistan.

## FAQ

### Vilken är den bästa OG-bildstorleken?

1200×630 pixlar, ett förhållande på ungefär 1,91 till 1. Den fungerar för Facebook, LinkedIn, X, Slack och de flesta meddelandeappar.

### Varför visar min länkförhandsvisning en gammal bild?

Plattformar cachar förhandsvisningar. Uppdatera sidan i plattformens inspektör, till exempel LinkedIn Post Inspector, eller ge den nya bilden en ny URL så att den hämtas på nytt.

### Varför visas min OG-bild inte alls?

Oftast är og:image-URL:en relativ, blockerad av en inloggning eller tillagd av JavaScript efter att sidan laddats. Använd en fullständig https-URL i den HTML som servern renderar.

### Använder X Open Graph-bilder?

Ja. X faller tillbaka på Open Graph-taggar när de egna saknas. Lägg till en twitter:card-tagg satt till summary_large_image för att få den stora förhandsvisningen.

### Ska varje sida ha en egen OG-bild?

Sidor som ofta delas, som artiklar, produkter och evenemang, tjänar på en egen bild. Allt annat kan använda en väldesignad standardbild för hela sajten.