I Built a Free OG Image Generator — Here's How (and Why)

#webdev #opensource #html #productivity

You know that moment when you're about to share your side project on Twitter, and the preview card is... nothing? Just a boring URL. No image, no title, no click appeal.

I got tired of it. So I built a free OG image generator.

The Problem

Every link you share on social media uses Open Graph meta tags to generate preview cards. Without an og:image, your link looks like spam next to everyone else's polished cards.

Most developers either:

Skip it entirely (bad)
Spend 30 minutes in Figma per image (wasteful)
Pay for Cloudinary/imgix transforms (overkill for a blog post)

The Solution: A Free Tool

I built a free OG image generator that lets you:

Pick from 6 templates (gradient, split, minimal, bold, dark, pattern)
Customize title, subtitle, author, emoji, colors, font size
Download as PNG (1200×630 — the standard OG size)
Copy the HTML meta tags to paste into your <head>

It runs entirely client-side. No signup, no watermark, no catch.

How It Works

The generator is built with vanilla JavaScript and HTML Canvas. Here's the core approach:

const canvas = document.createElement("canvas");
canvas.width = 1200;
canvas.height = 630;
const ctx = canvas.getContext("2d");

const gradient = ctx.createLinearGradient(0, 0, 1200, 630);
gradient.addColorStop(0, primaryColor);
gradient.addColorStop(1, secondaryColor);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1200, 630);

ctx.fillStyle = "#ffffff";
ctx.font = "bold 56px Inter, sans-serif";
wrapText(ctx, title, 80, 280, 1040, 68);

const dataUrl = canvas.toDataURL("image/png");

The key decisions:

1200×630 is the universal OG image size (works on Twitter, Facebook, LinkedIn, Discord)
Client-side only means zero server cost and instant generation
No dependencies — just Canvas API

Why Give It Away Free?

Because I'm building Rendly, a screenshot and image generation API. The free tool helps individuals. The API helps teams who need to generate hundreds or thousands of OG images programmatically.

One blog post? Use the free tool. A CMS with 500 posts that need dynamic OG images? That's where the API comes in:

const response = await fetch("https://rendly.dev/api/v1/screenshots", {
  method: "POST",
  headers: { "Authorization": "Bearer YOUR_API_KEY" },
  body: JSON.stringify({
    html: ogImageTemplate(post.title, post.author),
    width: 1200,
    height: 630,
    format: "png"
  })
});