OG Image: open-source generator, templates, checker, and gallery
Make an OG image (Open Graph image) for every page of your site. This repo is the full source of ogimage.org: a free OG image generator, nine Next.js + Satori templates, an Open Graph checker, and a gallery of 430+ real OG image examples.
No hosted API. No database. No sign-up. MIT license. Clone it, self-host it, and ship your own images.
If it helps you, star the repo. Made by Ilias Ism (@illyism).
What is an OG image?
An OG image is the picture that X, Facebook, LinkedIn, Slack, Discord, WhatsApp, and iMessage show when someone shares a link. One meta tag sets it:
<meta property="og:image" content="https://your-domain.com/og/home.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
The standard OG image size is 1200×630 pixels (ratio 1.91:1), as PNG or JPEG, below 1 MB.
Guides: What is an OG image? · OG image size · og:image meta tag · Next.js OG image · Open Graph tags
Quick start
Requires Bun.
git clone https://github.com/Illyism/ogimage.git
cd ogimage
bun install
cp .env.example .env
bun dev
Open http://localhost:3000. The generator, the templates, the checker, and the gallery run without any keys.
Generate an OG image in Next.js
Each template is a route handler that returns a 1200×630 PNG through next/og ImageResponse. Satori renders the JSX. Tailwind classes go in the tw prop.
// app/og/route.tsx
import { ImageResponse } from 'next/og'
import type { NextRequest } from 'next/server'
export async function GET(request: NextRequest) {
const title = request.nextUrl.searchParams.get('title') ?? 'Hello'
return new ImageResponse(
<div tw="flex h-full w-full items-center justify-center bg-black p-20 text-7xl font-bold text-white">
{title}
</div>,
{ width: 1200, height: 630 },
)
}
Point og:image at the route:
export const metadata = {
metadataBase: new URL('https://your-domain.com'),
openGraph: { images: ['/og?title=Launch%20week'] },
twitter: { card: 'summary_large_image' },
}
This repo uses core/seo.tsx as the metadata helper.
Included OG image templates
All templates are in app/og/templates/. Each one reads its text from the query string, so one route serves every page.
| Template | Card | Query |
|---|
headline | Two-line headline with a marker on the second line | title, highlight, subtitle, cta, site |
blog-post | Title, excerpt, and author | title, excerpt, author, tag, site |
screenshot | Live capture of a page in a browser window | path |
phone | Live capture of the mobile page in a phone, beside a headline | title, subtitle, cta, site |
button | Emoji, headline, and one large button | emoji, title, cta |
image | Profile card: picture, name, role, handle | name, role, handle |
icon | Icon tile beside a title | title, subtitle |
emoji | One large emoji | emoji, label |
city | Photo of the city of the visitor (needs UNSPLASH_KEY) | brand, prefix |
<meta
property="og:image"
content="https://your-domain.com/og/templates/blog-post?title=Launch%20week&author=Jane"
/>
The generator at /generator uses one more route, app/og/generator/route.tsx, with title, subtitle, site, layout, bg, and accent. This site uses that route for its own link previews. See core/seo.tsx.
Fonts. The cards use Geist, Geist Mono, and Instrument Serif from assets/fonts/. app/og/components/render.ts loads them once. Satori reads TTF, OTF, and WOFF, not WOFF2.
Screenshots. The screenshot and phone templates capture a live page through ScreenshotOne (affiliate link). Set SCREENSHOT_API_URL and SCREENSHOT_API_KEY. Without them, both templates show a sample capture.
OG image gallery
The gallery is a git CMS. One site is two files: content/gallery/{domain}.json and public/og/{domain}.{ext}.
Add one site:
bun run gallery:add https://example.com saas productivity
Find good cards automatically:
bun run gallery:find # YC companies, newest first
bun run gallery:find --source hn # popular Show HN launches
bun run gallery:find --file sites.txt # your list, one URL per line
bun run gallery:find --limit 80 --add 15 --min-score 8 --dry-run
gallery:find fetches each site, rejects images with the wrong size or ratio, and asks Claude to score the design from 1 to 10. Cards that pass get a name, a description, categories, and colors. It needs ANTHROPIC_API_KEY.
Open a pull request with the new files. Details are in CONTRIBUTING.md.
Project layout
Production
Docker
docker build -t ogimage .
docker run -p 3000:3000 --env-file .env ogimage
Any Docker host can build from the root Dockerfile. The image uses Next.js output: 'standalone'.
Checks before you ship
bun run check # lint + typecheck
bun run build # production build
Environment variables
Copy .env.example to .env. All variables are optional for local work.
| Variable | Purpose |
|---|
RESEND_API_KEY | Resend API key for gallery suggestions |
CONTACT_EMAIL | Reply-to and inbox for gallery suggestions (default: [email protected]) |
NEXT_PUBLIC_POSTHOG_KEY | PostHog project key |
NEXT_PUBLIC_POSTHOG_HOST | PostHog ingest host |
SCREENSHOT_API_URL | Base URL of the screenshot API (screenshot, phone templates). Works with ScreenshotOne |
SCREENSHOT_API_KEY | API key for that service |
UNSPLASH_KEY | Unsplash access key for the city template |
ANTHROPIC_API_KEY | Design review in bun run gallery:find |
Without the screenshot variables, the screenshot templates show a sample capture.
Plausible page views are sent only when the site runs on ogimage.org. A fork sends nothing. To use your own Plausible site, change the host and the domain in app/layout.tsx.
FAQ
What size must an OG image be?
1200×630 pixels. See the OG image size guide.
Can I use this without Next.js?
Yes. Deploy this repo and point the og:image tag of any site at a template URL. Or use the generator and upload the PNG.
How do I test my OG image?
Paste the URL of your page into the OG image checker.
Is it free for commercial use?
Yes. The code is MIT. The gallery images belong to their sites and are shown as examples.
License
MIT. Fork the kit, the gallery, and the site.
Links
