To generate an Open Graph image, create a share-card image and point your page’s og:image metadata to its publicly available URL. For a site with a few stable pages, export one static image per page; for pages with changing titles or data, generate images from a route template. Then inspect the deployed page’s HTML and test the actual shared URL in the destination platform.
What an Open Graph image does
An Open Graph image is the image associated with a web page when it is represented in social and other sharing contexts. It is connected to the page by metadata in the document head; it is not automatically the same as the visible hero image. You can use the same asset for both, but that is a publishing choice.
The Open Graph Protocol describes its purpose as enabling a web page to become a rich object in a social graph. Its four basic properties are og:title, og:type, og:image, and og:url. It also describes og:description as optional and generally recommended. Open Graph Protocol
Choose a static image or a generated route
| Approach | Best fit | What you maintain | Trade-off |
|---|---|---|---|
| Static image file | A small number of stable pages, such as a homepage or fixed product page | A designed and exported asset for each page that needs a distinct card | Simple to review and art-direct; update the file when the page’s share image changes |
| Generated image route | Many pages with distinct titles, authors, products, or article data | A reusable image template, the data it uses, and its rendering/caching behavior | Consistent output can scale across routes, but requires implementation and validation |
Next.js documents both static image files and code-generated route images. The choice is an operational one: use static assets when there are few and stable cards; consider generation when page-specific output would otherwise require maintaining many files. Next.js metadata image conventions
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows 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 reinstall#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Design the image for a share card
Use the page’s recognizable subject or title, strong contrast, and type that remains legible when the image is displayed small. Keep important text and visual elements away from the edges: receiving platforms may resize or crop images differently. These are practical design choices, not universal platform requirements.
Starting dimensions and file limits
Next.js’s documentation, updated February 27, 2026, uses 1200 by 630 pixels in its generated Open Graph image example. Treat that as a practical starting point and a framework example, not a guarantee that every platform, messaging client, or card type will display it identically.
Under the documented Next.js file conventions, the maximum file sizes are 8 MB for opengraph-image and 5 MB for twitter-image. These are Next.js convention limits, not a statement of receiving-platform-wide limits. Check the current documentation for your framework version and the current requirements of each destination you support. The Next.js convention supports JPG, JPEG, PNG, and GIF files.
Add Open Graph metadata to the page
For a hand-authored page, put the properties in the document’s <head>. Set the title and type to match the page, make og:url identify the page you intend people to share, and use an absolute image URL that resolves to the deployed asset.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
<meta property="og:title" content="Page title">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/images/page-share.png">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:image:alt" content="A description of the image.">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">The first four properties are the protocol’s basic properties. The description is optional but generally recommended. The protocol also defines structured image properties for alternative text, MIME type, dimensions, and a secure URL. Provide image metadata when you know it; image alt text should describe the image rather than serve as a caption. A type such as article is illustrative—choose the value appropriate to the page. Open Graph Protocol property definitions
Generate images in Next.js App Router
Next.js supports a file convention for both static and generated Open Graph images in a route segment. Follow the current convention documentation for your installed Next.js version, since framework APIs can change.
Use a static file
- Place an image named
opengraph-image.jpg,opengraph-image.jpeg,opengraph-image.png, oropengraph-image.gifin the route segment that should use it. - Optionally place an
opengraph-image.alt.txtfile alongside it with descriptive alternative text. - Build and deploy the route, then inspect its rendered metadata and open the image URL to confirm it is available.
Next.js evaluates the file convention and adds corresponding metadata tags. This avoids manually maintaining the tag for that image in the route, but the resulting deployed page and asset still need checking.
Generate a route-specific image
For changing page data, add an opengraph-image.tsx file in the route segment and return an image response with ImageResponse from next/og. A minimal example for a fixed title is:
import { ImageResponse } from 'next/og'
export const alt = 'A share card for the Example article'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default function Image() {
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#10243a',
color: 'white',
fontSize: 64,
padding: 60,
}}
>
Example article
</div>
),
{ ...size },
)
}For a dynamic route, use its route parameters to obtain the page-specific title or other data and render that content in the image template. Ensure the output has a useful fallback if expected data is unavailable, and avoid putting content in the image that conflicts with the page’s current title.
The documented approach exports alt, size, and contentType and returns an image response. Next.js says generated images are statically optimized and cached by default unless dynamic APIs or uncached data are involved. Account for that when page data changes: verify that an updated page produces the intended card after deployment.
ImageResponse converts JSX-like content into a PNG and supports flexbox plus a subset of CSS properties. CSS Grid and other advanced layout features are outside the documented supported subset; build within the supported styles and consult the current ImageResponse API reference for version-specific details.
Verify the deployed page and preview
- Open the exact page URL that people will share and inspect the rendered HTML head. Confirm the intended
og:title,og:type,og:url, andog:imageappear in the deployed document—not only in a source template. - Open the image URL directly. Confirm it resolves to the intended asset and that the deployed output is the image format you expect.
- Use the destination platform’s current preview or debugging tool, where available, with the actual page URL. Platform behavior and tooling differ, so check that platform’s current documentation.
- After changing metadata or an image, retest the shared URL. A preview can remain stale because a recipient may display cached metadata; cache lifetime and refresh behavior are not universal.
Checking only the image file is not enough: the page must point to it in its rendered metadata, and the destination must successfully retrieve and process the shared page and image.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsRank #4
Why isn’t my link preview showing the right image?
- No image or an old image: Inspect the deployed page’s HTML head for the current
og:imagevalue. Confirm you are checking the shared route, not just the template or a local version. - The image URL is wrong or unavailable: Open the URL directly after deployment. Correct a typo, route mismatch, or missing asset before retesting the page preview.
- A generated image route fails: Test the deployed route itself and verify its rendering code, route data, and output. For a data-driven image, ensure the expected title or other inputs are available to the route.
- The destination still shows an earlier preview: Use its current debugging or re-scrape option if one exists, then test again. Caching behavior and refresh controls vary by platform; there is no universal cache interval to rely on.
- The preview looks cropped or text is hard to read: Adjust the design so its essential content is centered with breathing room and readable at a small display size. Validate it in the destinations that matter to your audience.
Or skip the browser setup
If your next task is to inspect a page’s rendered share metadata or capture a page for a workflow, ScreenshotNeo provides a website screenshot API and MCP server for developers. A screenshot can help you visually inspect a deployed page, but it does not replace checking the HTML head or testing the receiving platform’s preview behavior.
One GET request returns a PNG, JPEG, WebP, or PDF. For example, capture the page being checked:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpSee the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before capture; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up free for ScreenshotNeo.
Frequently Asked Questions
How do I create an Open Graph image for my website?
Create or generate a share-card image, make it available at a deployed URL, and add that URL in the page’s og:image metadata.
Does an Open Graph image have to be the page’s hero image?
No. It is a separate page metadata asset unless you deliberately choose to use the same image.
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.
