# Dynamiske OG-billeder: generér linkvisninger automatisk [Canonical HTML page](https://gradiently.design/da/guide/dynamic-og-images) Det skalerer ikke at lave et billede til linkvisning for hver side manuelt, og ét generisk billede til hele sitet spilder dit mest viste billede. Generér dem i stedet. ## The short version - Et dynamisk OG-billede er et Open Graph-billede til linkvisning, som genereres automatisk til hver side, typisk ud fra titlen, kategorien og en ensartet brandbaggrund. - Standardstørrelsen er 1200 × 630 pixels, og siden skal pege på billedet med en absolut URL i sit og:image-tag. - Du kan generere OG-billeder én gang ved build, hvilket er billigst, eller ved en anmodning, hvilket passer til sider med data, der ændres, så længe resultatet caches. - Platforme cacher linkbilleder pr. URL, så en ændring af billedet kræver normalt en ny adresse eller en anmodning om, at platformen henter siden igen. - Design skabelonen som en miniature: en kort titel i stor skrift, gode margener og en baggrund, der stadig er genkendelig i lille størrelse. **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](https://gradiently.design/da/guide/open-graph-image-size) 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. Et billede til linkvisning med teksten Sådan fjerner du farvebånd på en gradientbaggrund Én skabelon udfyldt med én artikels titel… Den samme skabelon til linkvisning med teksten Vælg dine brandfarver …og en andens. Ensartet nok til at blive genkendt, konkret nok til at blive klikket på. ## 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. **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. **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. **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. **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. **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](https://gradiently.design/da/guide/text-on-gradient) forklarer hvordan. ### Svag linkvisning - Det samme logokort på hver side - Hele titlen og beskrivelsen klemt ind med lille skrift - Tekst helt ude ved kanterne - Et uroligt foto bag hvide ord ### Stærk linkvisning - Sidens egen titel i stor skrift - Én kort etiket som kontekst - Brede margener, der tåler beskæring - En rolig brandbaggrund med tydelig kontrast ## 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. | Tilgang | Bedst til | Vær opmærksom på | | --- | --- | --- | | Ved build | Artikler, dokumentation, landingssider | Buildtiden vokser med antallet af sider | | Ved anmodning, med cache | Profiler, produkter, brugerindhold | Angiv cache-headere. Rendering uden cache er langsommere | | Manuelt design | En håndfuld nøglesider | Skalerer ikke og bliver let forældet | 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. ```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-billede pr. artikel i Next.js. Titlen får mindre skrift, når den er lang, og skrifttypen indlæses som en TTF-fil. > **Billedgeneratorer forstår kun noget CSS** Biblioteker, der omdanner markup til billeder, som det bag `ImageResponse`, understøtter flexbox og en del af CSS. Grid-layouts virker ikke, og skrifter skal være TTF, OTF eller WOFF, ikke WOFF2. Tjek listen for dit framework, før du designer noget, det ikke kan tegne. ## 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. ```html ``` De tags, en side skal bruge til en stor linkvisning. `twitter:card` beder X om layoutet med et stort billede. - Open Graph 1200 × 630: 1200 × 630 - LinkedIn-link 1200 × 627: 1200 × 627 - X-opslag 1600 × 900: 1600 × 900 Linkvisninger ligger tæt på 1.91:1. Ét billede på 1200 × 630 dækker de gængse tilfælde. Et særskilt billede vedhæftet et opslag er en anden opgave. ## 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](https://www.linkedin.com/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](https://gradiently.design/da/guide/launch-day-graphics), og alle formater findes i [billedstørrelser til sociale medier](https://gradiently.design/da/guide/social-media-image-sizes). 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. ## FAQ ### Hvad er et dynamisk OG-billede? Det er et Open Graph-billede til linkvisning, som genereres automatisk til hver side, typisk fra sidens titel og data i en ensartet brandskabelon, frem for at blive designet manuelt. ### Hvor stort skal et OG-billede være? 1200 × 630 pixels er standarden. Hold vigtige ord væk fra kanterne, fordi nogle apps viser en mindre eller beskåret version. ### Hvorfor vises det gamle billede stadig, efter jeg ændrede mit OG-billede? Platforme cacher linkbilleder pr. URL. Skift billedadressen, for eksempel med en versionsparameter, eller brug platformens inspektions- eller fejlfindingsværktøj til at hente siden igen. ### Skal jeg generere OG-billeder ved build eller ved anmodning? Ved build er billigst og passer til sider, der sjældent ændres. Generér ved anmodning til sider med data, der ændres, og cache resultatet, så det ikke tegnes igen ved hvert besøg. ### Kræver og:image en absolut URL? Ja. Brug hele adressen med https og domæne, fordi crawlere læser tagget udefra.