og-image

Dynamic OG image generation and the full meta tag stack — one route, all pages covered. Your links stop looking broken when someone shares them.

Phase 1: Detect the Stack

Check the codebase:

• Framework: Next.js App Router / Pages Router / Astro / Remix / static HTML?
• Existing meta tags: Search for og:image, twitter:card in layout files
• Dynamic pages: Blog posts, product pages, skill pages — anything that needs per-page OG?

If meta tags already exist, audit them before changing anything.

Phase 2: Framework-Specific Setup

Next.js App Router (recommended path)

Create app/api/og/route.tsx:

import { ImageResponse } from 'next/og';