How to Generate Open Graph Images Automatically for Your Blog
Every time someone shares a link to your site on Twitter, LinkedIn, or Slack, the platform pulls your Open Graph image to create a rich preview. If you don't have one — or worse, if every page shows the same generic image — you're leaving engagement on the table. But manually creating OG images for every blog post or product page? That doesn't scale.
The solution is automated OG image generation using a screenshot API. In this guide, we'll walk through how to set it up so every page on your site gets a unique, branded social share image — without touching Figma or Canva.
Why Open Graph Images Matter
Posts with images get significantly more engagement than plain text links. Twitter reports that tweets with images receive 150% more retweets. LinkedIn posts with images get 2x the engagement. Your Open Graph image is the first impression people have of your content before they ever click.
A well-designed OG image tells people what the page is about, reinforces your brand, and makes your content look professional. A missing or broken one makes your site look like an afterthought.
The Manual Approach and Why It Breaks Down
Most teams start by manually creating OG images in design tools. This works when you have 5 pages. It falls apart when you have 50 blog posts, hundreds of product pages, or user-generated content. The common issues:
- Time cost: Each image takes 5–15 minutes to create, export, and upload
- Inconsistency: Different team members produce slightly different designs
- Forgotten pages: New pages often ship without OG images
- Maintenance: When you rebrand, you have to redo every image
The Automated Approach: Screenshot API + HTML Template
The idea is simple: create a single HTML template for your OG images, inject the page title and other dynamic content, then use a screenshot API to capture it as an image. The result is a pixel-perfect PNG that matches your brand for every page.
Step 1: Create an OG Image Template
Build a simple HTML page that will serve as your OG image template. It should be exactly 1200×630 pixels (the standard OG image size):
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 1200px;
height: 630px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #8224e3, #4f46e5);
font-family: system-ui, sans-serif;
color: white;
padding: 60px;
box-sizing: border-box;
}
.title {
font-size: 52px;
font-weight: 800;
line-height: 1.2;
}
.brand {
position: absolute;
bottom: 40px;
left: 60px;
font-size: 20px;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="title">{{TITLE}}</div>
<div class="brand">yourbrand.com</div>
</body>
</html>Step 2: Generate the Screenshot
Use a screenshot API to capture the rendered HTML as an image. With PxShot, you can pass raw HTML directly and get back a PNG:
// Generate OG image for a blog post
const response = await fetch("https://pxshot.dev/api/screenshot", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_API_KEY"
},
body: JSON.stringify({
html: ogTemplate.replace("{{TITLE}}", post.title),
width: 1200,
height: 630,
format: "png"
})
});
const imageBuffer = await response.arrayBuffer();
// Save or upload the image to your CDNStep 3: Serve It in Your Meta Tags
Once you have the image URL, add it to your page's <head>:
<meta property="og:image" content="https://cdn.yourdomain.com/og/your-post-slug.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://cdn.yourdomain.com/og/your-post-slug.png" />Automating at Build Time vs. On Demand
You have two strategies for when to generate the images:
Build-time generation
Generate all OG images during your CI/CD build step. Best for static sites with a known number of pages. Images are ready instantly when pages are shared.
On-demand generation
Generate images when they're first requested, then cache them. Best for dynamic content, user-generated pages, or sites with thousands of pages. Uses a CDN or edge cache for performance.
Advanced: Dynamic Data in OG Images
Your OG template can include more than just the title. Consider adding:
- Author avatar and name — great for blog posts
- Category badge — helps readers identify content type
- Reading time — sets expectations before the click
- Date — shows content freshness
- Product screenshot — for SaaS product pages
Testing Your OG Images
After setting everything up, test with these tools:
Skip the Setup — Use PxShot
PxShot is a screenshot API built on Cloudflare's global edge network. Pass any URL or raw HTML and get back a pixel-perfect screenshot in PNG, JPEG, or WebP. Free tier includes 100 screenshots per month — more than enough to get started with automated OG images.
Try PxShot Free →Wrapping Up
Automated OG image generation is one of those small investments that pays off every time someone shares your content. With a simple HTML template and a screenshot API, you can ensure every page on your site has a unique, branded social share image — without any manual work.
If you're building a content-heavy site or a SaaS product with user-generated pages, this approach scales infinitely and keeps your brand consistent across every social platform.
Need help setting up automated OG images or other developer tooling? Get in touch — we build custom automation solutions for teams of all sizes.