# Open Graph-taggar: guide till delningsförhandsvisningar

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

Varje delad länk blir en liten affisch för din sida, byggd av några metataggar. Gör dem rätt så ser förhandsvisningen designad ut, missar du en gissar plattformarna. Här är hela uppsättningen, med kod att kopiera.

## The short version

- Open Graph-taggar är metataggar i en sidas head som talar om för sociala plattformar och meddelandeappar vilken titel, beskrivning och bild som ska visas när länken delas.
- Open Graph-protokollet behandlar og:title, og:type, og:image och og:url som de grundläggande obligatoriska taggarna, och og:description och og:site_name rekommenderas starkt.
- En og:image på 1200×630 pixlar, angiven med en absolut https-URL, fungerar bra på Facebook, LinkedIn, X, Slack, iMessage och de flesta andra appar.
- X läser twitter:card för att välja layout på förhandsvisningen och faller tillbaka på Open Graph-taggarna för titel, beskrivning och bild när de egna taggarna saknas.
- Plattformar cachar förhandsvisningar, så efter att du ändrat taggar måste du läsa om URL:en i ett felsökningsverktyg som Facebooks Sharing Debugger eller LinkedIns Post Inspector.

**Open Graph-taggar** är `<meta>`-taggar i `<head>` på en sida som avgör hur den ser ut när den delas: titeln, den korta beskrivningen, bilden och länken. Facebook skapade protokollet, och idag läser LinkedIn, X, Slack, Discord, WhatsApp, iMessage och de flesta andra appar det. Fyra taggar utgör kärnan, `og:title`, `og:type`, `og:image` och `og:url`, och med en beskrivning, en bildstorlek och en Twitter card-tagg täcker du nästan varje plattform.

## Open Graph-taggarna som varje sida behöver

Klistra in det här i en sidas head och byt ut värdena. Varje tagg använder `property`, inte `name`, och varje URL är absolut.

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

En komplett, fungerande uppsättning. X lånar titel, beskrivning och bild från Open Graph-taggarna ovan.

| Tagg | Vad den gör | Tips |
| --- | --- | --- |
| `og:title` | Förhandsvisningens fetstilta rubrik | Under ungefär 60 tecken, inget webbplatsnamn behövs |
| `og:description` | En eller två rader under titeln | Runt 110 till 160 tecken, vissa appar döljer den |
| `og:image` | Förhandsvisningens bild | Absolut https-URL, 1200×630 |
| `og:url` | Sidans kanoniska adress | Matcha din kanoniska länk, utan spårningsparametrar |
| `og:type` | Vad sidan är | `website` för de flesta sidor, `article` för inlägg |
| `og:site_name` | Ditt varumärke, visat litet | Håll den densamma på varje sida |
| `og:image:alt` | En beskrivning av bilden | Läses upp av skärmläsare på vissa plattformar |

De taggar som spelar roll i praktiken. Hela listan finns på protokollets egen webbplats, ogp.me.

## og:image: storlek och format

Bilden är det folk faktiskt lägger märke till. Använd **1200×630 pixlar**, ett förhållande på ungefär 1,91:1, som är den storlek plattformarna förväntar sig för stora förhandsvisningar och den som anges i [bildstorlek för Open Graph](https://gradiently.design/sv/guide/open-graph-image-size). Håll viktiga ord och logotypen borta från kanterna, eftersom vissa appar beskär till en kvadrat eller rundar hörnen.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-länkbild 1200×627: 1200 × 627
- Kvadratiskt utsnitt 1200×1200: 1200 × 1200

Den stora förhandsvisningsformen och kvadraten som vissa chattappar och X:s sammanfattningskort beskär till. Centrera budskapet så att det överlever båda.

Spara som PNG när den mest består av text och gradient, eller som en högkvalitativ JPEG för fotografier, och håll filen liten, helst några hundra kilobyte, eftersom plattformar har egna storleksgränser och stora filer laddas långsamt i flöden. [PNG mot JPG](https://gradiently.design/sv/guide/png-vs-jpeg) förklarar valet, och [optimera bilder för webben](https://gradiently.design/sv/guide/lighthouse-image-performance) tar upp komprimering.

En bred delningsbild i 1200 gånger 630 med ett restaurangnamn, en rubrik om en vårmeny och en bokningsrad över en mjuk gradient

En delningsbild byggd för förhandsvisningen: korta ord, centrerade, stora nog att läsa i den storlek ett flöde visar dem.

> **Bilden måste gå att nå** Plattformar hämtar `og:image` från sina egna servrar. En relativ sökväg, en sida bakom inloggning, en brandvägg som blockerar okända bottar eller en utgången signerad URL ger alla en tom förhandsvisning.

## Twitter card-taggar för X

X använder egna `twitter:`-taggar, skrivna med `name` i stället för `property`. Den som spelar roll är `twitter:card`. När `twitter:title`, `twitter:description` eller `twitter:image` saknas faller X tillbaka på motsvarande Open Graph-taggar, så du behöver sällan duplicera dem.

| Tagg | Värden | Anteckningar |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` eller `summary` | Stor bild, eller en liten kvadratisk miniatyr |
| `twitter:site` | `@dittvarumärke` | Kontot för webbplatsen |
| `twitter:creator` | `@författare` | Författaren till en artikel |
| `twitter:image:alt` | Text | Använd när bilden skiljer sig från og-versionen |

Lägg bara till de här och låt Open Graph stå för resten.

## Open Graph-taggar för artiklar

Blogginlägg och nyhetssidor kan säga mer om sig själva med `og:type` satt till `article` och några extra egenskaper. Vissa appar visar datum eller författare, och de hjälper plattformar att förstå sidan.

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

Datum använder ISO 8601. Håll modified_time ärlig, uppdatera den bara när innehållet ändras på riktigt.

## Ställa in Open Graph-taggar i ett ramverk

De flesta ramverk genererar de här taggarna från data. I Next.js exporterar du ett metadata-objekt från sidan eller layouten så skriver ramverket taggarna åt dig. Sätt en `metadataBase` en gång så att relativa bildsökvägar blir absoluta.

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

Kontrollera dokumentationen för ditt ramverks version, eftersom metadata-API:er ändras mellan utgåvor. För genererade bilder per sida, se [dynamiska OG-bilder](https://gradiently.design/sv/guide/dynamic-og-images).

## Testa och rätta delningsförhandsvisningar

1. **Visa källkoden** Öppna sidans källkod, inte inspektören, och bekräfta att taggarna finns i serverns HTML. Många sökrobotar kör inte JavaScript.
2. **Kontrollera bildens URL** Klistra in og:image-adressen i ett privat fönster. Den ska laddas utan inloggning.
3. **Läs om** Kör URL:en genom Facebooks Sharing Debugger och [LinkedIns Post Inspector](https://www.linkedin.com/post-inspector/) för att rensa deras cachar.
4. **Versionshantera bilden** Om en gammal bild sitter kvar, byt filnamn eller lägg till en frågesträng som `?v=2` och läs om.
5. **Dela den privat** Skicka länken till dig själv i Slack eller en meddelandeapp för att se en riktig förhandsvisning.

### Tom eller fel förhandsvisning

- Taggar som läggs in av JavaScript på klientsidan
- Relativ og:image-sökväg
- og:url pekar på en annan sida
- Liten eller konstigt formad bild
- Taggar ändrade, förhandsvisning oförändrad

### Lösning

- Rendera taggarna på servern
- Använd en fullständig https-URL
- Låt og:url matcha den kanoniska adressen
- Exportera i 1200×630
- Läs om, eller byt namn på bilden

Taggarna är den enkla delen, bilden är designarbetet, och den måste läsas i miniatyrstorlek. I Gradiently är länkförhandsvisningen en av de inbyggda storlekarna i 1200×630, Marken håller sin lugnaste yta bakom orden och Designer kan göra delningsbilden för en sida utifrån en mening, och sedan motsvarande inläggsstorlekar för [varje plattform](https://gradiently.design/sv/guide/social-media-image-sizes).

## FAQ

### Vad är Open Graph-taggar?

Metataggar i en sidas head, som og:title och og:image, som talar om för sociala plattformar och meddelandeappar vad som ska visas när länken delas.

### Vilka Open Graph-taggar är obligatoriska?

Protokollet listar og:title, og:type, og:image och og:url som grundtaggar. Lägg till og:description och og:site_name för en komplett förhandsvisning.

### Vilken storlek ska en og:image ha?

1200×630 pixlar fungerar på Facebook, LinkedIn, X och de flesta chattappar. Använd en absolut https-URL och håll det viktiga innehållet centrerat.

### Behöver jag Twitter card-taggar om jag har Open Graph-taggar?

Lägg till `twitter:card`, vanligen satt till `summary_large_image`. X faller tillbaka på Open Graph för titel, beskrivning och bild.

### Varför uppdateras inte min länkförhandsvisning?

Plattformar cachar förhandsvisningar. Läs om URL:en i Facebooks Sharing Debugger eller LinkedIns Post Inspector, eller byt namn på bildfilen.

### Ska jag använda property eller name för og-taggar?

Open Graph-taggar använder `property` och Twitter-taggar använder `name`. De flesta parsers godtar båda, men att följa konventionen undviker överraskningar.