Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Next.js 16’s App Router, set social-preview titles and descriptions with a static metadata export or a route-aware generateMetadata function. Provide preview artwork either as a route-specific image file or with a generated image route such as opengraph-image.tsx. For generated images, await the promise-based params before using route data.
Choose how each route gets its social metadata
Next.js supports metadata exports in Server Components. Its documentation states: “The metadata object and generateMetadata function exports are only supported in Server Components.” Use the static object for values that do not vary by route; use the function when metadata depends on route parameters, fetched data, or parent metadata. Next.js resolves metadata during rendering. When a route can be prerendered and its metadata adds no dynamic behavior, the metadata is included in the initial HTML. Next.js metadata and OG images documentation.
Static metadata
For a route with fixed preview text and image, export a metadata object from its page or layout. Its openGraph fields can include a title, description, URL, site name, locale, and image details. Its twitter fields can define the card type, title, description, and images.
Route-aware metadata
Use generateMetadata when a page’s title, description, or image depends on its route or data. This lets a post, product, or other dynamic page expose its own values rather than repeating one site-wide preview. The function can also receive parent metadata when you need to build on values defined higher in the route tree. Next.js generateMetadata reference.
#1 Best Overall
Choose static artwork or a generated preview image
| Approach | Use it when | How it works |
|---|---|---|
| Static image file | The artwork is fixed for a route or route segment. | Add a supported image file such as opengraph-image.jpg or twitter-image.jpg. More-specific files deeper in the route tree take precedence over images from higher-level segments. |
| Generated image route | The image needs to include route data or other dynamic content. | Implement opengraph-image.tsx or twitter-image.tsx and return an image response, such as ImageResponse. |
| Explicit image metadata | You want to set image information in metadata rather than use the file convention. | Set the image under openGraph.images or twitter.images; file-based conventions can supply the associated image tags and properties automatically. |
These file conventions and image options are documented in Next.js Open Graph and Twitter image conventions.
Static image requirements
Static Open Graph and Twitter images support JPG/JPEG, PNG, and GIF. Keep each Open Graph image at or below 8 MB and each Twitter image at or below 5 MB; the Next.js documentation says exceeding the relevant limit causes a build failure. To provide image alternative text, place opengraph-image.alt.txt or twitter-image.alt.txt alongside the corresponding image.
Rank #2
Generated images and caching
A generated image file can export alt, size, and contentType. Next.js statically optimizes and caches generated images by default. Dynamic APIs, uncached data, or dynamic route configuration can change that behavior, so consider those dependencies when deciding whether a generated preview should be static or dynamic. Next.js image convention reference.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteUse promise-based route parameters in Next.js 16
In Next.js 16, the params argument passed to a generated image function is a promise. Await it before reading a slug or other route segment. For example, an Open Graph image route for app/blog/[slug]/opengraph-image.tsx can follow this pattern:
import { ImageResponse } from 'next/og'
type Props = {
params: Promise<{ slug: string }>
}
export default async function Image({ params }: Props) {
const { slug } = await params
return new ImageResponse(
<div>Preview for {slug}</div>,
{ width: 1200, height: 630 },
)
}Adapt the dimensions and design to your own preview artwork. The important Next.js 16 change is awaiting params before using its values. If you use generateImageMetadata to produce multiple image variants, the selected id passed to the image function is also promise-based in Next.js 16; await it before reading it. Next.js 16 upgrade guide and Next.js generateImageMetadata reference.
Preserve shared Open Graph values in nested routes
A child route that defines its own openGraph object replaces the parent’s entire openGraph object; nested fields are not merged automatically. A child can therefore lose inherited values such as the site name or locale if it sets only a title and image.
When routes need shared Open Graph fields, compose them explicitly into each route’s object. For example, spread a reusable shared object before route-specific values so the route’s title and images can override defaults while other shared fields remain present. Next.js metadata inheritance documentation.
Quick Recap
Check the generated page before relying on a preview
- Confirm each route has the intended title, description, and image source in its metadata or file convention.
- Check that nested routes retain shared Open Graph fields when they define their own object.
- For generated images in Next.js 16, await
paramsand, where applicable, the generated-imageid. - Keep static image files within their documented size limits and provide an alt-text file when needed.
- Remember that Next.js generates the route’s head tags, but social platforms control how and when they fetch and display those tags and images. Framework configuration alone does not guarantee a particular rendering or refresh behavior on every platform.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
