How do I test the generated images?

You can preview them during development by visiting the API route directly in your browser, for example: http://localhost:3000/api/og?title=Hello+World.

Can I use Tailwind or standard CSS classes?

No, Satori requires inline styles only. This skill guides you through the specific flexbox and styling rules required for successful rendering.

What technology does this skill use for image rendering?

It utilizes the Next.js next/og library, which is powered by Satori to convert HTML and CSS into SVG and then PNG images.

Does it support custom branding like logos and fonts?

Yes, it includes specific patterns for loading custom .ttf fonts from your public directory and integrating avatars or logos using base64 data URIs.

Next.js OG Image Generator

Name: Next.js OG Image Generator
Author: richtabor

byrichtabor

•

Social Media Management

Automates the creation of dynamic OpenGraph and Twitter share images using Next.js ImageResponse and Satori.

About

This skill streamlines the process of building high-quality, dynamic social preview images for Next.js applications by providing expert guidance on implementing both file-based and API route approaches. It ensures strict compliance with Satori's rendering rules, covering everything from optimized flexbox layouts and custom font loading to smart title casing and circular avatar integration. Whether you are building static landing pages or a dynamic CMS-driven blog, this skill helps you generate pixel-perfect 1200x630 and 1200x600 images that enhance your site's social media presence and SEO.

Key Features

Enforces Satori rendering requirements like mandatory flexbox and inline styles
Supports both static file-based routes and dynamic API routes for next/og
Provides optimized layout patterns for OpenGraph and Twitter card dimensions
Includes guidance for custom font loading and base64 image processing
41 GitHub stars
Implements smart title casing for automated CMS content formatting

Use Cases

Automating social media preview generation for content-heavy CMS platforms
Creating brand-consistent OG images for static landing and marketing pages
Generating unique social share cards for dynamic blog posts or e-commerce products

About

Key Features

Enforces Satori rendering requirements like mandatory flexbox and inline styles
Supports both static file-based routes and dynamic API routes for next/og
Provides optimized layout patterns for OpenGraph and Twitter card dimensions
Includes guidance for custom font loading and base64 image processing
41 GitHub stars
Implements smart title casing for automated CMS content formatting

Use Cases

Automating social media preview generation for content-heavy CMS platforms
Creating brand-consistent OG images for static landing and marketing pages
Generating unique social share cards for dynamic blog posts or e-commerce products