Dynamiske OG-bilder: lag lenkeforhåndsvisninger automatisk

Dynamiske OG-bilder er lenkeforhåndsvisninger nettstedet genererer for hver side, i stedet for at noen designer dem for hånd. Når en side deles på LinkedIn, i Slack eller i en chatteapp, henter plattformen bildet angitt i sidens og:image-tagg. Bygges bildet fra sidens egen tittel og data, får hver artikkel, hvert produkt og hver profil en forhåndsvisning som sier nøyaktig hva det er.

Denne guiden dekker maldesign, de to måtene å generere bilder på, taggene som kobler dem til siden, mellomlagring og testing. For selve størrelsen og hvordan plattformer beskjærer, se guiden til Open Graph-bildestørrelse.

Hvorfor hver side bør ha sitt eget OG-bilde

Forhåndsvisningen er ofte det første noen ser av siden din, og i en travel feed er den det meste de ser. Ett generisk logokort for hele nettstedet gjør alle delte lenker like, slik at ingen forteller hva som ligger bak. Et eget bilde per side bærer sidens faktiske tittel i din visuelle identitet: gjenkjennelig ditt, og konkret nok til å fortjene klikket.

Design en mal for OG-bilder

Design malen slik du ville designet et miniatyrbilde, for det er slik den vanligvis blir sett. Forhåndsvisninger vises i en brøkdel av faktisk størrelse, og noen apper viser en mindre, beskåret versjon. Ordene som betyr noe, bør tåle begge deler.

1. 1

   Start med 1200 × 630

   Design i full størrelse, og sjekk deretter ved en firedel av den. Kan du ikke lese tittelen ved 300 pikslers bredde, er den for liten eller for lang.

2. 2

   Bruk tittelen, ikke hele siden

   Én linje med stor skrift, eller høyst to. Lange titler trenger en regel: forkort dem i dataene, eller reduser skriftstørrelsen når de passerer en fast lengde.

3. 3

   Hold margene brede

   Hold tittel og logo unna kantene, så en tettere beskjæring ikke kutter dem. Rundt 60 til 80 pikslers marg i denne størrelsen er et fornuftig utgangspunkt.

4. 4

   Legg til én opplysning for sammenheng

   En liten etikett med seksjon, forfatter eller dato hjelper folk å plassere lenken. Mer enn én ekstra linje gjør forhåndsvisningen til et dokument.

5. 5

   La bakgrunnen bære merkevaren

   En fast gradient eller et materiale gjør mer for gjenkjenning enn en stor logo. Hold den lyseste og mest urolige delen unna ordene; tekst på en gradient forklarer hvordan.

Generer OG-bilder ved bygging eller forespørsel

Bildet kan lages på to tidspunkter. Ved bygging gjengir nettstedet et bilde for hver side én gang og leverer det som en statisk fil: raskt, rimelig og ideelt for artikler og dokumentasjon. Ved forespørsel tegner en rute bildet første gang noen ber om det: riktig for sider med data som endres, som antall følgere på en profil eller prisen på et produkt. Bilder laget ved forespørsel må mellomlagres, ellers gjentas arbeidet ved hver deling og hvert besøk fra en søkerobot.

De fleste rammeverk kan tegne et bilde fra HTML-lignende markup. I Next.js genererer en opengraph-image.tsx-fil ved siden av en rute bildet med ImageResponse, og Next legger til metataggene for deg. Den samme ideen fungerer andre steder med en nettleser uten grafisk grensesnitt som tar et skjermbilde av en malside.

// 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-taggene som kobler til bildet

Plattformer finner bildet gjennom metatagger i sidens head. Bildeadressen må være absolutt, med https:// og domenet, fordi søkeroboten leser den utenfra. Å angi bredde og høyde hjelper noen plattformer med å sette opp forhåndsvisningen før bildet er lastet ned, og alt-teksten beskriver det for folk som bruker skjermlesere.

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

1200 × 627

X-innlegg 1600 × 900

1600 × 900

Mellomlagring og testing av OG-bilder

Plattformer mellomlagrer forhåndsvisninger, noen ganger lenge. Endrer du et bilde, men beholder adressen, kan folk fortsatt se det gamle. Legg til en versjon i adressen, som ?v=2, når designet endres, eller be plattformen hente siden på nytt. For bilder laget ved forespørsel sender du cache-headere, slik at serveren og eventuelle CDN-er beholder resultatet.

• Lim inn siden i LinkedIns Post Inspector for å se forhåndsvisningen og oppdatere mellomlageret.
• Bruk Metas Sharing Debugger for Facebook, som også kan hente en side på nytt.
• Lim inn lenken i et utkast til et innlegg på X eller i en privat chat i Slack eller WhatsApp for å se den virkelige forhåndsvisningen uten å sende noe.
• Åpne bildeadressen direkte i en nettleser for å bekrefte at den returnerer en PNG i riktig størrelse uten innlogging.

Ta med OG-bilder i hver lansering: de står på sjekklisten for lanseringsgrafikk, og hele formatoversikten finnes i bildestørrelser for sosiale medier. Designer du forhåndsvisningene i Gradiently, kan API-et gjengi et lagret design som en PNG på nøyaktig 1200 × 630, noe som passer automatiserte arbeidsflyter og KI-agenter som lager bilder for deg.