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

Source: Dev.to

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 “.

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

How It Works

The generator is built with vanilla JavaScript and the HTML Canvas API. 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");

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 the 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"
  })
});

Also: Check Your Existing Tags

While I was at it, I built a Meta Tag Checker. Enter any URL and it will show you:

• All your OG and Twitter Card tags
• Visual previews of how your link appears on each platform
• A completeness score
• What’s missing

Generating an OG image is only half the battle—you need to verify the tags are actually working.

Try It

🎨 Free OG Image Generator
🔍 Meta Tag Checker

No signup required. Let me know what templates you’d like to see added.