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 →For a Next.js site on Vercel, add Open Graph metadata through the App Router Metadata API: export a metadata object for fixed values, or generateMetadata for page data that changes by route. Set an absolute, publicly reachable image URL, deploy, and inspect the production page’s rendered head. Hosting in India does not require a different Open Graph configuration.
Choose static or dynamic metadata
Next.js generates the relevant head tags from its Metadata API. Use metadata when the values are fixed; use generateMetadata when a title, description, URL, or image depends on a route or fetched content. These exports are supported only in Server Components, and a route segment must not export both.
As an Amazon Associate I earn from qualifying purchases.
| Approach | Use it when | Where values come from |
|---|---|---|
metadata |
The values are fixed for the layout or page. | A TypeScript object in app/layout.tsx or a relevant app/**/page.tsx. |
generateMetadata |
Metadata depends on a slug, record, or other route data. | An asynchronous function that can read route parameters and fetch page information. |
For a basic setup, export metadata from a Server Component in the App Router. Adapt the example values and URLs to your real site:
Free tools Windows power users keep installed
One-click scans. No signup required.
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Example page',
description: 'A concise description of this page.',
openGraph: {
title: 'Example page',
description: 'A concise description of this page.',
url: 'https://www.example.com/example-page',
siteName: 'Example',
images: [
{
url: 'https://www.example.com/og/example-page.png',
width: 1200,
height: 630,
alt: 'A useful description of the image',
},
],
locale: 'en_IN',
type: 'website',
},
}The fields shown set the page title and description along with Open Graph title, description, URL, site name, image, locale, and content type. The image URL in the openGraph object must be absolute. Choose a locale that reflects the page’s language and audience; en_IN is only an example, not a setting implied by Indian hosting. See the Next.js Metadata API reference.
Generate metadata from route data
For articles, products, or other pages whose content varies by slug, build metadata from the same record that supplies the page. Use the record’s actual public URL and a publicly reachable image URL.
import type { Metadata } from 'next'
export async function generateMetadata({ params }): Promise<Metadata> {
const { slug } = await params
const article = await getArticle(slug)
const url = `https://www.example.com/articles/${article.slug}`
return {
title: article.title,
description: article.summary,
openGraph: {
title: article.title,
description: article.summary,
url,
siteName: 'Example',
images: [{ url: article.ogImageUrl, alt: article.ogImageAlt }],
type: 'article',
},
}
}getArticle is an application-specific function; replace it with your data-access code. Match the params type and signature to your installed Next.js version and route conventions. Current Next.js documentation uses promise-based route parameters in relevant examples, so older signatures should not be copied without checking your version. Matching fetch requests used by metadata, layouts, pages, and Server Components are memoized by Next.js. Dynamic metadata may stream after the initial UI; HTML-limited bots such as facebookexternalhit wait for metadata resolution instead. See the API reference.
Use a colocated image file when appropriate
If an image is fixed rather than derived from data, Next.js can generate its Open Graph tags from a file convention. Add app/opengraph-image.jpg for a site-wide image or place a file such as app/blog/opengraph-image.png in a route folder for a more specific one. A deeper route image takes precedence over an image above it.
- Supported file formats include JPG, JPEG, PNG, and GIF.
- The documented maximum image size is 8 MB; exceeding the limit causes the build to fail.
- For a generated image, create
opengraph-image.tsxin the route segment and return an image response. Next.js recommendsImageResponsefromnext/ogas the easiest path. - Export
alt,size, andcontentTypewhere appropriate. Generated images are statically optimized and cached by default unless Dynamic APIs or uncached data make them dynamic.
File-based metadata has higher priority than config-based metadata. Consult the current Open Graph and Twitter image file convention and the Metadata and OG images guide for exact behavior.
Account for nested routes and Vercel URLs
A child route that defines its own openGraph object replaces the parent’s Open Graph object as a whole; it does not automatically merge individual fields. If the child needs shared defaults, include them explicitly in the child’s object. This is a common reason a nested page loses a parent image or description.
Use the public production hostname for page and image URLs rather than a local or preview address. This is practical deployment guidance: the image needs an absolute URL, and the shared URL should identify the public page. The reviewed Next.js documentation does not define a special Vercel configuration or India-specific tag syntax. India may matter to your audience and content, but hosting location alone does not establish a locale such as en_IN.
Verify the deployed page and troubleshoot previews
- Deploy the change to the public Vercel production hostname.
- Inspect the rendered document’s
<head>and confirm the page-specificog:title,og:description,og:url, andog:imagevalues. Check that the image URL is absolute and points to the intended asset. - If values are missing or wrong, check that the export is in a Server Component, that a route segment does not export both
metadataandgenerateMetadata, and that the right route segment supplies the values. - If a child page unexpectedly loses shared Open Graph fields, inspect its
openGraphobject and explicitly include the defaults it needs. - If using a file convention, verify the image’s route location, format, and size against the documented limit; check build output for an oversized-file failure.
- Test the production URL with the relevant social platform’s current preview or debugging tool. Social apps can use different crawlers and caches; their current refresh behavior is not established here, so do not assume a new deployment immediately changes an existing preview.
When metadata is dynamic, remember that rendering behavior differs by bot: Next.js documents that HTML-limited bots such as facebookexternalhit block until metadata resolves, while metadata for other dynamic pages may stream after the initial UI. A social preview that is wrong should therefore be checked against the deployed HTML and the platform’s own current preview tooling, not inferred from the browser view alone. The official Next.js metadata tutorial provides an additional App Router walkthrough.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteOr skip the browser setup
To capture a page as a screenshot after deployment, use ScreenshotNeo’s one-request API. Replace the example URL with your production page and provide your API key:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://www.example.com/example-page -o shot.webpSee the ScreenshotNeo API documentation. ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks and failed loads, including blank pages and timeouts, are not billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Frequently Asked Questions
Does hosting a Next.js site in India change its Open Graph tags?
No India-specific configuration is documented in the reviewed Next.js references. Choose locale and language based on the page and audience, not hosting location.
Recommended Free Tools
Can a route export both metadata and generateMetadata?
No. A route segment must use one or the other.
Why did a nested page lose the Open Graph image set in its parent layout?
A child route’s own openGraph object replaces the parent object. Include any shared fields the child still needs.
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.
