Dynamic OG Images Without Design Tools: Auto-Generate for Every Page

You have 50 blog posts. Maybe 200. You're not going to open Figma for each one.

The good news: you don't have to. Dynamic OG image generation lets you create a single template that produces a unique, perfectly-branded image for every page on your site — automatically, from URL parameters.

The Old Way: Manual Design for Every Post

The traditional workflow looks like this:

Open Figma / Canva / Photoshop
Duplicate a template
Update the title and description text
Export as PNG
Upload to your server
Reference it in your og:image tag

For one post, that's 10 minutes. For 50 posts, that's over 8 hours of design work that adds zero value to your content.

The Better Way: URL-Based Dynamic Images

A dynamic OG image is generated from URL parameters at request time. The URL itself carries all the information needed to render the image:

https://yoursite.com/api/og?title=How+to+Compress+a+PDF&description=Reduce+PDF+size+without+losing+quality&category=pdf

When Twitter's crawler fetches that URL, it gets back a 1200×630 PNG with your title, description, and branded design — unique to that page, with no manual work.

Why Dynamic Images Outperform Static Ones

Always current. Update your post title? The OG image updates automatically because it reads from the URL parameter.

Zero maintenance. Publish 10 posts in a day — all get proper OG images instantly.

Consistent branding. One template means one brand voice. No rogue colours from a hurried Canva session.

Infinitely scalable. Whether you have 10 pages or 10,000, the same single template handles all of them.

How to Generate Dynamic OG Images for Your Blog

Option 1: Use Keynou's Free Generator (No Code)

The OG Image Generator creates images from URL parameters with your custom branding. Here's how to use it for every blog post:

Visit the tool and enter your domain, logo letter, tagline, and accent colours once — they save to your browser automatically.

For each blog post, take the title and description and construct the URL:

https://keynou.com/api/og?title=YOUR+TITLE&description=YOUR+DESC&category=blog

Paste that URL into your post's og:image meta tag.

That's it. Every post gets its own unique image from your saved brand template.

Option 2: Auto-Wire It in Your CMS or Static Site Generator

If you manage your blog with a CMS, add the og image URL to your post template rather than each post individually:

WordPress (functions.php or plugin):

function custom_og_image() {
  $title = urlencode(get_the_title());
  $desc = urlencode(get_the_excerpt());
  echo '<meta property="og:image" content="https://yoursite.com/api/og?title=' . $title . '&description=' . $desc . '&category=blog" />';
}
add_action('wp_head', 'custom_og_image');

Hugo (layouts/partials/head.html):

<meta property="og:image" content="https://yoursite.com/api/og?title={{ .Title | urlquery }}&description={{ .Description | urlquery }}&category=blog" />

Eleventy (Nunjucks layout):

<meta property="og:image" content="https://yoursite.com/api/og?title={{ title | urlencode }}&description={{ description | urlencode }}&category=blog">

Next.js (generateMetadata):

const ogImage = `https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}&description=${encodeURIComponent(post.excerpt)}&category=blog`;

return {
  openGraph: { images: [{ url: ogImage, width: 1200, height: 630 }] },
  twitter: { images: [ogImage] },
};

Once wired in, every new post automatically gets its own image — forever.

Design Tips for Dynamic Templates

When building your template, optimise for readability at thumbnail sizes:

Font size: Minimum 48px for titles at 1200px wide (they render at ~300px in feeds)
Contrast: Light text on dark background, or vice versa — avoid mid-tones
Truncate long titles: Cap at 60–70 characters and add an ellipsis
Consistent padding: 60–80px inset keeps content away from crop edges
Category badge: A small coloured pill (like the presets in the Keynou generator) helps categorise content at a glance

For Existing Posts: Retroactively Adding OG Images

If you have a backlog of posts without OG images, you don't need to update each one manually. If your CMS or static site generator has a template, update the template once — all posts get OG images on next build or next request.

For hand-coded HTML posts, a quick script can help:

# Find all HTML files missing og:image
grep -rL 'og:image' ./posts/

For each result, add the dynamic URL pattern. If the title is in a consistent heading or filename, you can automate the insertion with sed or a small Node.js script.

Checking That It Worked

After setting up dynamic OG images, verify a few URLs:

Open your browser and navigate directly to:
```
https://yoursite.com/api/og?title=Test+Post&category=blog
```
You should see a PNG image, not an error.
Use OpenGraph.xyz to paste your post URL and confirm the preview image appears correctly.
Check Twitter Card Validator and LinkedIn Post Inspector for the platforms you care about most.

Related Tools

OG Image Generator — free, save your branding, instant URL
QR Code Generator — pair QR codes with og images for offline→online campaigns
Image Compressor — compress downloaded OG PNGs for self-hosting
What is an OG image and why you need one

Blog