og-images_skill

Overview

This skill guides creation of dynamic OpenGraph and Twitter share images using Next.js' next/og ImageResponse. It covers layout patterns, asset loading and caching, custom fonts, title-casing rules, and Satori-specific constraints to produce reliable social previews. Use it to build consistent OG 1200x630 and Twitter 1200x600 images for static or dynamic pages.

How this skill works

The skill shows two approaches: file-based image routes for static pages and API routes for dynamic content. It explains how to fetch and cache avatars/logos, load .ttf fonts as ArrayBuffers, and pass them to ImageResponse. It also lists Satori rules and layout patterns so rendered images match social platform expectations and avoid runtime errors.

When to use it

• Generating OpenGraph images for static pages (file-based route)
• Generating dynamic social preview images (API route with query params)
• Creating Twitter/X card images with custom sizing
• Adding branded avatars/logos or custom fonts to social previews
• Ensuring Satori-compatible layout and rendering

Best practices

• Use export const runtime = "edge" for image routes to run on the edge
• Choose file-based routes for known-at-build-time titles and API routes for CMS-driven content
• Cache fetched images and font ArrayBuffers in a Map to avoid repeated network/file reads
• Follow the suggested layout: column flex, space-between, left-aligned title block, bottom-right avatar/logo
• Load fonts from public/fonts via new URL(...) and pass the ArrayBuffer to ImageResponse fonts option
• Apply smart title case for CMS content and keep known acronyms/brand capitalization exact

Example use cases

• Static About page OG image at app/about/opengraph-image.tsx with hardcoded title and local font
• Blog post preview using app/api/og/route.tsx?slug=post-slug that accepts title and slug query params
• Twitter card route producing 1200x600 images with circular avatar in bottom-right
• CMS-driven site where generateMetadata references /api/og?slug=... for dynamic OpenGraph metadata