In Next.js 16’s App Router, set route-specific social titles and descriptions with metadata or generateMetadata, and provide preview artwork either as image files or generated image routes. For generated images, await the route’s params promise before using its values. These patterns let shared links reflect the page being shared, while the social platforms themselves control how previews ultimately appear.
Choose how each route gets its metadata
Next.js supports metadata in Server Components through either a static metadata object or a route-aware generateMetadata function. The documentation states: “The metadata object and generateMetadata function exports are only supported in Server Components.” See the Next.js metadata documentation.
As an Amazon Associate I earn from qualifying purchases.
- Use a static
metadataexport when a route’s title, description, and social details do not depend on route data. - Use
generateMetadatawhen values depend on parameters, external data, or metadata supplied by a parent route. It can also accept parent metadata so you can compose route-specific values with shared ones. - Use file-based metadata conventions when the preview artwork is best represented by a file placed in the relevant App Router segment.
Next.js resolves metadata while rendering. If a route can be prerendered and metadata does not introduce dynamic behavior, the resulting metadata is included in the initial HTML. This is useful for preview consumers that read the page’s HTML, but does not guarantee that a social platform will display the preview exactly as authored.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Set Open Graph and Twitter Card fields
Open Graph metadata can describe the page title, description, URL, site name, locale, and preview images, including image dimensions and alt text. Twitter Card metadata can specify the card type, title, description, and images. The Next.js metadata reference shows a Twitter image with an absolute URL; use a publicly reachable image URL when supplying an image explicitly.
#1 Best Overall
A static route can export both sets of fields. For example, place this in a Server Component page when the values are fixed:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Product name',
description: 'A concise description of this product.',
openGraph: {
title: 'Product name',
description: 'A concise description of this product.',
images: ['https://example.com/product-preview.jpg'],
},
twitter: {
card: 'summary_large_image',
title: 'Product name',
description: 'A concise description of this product.',
images: ['https://example.com/product-preview.jpg'],
},
}Replace the example values and URL with information and an image that belong to your site. For route-dependent values, return equivalent metadata from generateMetadata after loading the route data.
Rank #2
Prevent nested routes from losing Open Graph fields
Metadata can inherit from a parent route, but nested objects are not always merged field by field. In particular, when a child defines its own openGraph object, that object replaces the parent’s entire openGraph object. A child that sets only a route-specific title can therefore lose parent Open Graph image or site-wide fields. The behavior is documented in the metadata inheritance reference.
Compose shared values explicitly in each child’s metadata. A common object makes the intent clear:
const sharedOpenGraph = {
siteName: 'Example Site',
images: ['https://example.com/default-preview.jpg'],
}
export const metadata = {
openGraph: {
...sharedOpenGraph,
title: 'Route-specific title',
description: 'Route-specific description.',
},
}For data-dependent routes, apply the same composition inside generateMetadata; include every shared field the child needs rather than relying on an implicit nested merge.
Choose static image files or generated previews
Use a static file when the artwork is fixed; generate an image when it needs to incorporate a slug, title, product, article, or other route data. Next.js creates the corresponding head tags for the route from these file conventions. A more deeply placed file applies to a more specific route than a higher-level file.
| Approach | Use it when | Route and metadata behavior |
|---|---|---|
| Static image convention | The image is fixed for the route or segment. | Place opengraph-image.jpg or twitter-image.jpg in the App Router segment. Next.js supplies the associated metadata tags. |
| Generated image convention | The preview should be assembled from route data or other inputs. | Implement opengraph-image.tsx or twitter-image.tsx; the route can export image alt text, size, and content type. |
| Explicit metadata image | You want to specify image URLs as part of route metadata. | Set openGraph.images and/or twitter.images in the metadata export. This makes image selection explicit in the metadata code. |
The supported static image extensions are JPG/JPEG, PNG, and GIF. Keep an Open Graph image file at or below 8 MB and a Twitter image file at or below 5 MB; exceeding the documented limit causes a build failure. These limits and conventions are described in the Next.js Open Graph and Twitter image documentation.
Recommended Free Tools
Generate a route-specific image in Next.js 16
In Next.js 16, the generated image function receives params as a promise. Await it before accessing a route segment. For a route such as app/products/[slug]/opengraph-image.tsx, a minimal pattern is:
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
style={{
display: 'flex',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
background: 'white',
fontSize: 48,
}}
>
Product: {slug}
</div>,
)
}This example displays the slug, not a polished design or fetched product title. In a real route, load the relevant data and render its meaningful title or other identifying content. The image convention supports generated files named opengraph-image.tsx and twitter-image.tsx; generated routes can also export alt, size, and contentType. Consult the image convention documentation for the supported exports and response details.
If you use generateImageMetadata to create multiple image variants, Next.js 16 also passes the chosen image id to the image function as a promise. Await it before reading the selected variant, as described in the generateImageMetadata reference.
Provide useful image alt text
For convention-based images, a static image can have a companion opengraph-image.alt.txt or twitter-image.alt.txt file. A generated image can export alt. Use text that describes the image’s relevant content, rather than treating alt text as another place to repeat the page title. The available options are documented in the image convention reference.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Understand generated-image caching
Generated image routes are statically optimized and cached by default. Dynamic APIs, uncached data, or dynamic route configuration can change that behavior. Decide whether a preview must vary at request time before depending on data that prevents static optimization; for many pages, a build-time image generated from stable route data is simpler. See the Next.js image convention documentation for the conditions affecting caching.
Check the result at the route level
- Confirm that the target route returns the intended title, description, Open Graph fields, and Twitter Card fields in its rendered HTML.
- For convention-based images, verify the route-specific image file is in the intended segment and that its extension and file size meet the documented requirements.
- For generated images, confirm the route parameters and any variant identifier are awaited before use, and that the resulting image contains the expected route content.
- Review nested metadata for child-level
openGraphobjects that replace parent fields, then explicitly compose shared values where needed.
These checks establish what Next.js is producing. Social platforms control their own fetching, caching, and presentation, so correct framework metadata alone does not establish exactly when a platform will refresh a preview or how it will render it.
Quick Recap
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.
