ogimage.org

Free, open-source Open Graph image kit and a gallery of 300+ real startup OG cards.

Live site: ogimage.org

Clone the repo, run it locally, and ship social preview images from Next.js route handlers. No hosted API. No database. Gallery data lives in git.

Templates render at 1200×630 through next/og ImageResponse. Preview them at /templates or browse examples at /inspiration.

• emoji — single emoji on a gradient
• icon — Lucide-style icon grid
• image — avatar + name card
• button — emoji, headline, and CTA pill
• headline — bold headline block
• screenshot — live page capture in a frame (needs screenshot API env)
• phone — mobile-style screenshot mock
• city — geo + Unsplash background (needs UNSPLASH_KEY)
• blog-post — title, excerpt, and author (?title= / ?excerpt= / ?author=)

Requires Bun.

git clone https://github.com/Illyism/ogimage.git
cd ogimage
bun install
cp .env.example .env
bun dev

Open http://localhost:3000.

Email signup and gallery suggestions need Resend keys in .env. Everything else runs without them.

Each template is a route under /og/templates/{name}. Point og:image at your deployed URL:

<meta property="og:image" content="https://your-domain.com/og/templates/headline" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

For dynamic titles, pass query params where the route supports them:

<meta
  property="og:image"
  content="https://your-domain.com/og/templates/blog-post?title=Launch%20week&author=Acme"
/>

Wire defaults through your metadata helper. This repo uses core/seo.tsx as a reference.

bun run gallery:add https://example.com saas productivity

That writes content/gallery/example.com.json and public/og/example.com.jpg. Open a PR with both files. Details in CONTRIBUTING.md.

docker build -t ogimage .
docker run -p 3000:3000 --env-file .env ogimage

Coolify and other hosts can build from the root Dockerfile. The image uses Next.js output: 'standalone'.

bun run check   # lint + typecheck
bun run build   # production build

Copy .env.example to .env.

Without screenshot env vars, screenshot templates fall back to a placeholder image.

MIT. Fork the kit, the gallery, and the site.

• Next.js ImageResponse
• Satori (underlying renderer)
• Open Graph protocol