OG image generation is the process of creating the image that appears in a webpage’s link preview and making it available through that page’s og:image metadata. The image may be a reusable static graphic or a page-specific image generated from code and content. It is an image asset—not the metadata itself.
What an OG image does—and what it does not do
Open Graph (OG) metadata describes a webpage so platforms that share or display links can represent it as a rich preview. The OG image is the visual part of that preview: a page’s og:image property points to an image URL. Other metadata describes the page’s title, type and URL. The Open Graph Protocol describes its purpose as enabling a webpage to become “a rich object in a social graph.”
Generating an OG image therefore means producing an image suitable for that role, then publishing it at a URL that the page’s metadata references. Making an image alone does not add the required metadata to a page, and adding metadata does not create the image file.
The core Open Graph properties
The Open Graph Protocol identifies four basic required properties:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
og:title: the title associated with the page.og:type: the kind of object the page represents.og:image: the URL of an image representing the page.og:url: the page’s canonical URL.
og:image:alt is recommended when an OG image is present. It provides a description of the image; it is not a replacement for the image URL. The protocol also defines structured image properties, including MIME type, dimensions, an HTTPS image URL and alt text. If consumers encounter conflicting values for a property, the first value takes precedence.
Choose a static image or generate one from data
The main decision is whether your pages can share a designed graphic or need an image tailored to each page. Both approaches can work; choose based on how the site is published and how much page-specific information the preview should show.
Static image: design once, reuse where appropriate
Create an image in a design tool, upload it to a location that serves it at a public URL, and set that URL in the page’s og:image property. This is usually suitable for a small site, a landing page, or a set of pages whose previews do not need different titles, photographs or other data. It is straightforward to inspect and maintain, but each distinct design or page-specific image needs to be created and published.
Generated image: render a page-specific graphic
A generated image is rendered from code and page data, such as a title or other content chosen for a particular route. This can make many pages consistent without hand-designing each image. It also adds implementation work: your image route or build process must receive the right content, render a supported layout, and return an image at a stable URL that the page can reference.
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 minuteNext.js documents both file-based OG assets and code-generated images. Its opengraph-image convention can use image files, while a file such as opengraph-image.tsx can generate an image. Depending on the implementation, generation may happen at build time or when a request arrives. Cloudinary, by contrast, offers a browser-based Open Graph generator for image and text and says developers can generate OG images programmatically through its API; it is one vendor option, not a requirement.
How Next.js ImageResponse generation works
For a project already using Next.js, ImageResponse turns JSX and supported CSS into a PNG. A typical implementation exports an image response from a route or metadata image file, using page data to build the content. This is not a general-purpose browser screenshot: ImageResponse renders a supported subset of HTML and CSS, so layouts that work in a browser are not necessarily supported in its image renderer.
The current Next.js ImageResponse API defaults to 1200 × 630 pixels. Treat that as a framework default, not a universal social-platform rule. Its reference documents flexbox, absolute positioning, text wrapping, centering, custom fonts and nested images among supported capabilities. It explicitly says CSS grid is unsupported and gives a maximum bundle size of 500KB.
Illustrative route shape
The exact export and file location depend on the Next.js version and route convention you use. In the documented file convention, a generated image file can return an ImageResponse whose JSX contains the dynamic title:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #3
import { ImageResponse } from 'next/og'
export const alt = 'Article preview image'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image() {
return new ImageResponse(
(
<div
style={{
display: 'flex',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
background: '#101827',
color: 'white',
fontSize: 64,
padding: 60,
}}
>
A page-specific title
</div>
),
{ ...size },
)
}This example illustrates the JSX-and-CSS rendering pattern; replace the text with data for the route and follow the current Next.js reference for the exact convention used by your project. Keep the layout within ImageResponse’s supported features and bundle-size limit. If the image must be generated from a request parameter or remote data, account for that data source and the runtime behavior of the route rather than assuming every image is built in advance.
Set metadata that points to the generated asset
However you create the file, the page needs metadata that references the resulting image and identifies the page. The following head markup shows the essential relationship; replace example values with the actual page URL and a publicly accessible image URL.
<meta property="og:title" content="A page-specific title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:image" content="https://example.com/article-og.png" />
<meta property="og:image:alt" content="A description of the preview image" />The example uses a placeholder domain and illustrates the markup only. In a live site, the og:url should represent the canonical page URL, while og:image should resolve to the intended image. Keep title, page data and image in sync: a generated image with the wrong page title can make a technically valid preview misleading.
Pick dimensions for the platform, not by habit
There is no single dimension established here as a universal requirement. The appropriate size depends on the target platform and the image-generation workflow. Two documented figures illustrate why it is worth separating a framework default from a platform requirement.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
| Guidance | What it means | How to use it |
|---|---|---|
| 1200 × 630 pixels | Current Next.js ImageResponse default width and height, also shown in its API example. | A practical starting point for a Next.js-generated image, not proof that every platform requires this exact size. |
| 1200 × 627 pixels minimum | LinkedIn help guidance for its sharing module; that page lists JPG, PNG or GIF as supported formats. | Check this platform-specific minimum when preparing an image for LinkedIn. The accessed guidance does not state a publication year. |
These dimensions are close but not identical. Do not infer that matching one ratio guarantees identical cropping or display on every service. Confirm the intended platforms’ current specifications when dimensions or format are important.
Validate a generated OG image before relying on it
Check the result at both layers: the image itself and the page metadata that points to it. A page may load normally in a browser yet still have an incorrect image URL, stale metadata, or an image route that fails when requested independently.
- Open the image URL directly and confirm it returns the intended image rather than an error or blank response.
- Inspect the rendered page head and verify the four basic properties are present with values for the correct page.
- Check that
og:image:altdescribes the image when one is provided. - For generated images, test pages with short and long titles and any other content variations your template accepts.
- Check the target platform’s current guidance for acceptable dimensions and formats; do not assume one platform’s recommendation applies everywhere.
- After changing image code or metadata, verify the current response rather than relying on a preview that may not reflect the latest version.
A browser screenshot can help you inspect what a page looks like, but it is not a substitute for checking the image asset and OG metadata separately. ScreenshotNeo is a website screenshot API and MCP server, not an OG image generator; it can be useful when you need a rendered view of a page as part of a visual check. Its documented features include accepting cookie-consent banners and removing known consent platforms, newsletter popups and chat widgets before capture, with each step switchable.
Or skip the browser setup
If you want a rendered screenshot to inspect a page while checking its preview setup, ScreenshotNeo can return an image or PDF from a single request. This captures the webpage; it does not create the page’s Open Graph metadata or replace publishing an OG image.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpSee the ScreenshotNeo documentation for request parameters. Cookie banners, popups and chat widgets are removed before the shot; bot checks, blank pages and failed loads are never billed. Its MCP server lets AI agents take screenshots, and its Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, then sign up for 1,000 free screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common implementation problems
The preview has no image
Check that og:image is present in the rendered document head and points to the intended image URL. Then open that URL directly. If the image is generated dynamically, check the route’s response and whether it renders successfully for the page’s data.
The image is blank or missing some content
Inspect the generated image itself and reduce the case to the simplest layout that reproduces the issue. In Next.js ImageResponse, use supported CSS; the reference explicitly excludes CSS grid. Confirm any content or nested image used by the layout is available to the renderer.
Generation fails after adding assets or fonts
Review the ImageResponse bundle against its documented maximum of 500KB. The Next.js reference documents custom fonts as supported, but added resources still need to fit the constraints of the implementation.
The image looks wrong on one sharing platform
Separate an asset-generation problem from a platform presentation issue. Verify the actual image, then compare its dimensions and format with that platform’s current help guidance. The LinkedIn guidance cited here specifies a minimum of 1200 × 627 pixels and JPG, PNG or GIF; it does not establish requirements for other platforms.
The image shows outdated page content
Check whether your workflow generated the image at build time or request time, and verify that the metadata points to the current asset. A build-time image may need a rebuild after content changes; a request-time route depends on its live data and rendering path. The correct remedy depends on which workflow the site uses.
Decide which generation workflow fits
- Use a static graphic when the same image can represent several pages and you prefer direct design-tool control.
- Use code generation when previews need to reflect route-specific content and the site can support a rendering route or build step.
- Use a browser-based generator such as Cloudinary’s when a visual editing workflow suits the task; its availability does not make it a protocol requirement.
- For Next.js ImageResponse, confirm CSS support, bundle size and the generation timing before committing to a complex template.
- For every approach, publish the image at a working URL and supply accurate OG metadata for the page.
Frequently Asked Questions
Is an OG image the same thing as an Open Graph tag?
No. The image is a file or generated asset; the og:image tag is metadata that points to it.
Does OG image generation require Next.js?
No. Next.js documents one file-based and code-generated workflow, while static graphics and other vendor tools are also options.
Recommended Free Tools
Can an OG image be generated for each page?
Yes. A code-based workflow can render an image from page-specific data, provided the site publishes the result and references it in that page’s metadata.
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.
