# Dynamiske OG-bilder: lag lenkeforhåndsvisninger automatisk [Canonical HTML page](https://gradiently.design/nb/guide/dynamic-og-images) Å lage et forhåndsvisningsbilde for hver side for hånd skalerer dårlig, og ett generisk bilde for hele nettstedet sløser bort det mest viste bildet du har. Generer dem i stedet. ## The short version - Et dynamisk OG-bilde er et Open Graph-forhåndsvisningsbilde som genereres automatisk for hver side, vanligvis fra tittel, kategori og en fast merkevarebakgrunn. - Standardstørrelsen er 1200 × 630 piksler, og siden må peke til bildet med en absolutt URL i og:image-taggen. - Du kan generere OG-bilder én gang ved bygging, som er rimeligst, eller ved forespørsel, som passer sider med data som endres, så lenge resultatet mellomlagres. - Plattformer mellomlagrer forhåndsvisningsbilder per URL, så å endre et bilde betyr vanligvis å endre adressen eller be plattformen hente siden på nytt. - Design malen som et miniatyrbilde: en kort tittel i stor skrift, romslige marger og en bakgrunn som forblir gjenkjennelig i liten størrelse. **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](https://gradiently.design/nb/guide/open-graph-image-size). ## 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. Et lenkeforhåndsvisningsbilde med teksten Slik fikser du fargebånd på en gradientbakgrunn Én mal, fylt med tittelen til én artikkel… Samme mal for lenkeforhåndsvisning med teksten Velg merkevarefarger …og til en annen. Helhetlig nok til å gjenkjennes, konkret nok til å klikkes på. ## 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. **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. **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. **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. **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. **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](https://gradiently.design/nb/guide/text-on-gradient) forklarer hvordan. ### Svak forhåndsvisning - Det samme logokortet på hver side - Hele tittelen og beskrivelsen presset inn med liten skrift - Tekst helt inntil kantene - Et urolig foto bak hvite ord ### Sterk forhåndsvisning - Sidens egen tittel, stor - Én kort etikett som gir sammenheng - Brede marger som tåler beskjæring - En rolig merkevarebakgrunn med tydelig kontrast ## 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. | Tilnærming | Best for | Vær oppmerksom på | | --- | --- | --- | | Ved bygging | Artikler, dokumentasjon, landingssider | Byggetiden øker med antall sider | | Ved forespørsel, mellomlagret | Profiler, produkter, brukerinnhold | Sett cache-headere; første gjengivelse er tregere | | Laget for hånd | En håndfull viktige sider | Skalerer ikke og blir gradvis utdatert | 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. ```ts // 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( (
Field Guide
40 ? 60 : 76, lineHeight: 1.1 }}> {article.title}
), { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] }, ) } ``` Et OG-bilde per artikkel i Next.js. Tittelen får mindre skrift når den er lang, og skriften lastes som en TTF-fil. > **Bildegeneratorer støtter bare noe CSS** Biblioteker som gjør markup til bilder, som det bak `ImageResponse`, støtter flexbox og et utvalg CSS. Grid-oppsett virker ikke, og skrifter må være TTF, OTF eller WOFF, ikke WOFF2. Sjekk rammeverkets oversikt før du designer noe det ikke kan tegne. ## 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. ```html ``` Taggene en side trenger for en stor forhåndsvisning. `twitter:card` ber X om oppsettet med stort bilde. - Open Graph 1200 × 630: 1200 × 630 - LinkedIn-lenke 1200 × 627: 1200 × 627 - X-innlegg 1600 × 900: 1600 × 900 Lenkeforhåndsvisninger ligger nær 1.91:1. Ett bilde på 1200 × 630 dekker de vanlige tilfellene; et eget bilde vedlagt et innlegg er en annen oppgave. ## 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](https://www.linkedin.com/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](https://gradiently.design/nb/guide/launch-day-graphics), og hele formatoversikten finnes i [bildestørrelser for sosiale medier](https://gradiently.design/nb/guide/social-media-image-sizes). 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. ## FAQ ### Hva er et dynamisk OG-bilde? Det er et Open Graph-bilde for lenkeforhåndsvisning som genereres automatisk for hver side, vanligvis fra sidens tittel og data i en fast merkevaremal, i stedet for å designes for hånd. ### Hvilken størrelse bør et OG-bilde ha? 1200 × 630 piksler er standarden. Hold viktige ord unna kantene, fordi noen apper viser en mindre eller beskåret versjon. ### Hvorfor vises den gamle forhåndsvisningen etter at jeg endret OG-bildet? Plattformer mellomlagrer forhåndsvisningsbilder per URL. Endre bildeadressen, for eksempel med en versjonsparameter, eller bruk plattformens kontroll- eller feilsøkingsverktøy for å hente siden på nytt. ### Bør jeg generere OG-bilder ved bygging eller ved forespørsel? Ved bygging er rimeligst og passer sider som sjelden endres. Generer ved forespørsel for sider med skiftende data, og mellomlagre resultatet så det ikke tegnes på nytt ved hvert besøk. ### Trenger og:image en absolutt URL? Ja. Bruk hele adressen med https og domenet, fordi søkeroboter leser taggen utenfra nettstedet ditt.