Dynamic Open Graph (OG) image generation service for blogs and websites. Built with Next.js 14 and deployed on Vercel Edge Runtime for fast, globally distributed image generation.
Demo: https://og.tutuis.me
⚠️ Important: The demo site is for demonstration purposes ONLY. Please deploy your OWN instance for production use.
- Beautiful Default Background - Stunning starry sky image when no background is provided
- Custom Background Support - Use your own images (PNG, JPG, JPEG, GIF)
- Pixel Font Aesthetic - Zpix pixel font for retro, distinctive look
- Frosted Glass Effect - Enhanced readability with backdrop blur overlay
- Responsive Typography - Dynamic font sizing based on title length
- Edge Runtime - Fast generation with global CDN caching
- CJK Support - Full support for Chinese, Japanese, and Korean characters
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildVisit http://localhost:3000/api/og?title=Hello&site=Blog to test.
GET /api/og
| Parameter | Type | Required | Description | Example |
|---|---|---|---|---|
title |
string | Yes | Article title (max 60 chars) | Hello World |
site |
string | Yes | Site name for branding | My Blog |
excerpt |
string | No | Article excerpt (max 80 chars) | A brief description... |
author |
string | No | Author name | John Doe |
date |
string | No | Publication date | 2025-01-05 |
image |
string | No | Background image URL | https://... |
https://og.tutuis.me/api/og?title=Getting%20Started&site=Tech%20Blog&author=Jane&date=2025-01-05
https://og.tutuis.me/api/og?title=My%20Article&site=Blog&image=https://images.unsplash.com/photo-123456
If you're using the Attegi theme for Ghost, OG image generation is built-in. Simply configure your OG service URL in the theme settings.
For App Router pages (supports dynamic params), use generateMetadata:
import type { Metadata } from 'next';
export async function generateMetadata(): Promise<Metadata> {
const title = 'Hello World';
const siteName = 'My Blog';
const ogUrl = `https://your-domain.com/api/og?title=${encodeURIComponent(title)}&site=${encodeURIComponent(siteName)}`;
return {
openGraph: {
images: [{ url: ogUrl, width: 1200, height: 630 }],
},
};
}Add to your page frontmatter or layout:
---
const ogImage = `https://your-domain.com/api/og?title=${encodeURIComponent(title)}&site=${encodeURIComponent(siteName)}`;
---
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Add to your template:
{{ $title := .Title }}
{{ $site := .Site.Title }}
{{ $ogImage := printf "https://your-domain.com/api/og?title=%s&site=%s" (urlquery $title) (urlquery $site) }}
<meta property="og:image" content="{{ $ogImage }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />For other frameworks and platforms, set og:image meta tags to the generated URL (see the Open Graph protocol).
- Image Size: 1200×630px
- Font: Zpix pixel font
- Framework: Next.js 14 with App Router
- Runtime: Vercel Edge Runtime
- Image Generation: @vercel/og (Satori)
- Language: TypeScript
- Deployment: Vercel
- Supported Image Formats: PNG, JPG, JPEG, GIF
- Unsupported Formats: WebP, AVIF, SVG (limitation of @vercel/og)
- Image Loading: Remote images are fetched by @vercel/og at render time
Replace /public/default-bg.jpg with your own 1200×630px image.
Edit app/api/og/route.tsx around line 162:
background: 'linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.15) 70%, transparent 100%)',
backdropFilter: 'blur(16px)',Replace the Zpix font URL in loadZpixFont() function with your preferred TTF/OTF font.
MIT
- Default background: Cluster of Stars by Paul Lichtblau on Unsplash
- Zpix pixel font by SolidZORO