Introduction to Open Graph Image Generator

Overview of the Open Graph Image Generator API, design philosophy, architecture, and core capabilities.

Get Started

5-Minute Quickstart

Generate your first social preview in 2 minutes using cURL, fetch, or simple HTML meta tags.

Explore
Live Studio

Interactive Studio

Visually tune templates, test responsive previews, copy canonical URLs, and export production code.

Explore
API Reference

Parameters Reference

Complete query parameter specifications for layouts, fonts, themes, hex colors, and aspect ratios.

Explore
Frameworks

Framework Guides

Copy-paste integration code and best practices for Next.js, Astro, Nuxt 3, and SvelteKit.

Explore

The Open Graph Image Generator is an edge-native service that creates dynamic, crisp Open Graph (OG) social share images on demand directly from deterministic URL query parameters.

Modern web applications need unique, beautiful preview cards when links are shared on social platforms like Twitter / X, LinkedIn, Facebook, Slack, Discord, and iMessage. Traditionally, developers either design static images manually in design software or spin up heavy headless browsers (such as Puppeteer or Playwright) that consume gigabytes of memory and suffer from 2–5 second cold starts.

This service takes a different approach: deterministic SVG layout compiled to ultra-fast native rasterization at the edge.

High-Level Architecture

The service runs entirely on Cloudflare Workers edge compute without headless browsers:

  1. Parameter Validation & Normalization: Strict validation parses incoming query parameters against template-specific schemas. Unknown parameters and invalid values fail closed with clear, actionable HTTP 400 error codes.
  2. Deterministic Layout Generation (Satori): Uses Satori to render JSX/HTML layouts into scalable vector graphics (SVG) with embedded subset fonts.
  3. Hardware-Accelerated Rasterization (Resvg): Converts SVG trees into high-fidelity, compressed PNG images in milliseconds using WebAssembly-compiled Resvg.
  4. Edge & Client Caching: Rendered images are cached globally across Cloudflare edge locations (Cache-Control: public, max-age=86400, s-maxage=604800, stale-while-revalidate=86400), serving subsequent requests in under 20ms.

Key Features

  • Zero Headless Browsers: Sub-100ms warm render latency, minimal CPU consumption, and instant cold starts.
  • Multiple Built-in Templates: Choose from carefully designed layouts (minimal, article, docs, product, profile, announcement).
  • Standardized Aspect Ratios: Out-of-the-box support for standard Open Graph (1200×630), Twitter summary cards (1200×600), and square cards (1200×1200).
  • Safe Remote Asset Integration: Embed external brand logos and user avatars with comprehensive Server-Side Request Forgery (SSRF) defense, strict size limits (2 MB max), and fail-closed validation.
  • Fail-Closed Security: Private IP ranges (RFC 1918, RFC 3927 link-local, loopback, cloud metadata endpoints) and non-standard ports are strictly blocked.
  • Developer First: First-class code snippets for Plain HTML, Next.js, Astro, Nuxt, and SvelteKit.

Next Steps

  • Follow the Quickstart Guide to generate your first social preview image in under 5 minutes.
  • Explore the interactive Playground to customize templates with live visual feedback.
  • Browse the Template Catalog to view all available layouts and their supported parameters.