Dynamic OG images: generate link previews automatically

A dynamic OG image is a link preview image that your site generates for each page, instead of someone designing it by hand. When a page is shared on LinkedIn, in Slack or in a chat app, the platform fetches the image named in the page's og:image tag. If that image is built from the page's own title and data, every article, product and profile gets a preview that says exactly what it is.

This guide covers the template design, the two ways to generate images, the tags that connect them, caching and testing. For the size itself and how platforms crop, see our guide to the Open Graph image size.

Why every page should have its own OG image

The preview is often the first thing someone sees of your page, and in a busy feed it is most of what they see. One generic logo card for the whole site makes every shared link look the same, so none of them says what is behind it. A per-page image carries the page's actual title in your visual identity: recognisably yours, and specific enough to earn the click.

Designing an OG image template

Design the template the way you would design a thumbnail, because that is how it is usually seen. Previews appear at a fraction of their real size, and some apps show a smaller cropped version. The words that matter should survive both.

1. 1

   Start at 1200 × 630

   Design at full size, then check it at a quarter of that. If you can't read the title at 300 pixels wide, it is too small or too long.

2. 2

   Use the title, not the whole page

   One line of large type, or two at most. Long titles need a rule: shorten them in data, or step the font size down once they pass a set length.

3. 3

   Keep margins wide

   Keep the title and logo away from the edges so a tighter crop doesn't cut them. Around 60 to 80 pixels of margin at this size is a sensible starting point.

4. 4

   Add one piece of context

   A small label for the section, author or date helps people place the link. More than one extra line turns a preview into a document.

5. 5

   Make the background carry the brand

   A consistent gradient or material does more for recognition than a large logo. Keep its brightest, busiest part away from the words; text on a gradient explains how.

Generating OG images at build time or on request

There are two moments to make the image. At build time, your site renders an image for every page once and serves it as a static file: fast, cheap and ideal for articles and docs. On request, a route draws the image the first time it is asked for: right for pages whose data changes, such as a profile's follower count or a product's price. On-request images must be cached, or every share and every crawler visit repeats the work.

Most frameworks have a way to draw an image from HTML-like markup. In Next.js, an opengraph-image.tsx file beside a route generates that route's image with ImageResponse, and Next adds the meta tags for you. The same idea works elsewhere with a headless browser taking a screenshot of a template page.

// 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' }] },
  )
}

The Open Graph tags that connect the image

Platforms find the image through meta tags in the page's head. The image address must be absolute, including https:// and the domain, because the crawler reads it from outside your site. Declaring the width and height helps some platforms lay out the preview before they have downloaded the image, and the alt text describes it for people using screen readers.

<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 post 1600 × 900

1600 × 900

Caching and testing OG images

Platforms cache previews, sometimes for a long time. If you change an image but keep its address, people may keep seeing the old one. Add a version to the address, such as ?v=2, when the design changes, or ask the platform to fetch the page again. For on-request images, send cache headers so your server and any CDN keep the result.

• Paste the page into LinkedIn's Post Inspector to see the preview and refresh its cache.
• Use Meta's Sharing Debugger for Facebook, which can also re-fetch a page.
• Paste the link into a draft post on X, or a private chat in Slack or WhatsApp, to see the real preview without sending anything.
• Open the image address directly in a browser to confirm it returns a PNG, at the right size, without a login.

Treat OG images as part of any launch: they are on the list in our launch day graphics checklist, and the full set of formats is in social media image sizes. If you design your previews in Gradiently, its API can render a saved design as an exact 1200 × 630 PNG, which suits pipelines and AI agents that make images for you.