Next.js OG Image

Generates production-quality dynamic OG images using next/og (Satori under the hood) and wires up all necessary metadata. Covers multi-domain support, image rendering gotchas, and SEO best practices.

Workflow

1. Audit existing setup

Read:

• app/layout.tsx — check for metadata vs generateMetadata(), metadataBase, icon config
• app/opengraph-image.tsx — if it exists, look for Satori gotchas (see references/satori-gotchas.md)
• public/ — find the logo file and note its exact pixel dimensions (use python3 -c "import struct; d=open('public/images/logo.png','rb').read(); w,h=struct.unpack('>II',d[16:24]); print(f'{w}x{h}')")

2. Create app/opengraph-image.tsx

Use the template in assets/og-image-template.tsx as the starting point.