DEV Community

Cover image for I Built a Free OG Image API - Here's How It Works
ABHISHEK KUNDALIA
ABHISHEK KUNDALIA

Posted on

I Built a Free OG Image API - Here's How It Works

#javascript #webdev #api

The Problem: Manual OG Images Are a Pain

You've probably been there. You just finished writing an amazing blog post, you're ready to share it on Twitter, and then... the preview looks like garbage.

No image. Or worse—a stretched, pixelated mess.

So what do you do? Fire up Figma. Spend 15 minutes tweaking. Export. Upload. Repeat for every. single. post.

I got tired of this workflow.

The Solution: API-Based OG Image Generation

I built ogimage.art—a free API that generates beautiful OG images on-the-fly.

Here's the magic: the image IS the URL.

https://ogimage.art/api/og?title=Your%20Title&template=gradient
Enter fullscreen mode Exit fullscreen mode

Paste this URL into your og:image meta tag, and social platforms fetch a freshly generated image every time.

Quick Start (2 minutes)

Step 1: Pick a Template

Available templates: gradient, dark, sunset, ocean, forest, midnight, minimal, fire

Step 2: Add the Meta Tags 

<meta property="og:image" content="https://ogimage.art/api/og?title=Your%20Title&template=gradient" />
<meta name="twitter:card" content="summary_large_image" />
Enter fullscreen mode Exit fullscreen mode

Step 3: Make It Dynamic

Next.js:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://ogimage.art/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}
Enter fullscreen mode Exit fullscreen mode

Jekyll:

<meta property="og:image" content="https://ogimage.art/api/og?title={{ page.title | url_encode }}" />
Enter fullscreen mode Exit fullscreen mode

Pricing

  • Free: Unlimited images with small watermark
  • Pro ($9/mo): No watermark + API access

Try It Now

🌐 ogimage.art - Live demo + docs

Got questions? Drop a comment below!

Happy shipping! 🚀

Top comments (0)