OG images: why every page needs one (and how to automate them)

September 7, 2026 · 5 min read

Share a link without an Open Graph image and most platforms show a bare, grey rectangle. Share one with a good OG image and click-through rates routinely double. It's the single highest-leverage piece of meta data on your page — and the one most often missing.

The anatomy of a good OG image

1200×630 pixels — the ratio every major platform expects.
Readable at thumbnail size — big type, high contrast, one idea.
Specific to the page — the post title, the product name, the actual content. A generic logo banner wastes the slot.
Under ~1 MB — or link previews get slow and some crawlers skip it.

The problem: scale

Making one beautiful card for your homepage is a fun Figma session. Making one for every blog post, changelog entry, doc page and user profile is a design production line. Most teams either ship a single generic image site-wide, or skip OG images entirely.

The automation options

Modern frameworks can generate OG images at build time (Next.js has ImageResponse). That works — until the images need to be dynamic per-user, or your stack isn't Next, or your build times start creeping. A rendering API decouples it:

import { OtterSnap } from "ottersnap";

const otter = new OtterSnap(process.env.OTTERSNAP_KEY);

const og = await otter.og({
  title: post.title,
  subtitle: post.excerpt,
  theme: "emerald",
});

One call, a branded 1200×630 PNG with your copy. Point your og:image at it (or store it) and every page gets a real card.

Check your own site

Use a free OG tag generator to see what your pages currently announce to the world — you might be surprised. And if the images are the missing piece, OtterSnap's OG Image API starts free.