How to Auto-Generate Open Graph Images for Your Blog (No Design Skills Needed)

#webdev #tutorial #seo #javascript

You know those preview cards that show up when you share a link on Twitter or LinkedIn? Those are Open Graph images, and they can make or break your click-through rate.

But making them manually in Figma for every blog post? Pain.

I built an API to solve this. Here's how to use it.

The Problem

Every blog post needs an OG image. Without one, your shared links look like this:

❌ Plain text, no preview, low engagement

With a good OG image:

✅ Eye-catching, professional, higher CTR

The Solution: Generate Them Programmatically

Instead of designing each image, just call an API:

curl -X POST https://ogimageapi.io/api/generate \
  -H "Content-Type: application/json" \
  -H "X-API-Key: your_key" \
  -d '{
    "title": "How to Build a SaaS in 2025",
    "subtitle": "A complete guide",
    "template": "blog",
    "theme": "dark"
  }' \
  --output og-image.png

That's it. One request, one image.

In Next.js

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);

  const ogImageUrl = `https://ogimageapi.io/api/generate?title=${encodeURIComponent(post.title)}&template=blog&theme=dark`;

  return {
    props: { post, ogImageUrl }
  };
}

export default function BlogPost({ post, ogImageUrl }) {
  return (
    <>
      <Head>
        <meta property="og:image" content={ogImageUrl} />
      </Head>
      {/* ... */}
    </>
  );
}

Available Templates

blog — Perfect for articles
product — E-commerce products
profile — Author pages
stats — Metrics/dashboards
event — Conferences/meetups

Free Tier

25 images/month free — enough for most personal blogs.

Check it out: ogimageapi.io

What do you use for OG images? Would love to hear other approaches!

DEV Community