Stop Hand-Designing Open Graph Images: Automate Link Previews for Every Page

Open Graph images are the single biggest factor in whether your shared links look credible or broken. Yet most sites ship one generic image on every page because making a unique one by hand is tedious. Here is a more sustainable approach: treat preview images as generated data, not hand-made design.

The problem, concretely

When you share a link, the receiving platform reads your page's og:image meta tag and renders a card. If that tag is missing, points to a low-res logo, or is the same image on all 200 pages, your links look generic in every feed, Slack channel, and group chat. Studies of social sharing consistently show that posts with a clear, relevant preview image get meaningfully more engagement than those without.

The reason teams skip it is not ignorance. It is friction. Opening a design tool, duplicating a template, swapping the title text, exporting at the right dimensions, and uploading the file takes 10 to 20 minutes per page. Nobody keeps that up across a real publishing schedule. So the back catalog stays bare and new posts get whatever the default is.

The insight: it is template work

Look at a typical preview card and ask what actually changes between pages. Usually just the title, maybe the author and a category tag. The layout, background, logo, and fonts are constant. That is the textbook definition of a job you should template once and generate programmatically, not redo by hand each time.

How to solve it

The cleanest pattern is to generate the image at build time or on first request, then cache it. Conceptually:

// During your build or in an API route
async function getOgImage(post) {
  const params = new URLSearchParams({
    title: post.title,
    author: post.author,
    tag: post.category,
  });
  // Returns a ready Open Graph image URL
  return `https://getcardforge.dev/api/card?${params}`;
}

// In your page head
// <meta property="og:image" content={getOgImage(post)} />

You can build this yourself with a headless browser plus an HTML template, and for a small site that is reasonable. The honest caveats appear at scale: headless renderers are memory-hungry, font loading is a recurring source of subtle bugs, cold starts add latency, and you end up babysitting an image pipeline that has nothing to do with your actual product. You also have to think about caching so a busy crawler does not trigger a thousand regenerations of the same card.

If you would rather not own that pipeline, a hosted generator does the same job: you pass a URL or the metadata fields, it returns the Open Graph image. The things that are annoying to build yourself, batch generation for covering an existing archive in one pass, signed delivery URLs so your cards are not trivially scraped, and edge caching so identical cards are served instantly, come included.

A practical rollout

1. Define one template with your title, author, and brand styling.
2. Generate cards for new pages automatically in your build step.
3. Run a one-time batch over your existing back catalog.
4. Validate with a link-preview debugger before you call it done.

The goal is to make good previews the default state of your site rather than a manual chore you fall behind on. CardForge is one way to do that without standing up and maintaining your own rendering infrastructure, but whichever route you pick, the principle holds: generate, do not hand-draw.

Full disclosure: I build CardForge, an Open Graph image generator that turns page metadata into preview cards, in batch. It is free to try at https://getcardforge.dev.