Open Graph-taggar: guide till delningsförhandsvisningar

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.

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

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. Håll viktiga ord och logotypen borta från kanterna, eftersom vissa appar beskär till en kvadrat eller rundar hörnen.

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 förklarar valet, och optimera bilder för webben tar upp komprimering.

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.

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.

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

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.

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

Testa och rätta delningsförhandsvisningar

1. 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. 2

   Kontrollera bildens URL

   Klistra in og:image-adressen i ett privat fönster. Den ska laddas utan inloggning.

3. 3

   Läs om

   Kör URL:en genom Facebooks Sharing Debugger och LinkedIns Post Inspector för att rensa deras cachar.

4. 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. 5

   Dela den privat

   Skicka länken till dig själv i Slack eller en meddelandeapp för att se en riktig förhandsvisning.

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.