---
title: "Generate social images with opengraph-image.tsx"
description: "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."
url: "https://seo-mcp.io/t/generate-social-images-with-opengraph-image-tsx"
---

# 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.

## Prerequisites

- Next.js App Router project
- Brand colours and a font that can be embedded at build time

## Steps

1. **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.
2. **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.
3. **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.
4. **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 on 2026-10-19: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

Canonical: https://seo-mcp.io/t/generate-social-images-with-opengraph-image-tsx