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

Source: Dev.to

Why Open Graph Images Matter

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

• Without an OG image – plain text, no preview, low engagement.
• With a good OG image – eye‑catching, professional, higher CTR.

Using the OG Image API

Instead of designing each image manually, you can generate them on the fly with a simple API request.

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.

Integrating with a Next.js Blog

// 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 (
    <>
      
        
      
      {/* ...post content... */}
    
  );
}

Available Templates

• blog – Perfect for articles
• product – E‑commerce products
• profile – Author pages
• stats – Metrics/dashboards
• event – Conferences/meetups

Pricing

• 25 images/month free – enough for most personal blogs.

Try It Out

Check it out at ogimageapi.io.

What do you use for OG images? I’d love to hear other approaches!