Dynamiske OG-billeder: generér linkvisninger automatisk

Dynamiske OG-billeder er billeder til linkvisninger, som dit site genererer til hver side, frem for at nogen designer dem manuelt. Når en side deles på LinkedIn, i Slack eller i en chatapp, henter platformen det billede, der er angivet i sidens og:image-tag. Bygges billedet ud fra sidens egen titel og data, får hver artikel, hvert produkt og hver profil en forhåndsvisning, der fortæller præcis, hvad det er.

Denne guide gennemgår skabelonens design, de to måder at generere billeder på, de tags, der forbinder dem, samt caching og test. Se vores guide til Open Graph-billedstørrelse for selve størrelsen og platformenes beskæringer.

Derfor bør hver side have sit eget OG-billede

Linkvisningen er ofte det første, nogen ser af din side, og i et travlt feed er den det meste, de ser. Et generisk logokort til hele sitet får alle delte links til at se ens ud, så ingen af dem fortæller, hvad der gemmer sig bag. Et billede til den enkelte side viser dens rigtige titel i din visuelle identitet: genkendeligt dit og konkret nok til at fortjene klikket.

Design en skabelon til OG-billeder

Design skabelonen, som du ville designe en miniature, for sådan bliver den normalt set. Linkvisninger vises i en brøkdel af deres faktiske størrelse, og nogle apps viser en mindre, beskåret version. De vigtige ord skal klare begge dele.

1. 1

   Start ved 1200 × 630

   Design i fuld størrelse, og tjek derefter ved en fjerdedel. Kan du ikke læse titlen ved 300 pixels bredde, er den for lille eller for lang.

2. 2

   Brug titlen, ikke hele siden

   Én linje stor skrift, højst to. Lange titler kræver en regel: forkort dem i data, eller sænk skriftstørrelsen, når de overstiger en bestemt længde.

3. 3

   Hold margenerne brede

   Hold titel og logo væk fra kanterne, så en tættere beskæring ikke skærer dem af. Omkring 60 til 80 pixels margen er et fornuftigt udgangspunkt i denne størrelse.

4. 4

   Tilføj én oplysning som kontekst

   En lille etiket med sektion, forfatter eller dato hjælper folk med at placere linket. Mere end én ekstra linje gør en linkvisning til et dokument.

5. 5

   Lad baggrunden bære brandet

   En ensartet gradient eller et materiale gør mere for genkendeligheden end et stort logo. Hold dens lyseste og mest urolige område væk fra ordene. Tekst på en gradient forklarer hvordan.

Generér OG-billeder ved build eller ved en anmodning

Der er to tidspunkter at lave billedet på. Ved build renderer dit site et billede til hver side én gang og leverer det som en statisk fil: hurtigt, billigt og ideelt til artikler og dokumentation. Ved en anmodning tegner en rute billedet, første gang nogen beder om det: godt til sider, hvor data ændres, som en profils følgerantal eller et produkts pris. Billeder genereret ved anmodning skal caches, ellers gentager hver deling og hvert crawlerbesøg arbejdet.

De fleste frameworks kan tegne et billede ud fra HTML-lignende markup. I Next.js genererer en opengraph-image.tsx-fil ved siden af en rute rutens billede med ImageResponse, og Next tilføjer metatags for dig. Samme idé virker andre steder med en browser uden brugerflade, som tager et skærmbillede af en skabelonside.

// 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-tags, der forbinder billedet

Platforme finder billedet gennem metatags i sidens head. Billedadressen skal være absolut med både https:// og domæne, fordi crawleren læser den udefra. En angivet bredde og højde hjælper nogle platforme med at sætte linkvisningen op, før billedet er hentet, og alt-teksten beskriver det for folk med skærmlæser.

<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-link 1200 × 627

1200 × 627

X-opslag 1600 × 900

1600 × 900

Caching og test af OG-billeder

Platforme cacher linkvisninger, nogle gange i lang tid. Ændrer du et billede, men beholder adressen, kan folk stadig se det gamle. Tilføj en version til adressen, som ?v=2, når designet ændres, eller bed platformen hente siden igen. Ved billeder genereret på anmodning skal du sende cache-headere, så din server og et eventuelt CDN gemmer resultatet.

• Indsæt siden i LinkedIns Post Inspector for at se linkvisningen og opdatere dens cache.
• Brug Metas Sharing Debugger til Facebook, som også kan hente en side igen.
• Indsæt linket i en kladde til et X-opslag eller i en privat chat i Slack eller WhatsApp for at se den rigtige linkvisning uden at sende noget.
• Åbn billedadressen direkte i en browser for at bekræfte, at den returnerer en PNG i den rigtige størrelse uden login.

Gør OG-billeder til en del af enhver lancering: de står på vores tjekliste over grafik til lanceringsdagen, og alle formater findes i billedstørrelser til sociale medier. Designer du linkvisninger i Gradiently, kan API’et rendere et gemt design som en PNG på præcis 1200 × 630, hvilket passer til automatiserede arbejdsgange og AI-agenter, der laver billeder for dig.