Recommended Free Tools
In Next.js App Router, add an opengraph-image file to the route segment that should use it. Choose a static image for a fixed design, or create opengraph-image.tsx and return an ImageResponse when the image needs route-specific content. Next.js generates the corresponding Open Graph metadata for either convention.
Choose a static image or a generated image
Use a static asset when the same artwork should appear every time that route is shared. Use a generated image when its content should reflect a page title, post, product, or other route data. Both approaches use the App Router file convention; a nested route image takes precedence over one in a parent segment.
| Approach | Best for | What you maintain |
|---|---|---|
| Static file | Fixed artwork shared across a site or route segment | An image file in the relevant app directory |
| Generated route | Artwork that varies with page or content data | A route file, rendering code, and any data or assets it needs |
The examples below use the App Router. The Next.js guide and convention reference describe these methods at Metadata and OG images and opengraph-image and twitter-image; both pages state they were last updated February 27, 2026.
Add a static Open Graph image
Place a supported image file in the route segment it describes. For a site-wide default, use the App Router root; for a blog-wide image, put it in the blog segment; to customize one post, put an image in that post’s segment.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
-
For a site-wide App Router image, add a file such as
app/opengraph-image.jpg. -
For a blog section, add
app/blog/opengraph-image.jpg. -
For a specific dynamic post route, add the image under its matching route segment, for example
app/blog/[slug]/opengraph-image.png, if a single fixed image is suitable there. -
Run the project and inspect the generated page metadata or share preview to confirm the intended route uses the expected image.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
The convention supports .jpg, .jpeg, .png, and .gif. The Next.js convention reference sets an 8 MB maximum for a static Open Graph image file; a build fails if the file exceeds it. This is a Next.js file-convention constraint, not a universal social-platform size limit.
When a route has its own image, that more specific image wins over a parent segment’s image. This lets you provide a general default and replace it selectively without generating every image in code.
Rank #2
Generate an image with ImageResponse
Create opengraph-image.tsx in the route segment and export the image metadata alongside a default function returning ImageResponse. This example follows the official 1200 × 630 PNG configuration. Those dimensions are an example, not a requirement for every project.
import { ImageResponse } from 'next/og'
export const alt = 'About Acme'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default function Image() {
return new ImageResponse(
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
background: 'white',
fontSize: 64,
}}
>
About Acme
</div>,
{ ...size }
)
}With this file at app/about/opengraph-image.tsx, Next.js associates the generated image with the /about route and emits the related Open Graph metadata. The alt, size, and contentType exports describe the image for metadata output. Keep the component’s output dimensions consistent with size.
Use only supported styling
The renderer supports flexbox and a subset of CSS properties, but not every browser layout feature. In particular, the documentation says CSS grid does not work. Prefer flexbox and absolute positioning for layout, and inspect the actual output for text wrapping, image placement, and font rendering rather than assuming browser CSS will render identically.
For custom typography or a logo, the guide demonstrates loading local font files and embedding local image data. Keep asset loading compatible with the rendering environment and verify that the image route can access the assets at build or render time.
Make each route’s image reflect its content
For dynamic pages, put the file beneath the dynamic segment, for example app/posts/[slug]/opengraph-image.tsx. The current convention reference gives params as a promise; await it, then use the resulting slug to load the content used in the image.
import { ImageResponse } from 'next/og'
export const alt = 'Post preview'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
type Props = {
params: Promise<{ slug: string }>
}
export default async function Image({ params }: Props) {
const { slug } = await params
const post = await getPost(slug)
return new ImageResponse(
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
width: '100%',
height: '100%',
padding: 64,
background: '#f4f4f5',
color: '#18181b',
fontSize: 56,
}}
>
<div>{post.title}</div>
</div>,
{ ...size }
)
}getPost is application-specific: implement it using the project’s content source and handle a missing slug according to the site’s normal not-found behavior. Keep rendered text bounded and test titles with long words, punctuation, and multiple lines so the artwork remains legible.
Understand caching before relying on fresh content
Generated metadata images are statically optimized by default unless Dynamic APIs, uncached data, or configuration changes that behavior. The documentation describes these image routes as cached by default and notes that fetch options or route-segment options can alter static optimization. If an image depends on frequently changing external data, check the caching behavior of that specific data fetch and route configuration; do not assume the function runs anew for every social crawler request.
Generate multiple image variants
Use generateImageMetadata when one route needs multiple image outputs, such as variants with different alt text, dimensions, or MIME types. The metadata function returns the variants, and the image function receives the corresponding generated id.
The API reference says generateImageMetadata was introduced in Next.js 13.3.0. It also records that Next.js 16.0.0 changed the params and id passed to the image function to promises. Check the reference for the installed Next.js version before copying a signature into an older project: generateImageMetadata.
Check the rendered result
A successful build confirms that Next.js accepted the route convention; it does not guarantee that the final composition looks right in every sharing surface. Inspect the generated image itself, especially after changing fonts, content, or layout.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems-
Confirm the route-specific file is in the correct segment and has a supported extension.
-
Check that the page emits the expected Open Graph image URL, alt text, dimensions, and content type for a generated image.
-
Open the image URL directly and verify it returns an image rather than an error page.
-
Test long titles and missing content so dynamic layouts do not clip or render misleading output.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
If a parent image appears instead, check whether the nested route has the correctly named convention file and whether that route actually matches the URL.
Troubleshooting
Build fails on a static image
Check the file size first. The documented static Open Graph image limit is 8 MB. Compress or resize the asset, or use an appropriate supported image format, then rebuild.
The parent image appears on a nested route
Place the more specific image in the route segment represented by the URL. Verify the directory structure and filename spelling: the convention name is opengraph-image, not an arbitrary asset name.
The generated image route errors or displays no content
Confirm the file imports ImageResponse from next/og, returns an ImageResponse, and exports values compatible with the generated image. In dynamic routes, await params using the current documented signature. Handle absent route data instead of dereferencing a missing record.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, 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 minuteStyles or fonts render differently than expected
Replace unsupported layout techniques such as CSS grid with supported flexbox or positioning. Check that local fonts and image data are available to the image route, then inspect the produced image for clipping and wrapping.
Changes to source data do not show up immediately
Review the route’s static optimization and caching configuration, including whether its fetch is cached. Generated image routes are cached by default unless dynamic behavior or configuration changes that path, so select and verify the cache behavior appropriate to the content.
Or skip the browser setup
If your goal is to capture a page as a screenshot rather than generate a branded social card in Next.js, ScreenshotNeo takes a URL in one API request. This does not replace route-specific Open Graph artwork; it is an alternative when a direct page capture is what you need.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, with response headers identifying the page verdict and billing status. Its MCP server provides screenshot and PDF tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Does an Open Graph image file automatically add the metadata in Next.js?
Yes. The App Router file convention derives the image URL and associated Open Graph metadata from the route-segment file.
Can a static Open Graph image use a WebP file?
The documented file convention lists .jpg, .jpeg, .png, and .gif; WebP is not among the listed extensions.
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.
