Free tools Windows power users keep installed
One-click scans. No signup required.
Set an og:image value for each page in the HTML metadata that page serves. In the Next.js App Router, use a route-specific opengraph-image file for fixed artwork, an opengraph-image.tsx handler for images generated from route data, or the Metadata API when the image URL belongs in your page metadata.
Choose the right method
| Use case | Next.js approach | Main trade-off |
|---|---|---|
| Fixed image for a route or route subtree | A static opengraph-image file in that route segment |
Simple to manage, but each page needing unique artwork needs its own asset. |
| Consistent artwork design populated with each page’s data | opengraph-image.tsx with ImageResponse |
Reuses a template, but depends on the handler, its data, fonts, and deployed runtime. |
| Image URL already comes from page metadata or a CMS | openGraph.images in metadata or generateMetadata |
Fits metadata-driven pages; nested Open Graph objects can replace inherited fields. |
The framework-independent requirement is the same whichever framework you use: each page’s HTML response must contain metadata pointing to the image intended for that page. A site-wide default does not by itself specify different images for individual pages.
Use a static image for a route
In the Next.js App Router, add an image named opengraph-image.jpg, opengraph-image.jpeg, opengraph-image.png, or opengraph-image.gif to the route segment that should use it. Next.js recognizes the convention and generates the corresponding Open Graph tags, including the image URL, type, width, and height. A file in a more specific segment takes precedence over one higher in the route tree.
app/
opengraph-image.jpg # site default
about/
opengraph-image.jpg # /about-specific image
articles/
[slug]/
opengraph-image.tsx # generated for each articleFor example, app/about/opengraph-image.jpg supplies the image for the About route, while the root-level file can serve as a default for routes without a more specific image. Keep the file in the segment corresponding to the route. To provide image alt text, add opengraph-image.alt.txt alongside the image.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
Generate an image from dynamic route data
For pages such as /articles/[slug], where each article should have a different image built from its title or other data, create opengraph-image.tsx in the route segment and generate the image using the route parameters and article data. Next.js documents ImageResponse from next/og for returning the generated image.
A handler’s essential shape is:
import { ImageResponse } from 'next/og'
export default async function Image({ params }) {
const { slug } = await params
const article = await getArticle(slug)
return new ImageResponse(
<div style={{ display: 'flex', width: '100%', height: '100%' }}>
<h1>{article.title}</h1>
</div>,
{ width: 1200, height: 630 }
)
}This is a structural example: connect getArticle to your own content source and use the route-parameter shape required by your Next.js version. The documented image-generation example uses 1200 × 630 dimensions; treat that as an implementation example, not a universal social-platform requirement.
Generated image handlers are statically optimized and cached by default unless request-time APIs, uncached data, or dynamic configuration changes that behavior. Make sure the content source, fonts, and output are available in the deployment environment: social crawlers need to be able to fetch the generated image endpoint.
Set the image through metadata
Use the Metadata API when an image URL naturally belongs to the page’s metadata flow. A static page can set openGraph.images in its metadata object; a page whose image depends on fetched route data can set it in generateMetadata.
export const metadata = {
openGraph: {
title: 'About',
description: 'Learn about our team.',
images: ['/images/about-share.jpg'],
},
}For dynamic routes, return the corresponding page data and image URL from generateMetadata. Ensure the URL resolves to the intended image and is publicly accessible to the service that builds the share preview.
Watch out for nested metadata inheritance: when a child segment defines an openGraph object, it replaces the parent’s Open Graph fields as a group. If the child sets only an image but should retain the parent title, description, or other Open Graph values, include those fields explicitly—for example, by spreading a shared metadata object. If the child does not define openGraph, the parent’s Open Graph fields are inherited.
Check the rendered page and image
- Open the exact page URL and inspect its rendered HTML head or framework output. Confirm the
og:imagevalue points to that page’s intended image, rather than only the site default. - Check that the image URL is absolute in the rendered metadata and publicly fetchable from the deployed site. For generated images, verify that the route parameters select the correct content and that the image endpoint responds in production.
- If the page uses nested metadata, confirm its title and description are still present after the child route’s Open Graph metadata is applied.
- Check the share preview using the intended social service’s current preview or debugging facility. Preview caching and crawler behavior vary by platform; a correct HTML tag alone does not establish how a specific platform will cache or display it.
Or skip the browser setup
If you need a screenshot of a page to inspect its rendered appearance while checking a share-card implementation, ScreenshotNeo can capture it with one GET request. This does not set the page’s og:image metadata; use the Next.js methods above for that.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/articles/my-post -o shot.webpSee the ScreenshotNeo API documentation for options. It accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status. ScreenshotNeo also has an MCP server with screenshot and page-information tools for AI agents. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
