OGCOPS

Overview

OGCOPS is a free, open-source OG image generator built for developers and content creators who need professional social media images without the friction. Paste a URL or pick from 109+ templates, customize in a live editor, and download a pixel-perfect 1200x630 PNG — all without creating an account. The tool also includes a social media preview checker that audits any URL's meta tags across 8 platforms.

Challenge

Creating good OG images is tedious. Most developers either skip them entirely (resulting in blank social cards), use generic screenshots, or pay for design tools that require accounts and subscriptions. Existing OG image generators were either too limited in templates, required backend infrastructure to self-host, or locked features behind paywalls. We needed a tool that was genuinely free, fast, and developer-friendly.

Solution

We built OGCOPS as a zero-friction developer tool with three core principles: no login, no paywall, no rate limits.

Real-Time Editor

The editor uses client-side Satori rendering to generate SVG previews instantly as users type — zero server calls during editing. This means every keystroke, color change, or font adjustment reflects immediately in the preview. Only the final PNG download hits the server.

109+ Templates Across 12 Categories

Templates cover real use cases that developers and creators actually need:

• Blog / Article — Minimal dark, gradient split, photo overlay, code snippet, retro terminal
• SaaS / Landing — Product launch, pricing announcement, feature highlight
• GitHub / OSS — Repo card, release announcement, contributor spotlight
• Developer / Portfolio — Tech stack showcase, project card, resume header
• Event / Conference — Speaker card, schedule preview, virtual event
• Podcast / Video — Episode card, guest spotlight, series banner
• Newsletter — Issue preview, subscriber milestone, digest
• E-commerce — Product card, sale banner, collection
• Job Posting — Role card, company spotlight
• Tutorial / Course — Lesson card, series overview

Each template exposes typed fields (text, color, select, number, toggle, image) organized into Content, Style, and Brand groups.

CORS-Open API

The API is fully open — no keys, no auth, no rate limits:

GET https://og.codercops.com/api/og?template=minimal-dark&title=Hello+World

Returns a 1200x630 PNG with 24-hour CDN caching. Developers can generate OG images dynamically from any backend, CI pipeline, or static site generator.

Social Media Preview Checker

The /preview tool fetches any URL and analyzes its Open Graph, Twitter Card, and general meta tags. It renders previews exactly as they'd appear on Twitter/X, Facebook, LinkedIn, Discord, Slack, Telegram, WhatsApp, and Google — with actionable warnings for missing or malformed tags.

Tech Stack

• Framework: Astro SSR with React Islands (client:load for interactive components)
• OG Engine: Satori (SVG generation) + resvg-wasm (PNG rasterization)
• Validation: Zod schemas for API input validation
• Testing: Vitest with 100% template coverage
• Fonts: Bundled .woff files (Inter, Playfair Display, JetBrains Mono)
• Deployment: Vercel Serverless Functions with edge caching
• License: MIT — fully open source

Architecture

The architecture separates concerns between client and server:

• Client-side: Satori renders SVG previews directly in the browser. State is managed with useReducer and persisted entirely in URL query parameters — no database, no cookies, no local storage. Every editor state is a shareable URL.
• Server-side: The /api/og endpoint runs Satori + resvg-wasm to produce production-quality PNGs. Responses are cached for 24 hours at the CDN edge.
• Template system: Each template is a TypeScript file exporting a TemplateDefinition interface — a pure function from fields to Satori JSX. Templates are registered in a central registry and automatically surfaced in the editor, API, and gallery.

Results

• 109+ templates across 12 categories, all professionally designed
• Zero-friction UX — no signup, no paywall, instant results
• Open-source on GitHub with MIT license
• Production API used by external sites for dynamic OG image generation
• Sub-second previews thanks to client-side Satori rendering
• 8-platform preview checker for comprehensive meta tag auditing