Generate social images with opengraph-image.tsx
The App Router reads opengraph-image files as social cards for each route. Export a small ImageResponse component that renders the title and brand, set size and contentType, and add route-level files where the default card is wrong. Confirm the rendered tags point at the generated image and that the image returns 200 with the expected dimensions.
Why this matters
A route-convention file renders the share card at build time.
Before you start
- Next.js App Router project
- Brand colours and a font that can be embedded at build time
How to apply it
Add the site-level card
Create app/opengraph-image.tsx exporting size { width: 1200, height: 630 }, contentType 'image/png' and a default function that renders the site name and tagline with ImageResponse.
Check: The homepage HTML contains an og:image URL pointing at the generated route.
Add route-level cards where they help
For blog posts, place an opengraph-image.tsx in the route folder and render the post title and author. Keep the component under the edge-safe dependencies the build already uses.
Check: Two different posts render different og:image URLs in their HTML.
Fetch the generated image
Request the og:image URL directly and check the status, content type and dimensions. A failed build-time render usually returns 404.
Check: curl -sI <og:image-url> returns 200 and content-type image/png.
Validate the share preview
Paste a page URL into a social card validator after deploy and confirm the image, title and description render together.
Check: The validator shows the generated image, not a placeholder or a 1200x630 default from another page.
Source: seo-mcp playbook · curated entry · report an error
Framework notes
nextjs-app
Create `app/opengraph-image.tsx` exporting `size`, `contentType` and a default `ImageResponse`; add route-level files where the card should differ.