Open Graph images on the fly: put the title in the URL and get a 1200×630 PNG.
https://simple-og-image.vercel.app/<title>.png?siteTitle=yokinist.me
Try the parameters at simple-og-image.vercel.app. Drawn with Satori and resvg, so no browser runs. Text is set in Inter and Noto Sans JP, fetched from Google Fonts with only the characters used, and emoji are Twemoji.
| Parameter | Default | |
|---|---|---|
title |
the path | The title, from /<title>.png or ?title=. Long titles shrink to fit three lines (two with a description). |
siteTitle |
Shown above the title, with a dot of the accent color or the logo. | |
description |
One or two lines under the title. | |
author, date |
Shown at the bottom, as given. | |
logo |
An https image next to the site title. |
|
layout |
standard |
standard, center or split. |
theme |
dark |
dark or light; sets the colors below. |
background, foreground, accent |
from the theme | A hex, rgb()/hsl() or color keyword. Encode # as %23. |
fontSize |
72 |
The largest the title gets, 32 to 128 (96px works too). |
Values that are invalid fall back to the defaults. md and isTwitter, from the original service, are accepted and ignored.
Each image below is the URL above it, drawn by the live service. Try your own at simple-og-image.vercel.app.
The default: dark, with a description and a byline.
/Open Graph images from a URL 🖼️.png?siteTitle=og-image&description=Put the title in the path and get a 1200×630 PNG&author=yokinist&date=2026-10-15
layout=center, theme=light and an orange accent.
/Notion API でブログを作る.png?layout=center&theme=light&accent=%23f97316&siteTitle=yokinist.me&author=yokinist&date=2026年10月15日
layout=split with a logo, which also fills the panel on the right.
/Next.js と Notion API でブログを作り直した.png?layout=split&accent=%2310b981&logo=https://github.com/yokinist.png&siteTitle=yokinist.me&description=react-notion-x から公式 API に移行した記録&date=2026-10-15
Responses are cached for a year, so a URL keeps its image. Change a parameter to get a new one.
npm install
npm run preview # draws sample cards into preview/
npm test
vercel dev # the API at localhost:3000The card is src/card.tsx; the parameters are read in src/options.ts. Deploys to Vercel as is, on Node 24.
MIT. Forked from vercel/og-image.