OG images that don't suck — and how to generate them programmatically

Most OG images on B2B sites are either missing, ugly, or generic stock photos. Here is what good ones look like + how to generate them programmatically so every page gets one without designer time.

Open Graph images are what shows up when your link is shared on LinkedIn, Slack, Twitter, or any platform that renders link previews. AI summarizers also pull og:image as the canonical visual representation of the page.

If your OG image is missing, broken, or generic stock, you are leaving impressions on the table. Every share that doesn't render a card is a lost click.

What good OG images do

A good OG image is:

• 1200×630 (the spec)
• Readable at 480px wide (LinkedIn's preview thumbnail size)
• Branded — your wordmark or color, not a stock photo
• Specific to the page — title, optional subtitle
• Consistent across pages so your brand is recognizable in a feed

What good OG images don't do: stock photo of a handshake, generic gradient, your headshot, or whatever was in the page hero.

The programmatic approach

Generating OG images by hand is fine for ten pages. Past that, it's a tax. Generate them programmatically.

The pattern: an SVG generator endpoint that takes title + subtitle + badge as query params and returns a card.

__FENCE0__

Each page sets its og:image to that endpoint with its own title. New page ships → it has a real OG image automatically.

The SVG template is one file. Variables are: brand wordmark in a corner, title in big serif, subtitle in smaller sans, optional badge as a label tag, accent color. ~80 lines of SVG.

Why this beats designer-rendered images

Three reasons:

Speed. New page ships → OG image exists immediately. No ticket, no review cycle.

Consistency. All cards use the same template, so when someone scrolls past 5 of your links in a row on LinkedIn, the brand registers.

Maintenance. Brand colors change → update the template once → every OG image updates. No 200-image batch export.

What this looks like at Merkava

The endpoint at app.withmerkava.com/api/webster/og.svg accepts title + subtitle + badge and returns a brand-consistent card. Every page on withmerkava.com points its og:image at that URL with its own params.

Webster (Merkava's web developer specialist) generates these on demand. Beacon's audit flags any page missing og:image and proposes the right URL.

If you don't have a Webster equivalent in your stack: 80 lines of SVG + an endpoint on Vercel/Cloudflare Workers + you're done. The investment pays back the first time a shared link gets 10x the click-through it would have without the image.