Dynamiska OG-bilder: skapa länkförhandsvisningar automatiskt

En dynamisk OG-bild är en länkförhandsbild som din webbplats genererar för varje sida, i stället för att någon designar den för hand. När en sida delas på LinkedIn, i Slack eller i en chattapp hämtar plattformen bilden som anges i sidans og:image-tagg. Om bilden byggs av sidans egen titel och data får varje artikel, produkt och profil en förhandsvisning som säger exakt vad den är.

Den här guiden tar upp mallens design, de två sätten att generera bilder, taggarna som kopplar ihop dem, cachning och testning. För själva storleken och hur plattformar beskär, se vår guide om Open Graph-bildstorlek.

Därför ska varje sida ha en egen OG-bild

Förhandsbilden är ofta det första någon ser av din sida, och i ett fullt flöde är den det mesta de ser. Ett enda generiskt logotypkort för hela webbplatsen får varje delad länk att se likadan ut, så ingen av dem säger vad som finns bakom. En bild per sida bär sidans faktiska titel i din visuella identitet: igenkännbart din, och specifik nog att förtjäna klicket.

Utforma en OG-bildmall

Utforma mallen som du skulle utforma en miniatyr, för så ses den oftast. Förhandsbilder visas i en bråkdel av sin verkliga storlek, och vissa appar visar en mindre beskuren version. Orden som spelar roll ska klara båda.

1. 1

   Börja i 1200 × 630

   Designa i full storlek och kontrollera den sedan i en fjärdedel av den. Om du inte kan läsa titeln vid 300 pixlars bredd är den för liten eller för lång.

2. 2

   Använd titeln, inte hela sidan

   En rad stor text, eller två som mest. Långa titlar behöver en regel: korta dem i datan, eller minska teckenstorleken när de passerar en viss längd.

3. 3

   Behåll breda marginaler

   Håll titeln och logotypen borta från kanterna så att en tajtare beskärning inte klipper dem. Omkring 60 till 80 pixlars marginal i den här storleken är en rimlig start.

4. 4

   Lägg till en bit sammanhang

   En liten etikett för avsnittet, författaren eller datumet hjälper folk att placera länken. Mer än en extra rad gör en förhandsvisning till ett dokument.

5. 5

   Låt bakgrunden bära varumärket

   En enhetlig gradient eller ett enhetligt material gör mer för igenkänningen än en stor logotyp. Håll dess ljusaste, stökigaste del borta från orden. Text på gradient förklarar hur.

Generera OG-bilder vid bygget eller på begäran

Det finns två tillfällen att göra bilden. Vid bygget renderar din webbplats en bild för varje sida en gång och serverar den som en statisk fil: snabbt, billigt och idealiskt för artiklar och dokumentation. På begäran ritar en route bilden första gången den efterfrågas: rätt för sidor vars data ändras, som en profils antal följare eller en produkts pris. Bilder på begäran måste cachas, annars upprepar varje delning och varje crawlerbesök arbetet.

De flesta ramverk har ett sätt att rita en bild från HTML-liknande kod. I Next.js genererar en opengraph-image.tsx-fil bredvid en route den routens bild med ImageResponse, och Next lägger till metataggarna åt dig. Samma idé fungerar på andra håll med en huvudlös webbläsare som tar en skärmdump av en mallsida.

// app/guide/[slug]/opengraph-image.tsx
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'
import { ImageResponse } from 'next/og'
import { getArticle } from '@/lib/articles'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const article = await getArticle(slug)
  const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: 72,
          backgroundImage: 'linear-gradient(135deg, #120a2e 0%, #4c1d95 55%, #db2777 100%)',
          color: '#ffffff',
          fontFamily: 'Inter',
        }}
      >
        <div style={{ fontSize: 28, opacity: 0.8 }}>Field Guide</div>
        <div style={{ fontSize: article.title.length > 40 ? 60 : 76, lineHeight: 1.1 }}>
          {article.title}
        </div>
      </div>
    ),
    { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] },
  )
}

Open Graph-taggarna som kopplar ihop bilden

Plattformar hittar bilden genom metataggar i sidans head. Bildadressen måste vara absolut, med https:// och domänen, eftersom crawlern läser den utifrån. Att ange bredd och höjd hjälper vissa plattformar att lägga upp förhandsvisningen innan de har hämtat bilden, och alt-texten beskriver den för dem som använder skärmläsare.

<meta property="og:title" content="How to fix gradient banding" />
<meta property="og:description" content="Why gradients show stripes, and four fixes that work." />
<meta property="og:image" content="https://example.com/guide/gradient-banding/opengraph-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words How to fix gradient banding on a violet gradient" />
<meta name="twitter:card" content="summary_large_image" />

Open Graph 1200 × 630

1200 × 630

LinkedIn-länk 1200 × 627

1200 × 627

X-inlägg 1600 × 900

1600 × 900

Cachning och testning av OG-bilder

Plattformar cachar förhandsvisningar, ibland länge. Om du ändrar en bild men behåller adressen kan folk fortsätta se den gamla. Lägg till en version i adressen, som ?v=2, när designen ändras, eller be plattformen hämta sidan igen. För bilder på begäran skickar du cacheheaders så att din server och eventuellt CDN behåller resultatet.

• Klistra in sidan i LinkedIns Post Inspector för att se förhandsvisningen och uppdatera dess cache.
• Använd Metas Sharing Debugger för Facebook, som också kan hämta en sida på nytt.
• Klistra in länken i ett utkast till ett inlägg på X, eller i en privat chatt i Slack eller WhatsApp, för att se den riktiga förhandsvisningen utan att skicka något.
• Öppna bildadressen direkt i en webbläsare för att bekräfta att den returnerar en PNG, i rätt storlek, utan inloggning.

Se OG-bilder som en del av varje lansering: de finns på listan i vår checklista för grafik på lanseringsdagen, och alla format finns i bildstorlekar för sociala medier. Om du designar dina förhandsvisningar i Gradiently kan dess API rendera en sparad design som en exakt PNG på 1200 × 630, vilket passar flöden och AI-agenter som gör bilder åt dig.