Functions
Open Graph (OG) Image Generation
OG Image Generation
To assist with generating dynamic Open Graph (OG) images, you can use the Vercel @vercel/og library to compute and generate social card images using Vercel Functions.
Copy page
- Performance: With a small amount of code needed to generate images, functions can be started almost instantly. This allows the image generation process to be fast and recognized by tools like the Open Graph Debugger
- Straightforward syntax: You can define your images using HTML and CSS and the library will dynamically generate images from the markup
- Cost-effectiveness:@vercel/og automatically adds the correct headers to cache computed images on the CDN, helping reduce cost and recomputation
Supported features
- Basic CSS layouts including flexbox and absolute positioning
- Custom fonts, text wrapping, centering, and nested images
- Ability to download the subset characters of the font from Google Fonts
- Compatible with any framework and application deployed on Vercel
- View your OG image and other metadata before your deployment goes to production through the Open Graph tab
Runtime support
Vercel OG image generation is supported on the Node.js runtime.
Local resources can be loaded directly using fs.readFile. Alternatively, fetch can be used to load remote resources.
constfs=require('fs').promises;
// Process image data
There are limitations when using vercel/og with the Next.js Pages Router and the Node.js runtime. Specifically, this combination does not support the return new Response(…) syntax. The table below provides a breakdown of the supported syntaxes for different configurations.
constimageData=awaitfs.readFile('/path/to/image.png');
constloadLocalImage=async () => {
Requirements
Configuration
return new Response(…)
- Install Node.js 22 or newer by visiting nodejs.org
- Install @vercel/og by running the following command inside your project directory. This isn't required for Next.js App Router projects, as the package is already included:
- Fully supported.
- Fully supported.
- Does not support return new Response(…) syntax with vercel/og.
- Fully supported.
- Notes
- For Next.js implementations, make sure you are using Next.js v12.2.3 or newer
- Create API endpoints that you can call from your front-end to generate the images. Since the HTML code for generating the image is included as one of the parameters of the ImageResponse function, the use of .jsx or .tsx files is recommended as they are designed to handle this kind of syntax
- To avoid the possibility of social media providers not being able to fetch your image, it is recommended to add your OG image API route(s) to
Allow inside your
robots.txt file. For example, if your OG image API route is
/api/og/, you can add the following line:
Allow: /api/og/*If you are using Next.js, review
robots.txt to learn how to add or generate a
robots.txt file.
Getting started
Get started with an example that generates an image from static text using Next.js by setting up a new app with the following command:
background:'white',
Use the following code:
Then, based on the Open Graph Protocol, create the web content for your social media post as follows:
/>
Deploy your project to obtain a publicly accessible path to the OG image API endpoint.
Hello world
property="og:image"
content="https://og-examples.vercel.sh/api/static"
- Create a tag inside the of the webpage
- Add the property attribute with value og:image to the tag
- Add the content attribute with value as the absolute path of the /api/og endpoint to the tag
Every time you create a new social media post, you need to update the API endpoint with the new content. However, if you identify which parts of your ImageResponse will change for each post, you can then pass those values as parameters of the endpoint so that you can use the same endpoint for all your posts.
In the examples below, we explore using parameters and including other types of content with ImageResponse.
Examples
- Dynamic title: Passing the image title as a URL parameter
- Dynamic external image: Passing the username as a URL parameter to pull an external profile image for the image generation
- Emoji: Using emojis to generate the image
- SVG: Using SVG embedded content to generate the image
- Custom font: Using a custom font available in the file system to style your image title
- Tailwind CSS: Using Tailwind CSS (Experimental) to style your image content
- Internationalization: Using other languages in the text for generating your image
- Secure URL: Encrypting parameters so that only certain values can be passed to generate your image
Limitations
Last updated June 16, 2026
Technical details
- Only ttf, otf, and woff font formats are supported. To maximize the font parsing speed, ttf or otf are preferred over woff
- Only flexbox (display: flex) and a subset of CSS properties are supported. Advanced layouts (display: grid) will not work. See Satori's documentation for more details on supported CSS properties
- Maximum bundle size of 500KB. The bundle size includes your JSX, CSS, fonts, images, and any other assets. If you exceed the limit, consider reducing the size of any assets or fetching at runtime
Cross-link map: Open Graph \(OG\) Image Generation (/docs/og-image-generation)From the Vercel docs graph (built 2026-09-21T05:26:59.511Z), spanning vercel.com docs + KB, nextjs.org, ai-sdk.dev, and other Vercel documentation sites. Full graph as JSON: https://vercel.com/docs/graph.jsonSemantically closest pagesOG Image Generation: The Complete Customization Guide — Learn how to use custom fonts in your Vercel OG image, plus emoji, external images, non-Latin text, dynamic titles, andUsing an SVG image in your OG image — Learn how to use SVG embedded content to generate your OG images.Using Tailwind CSS with your OG Image — Learn how to use Tailwind CSS to style your OG images.Using emoji in your OG image — Learn how to use emojis to generate an OG image.@vercel/og Reference — This reference provides information on how the @vercel/og package works on Vercel.This page links to (6)robots.txt — API Reference for robots.txt file.Inspecting your Open Graph metadata — Learn how to inspect and validate your Open Graph metadata through the Open Graph deployment tab.Vercel Functions — Build API routes, webhooks, and agent request handlers with Vercel Functions, then test and debug them with Vercel CLI.Using the Node.js Runtime with Vercel Functions — Learn how to use the Node.js runtime to create functions and deploy Node.js servers on Vercel.OG Image Generation Examples — Learn how to use the @vercel/og library with examples.@vercel/og Reference — This reference provides information on how the @vercel/og package works on Vercel.Pages that link here (20)By site: nextjs (2) · vercel-kb (8) · vercel-web (2) · vercel-docs (8)From nextjsImageResponse — API Reference for the ImageResponse constructor.Metadata and OG images — Learn how to add metadata to your pages and create dynamic OG images.From vercel-kbUsing dynamic text as your OG Image — Learn how to pass the image title as a URL parameter.Encrypting parameters — Learn how to encrypt parameters so that only certain values can be passed to generate your image.Using an external image as OG image — Learn how to pass the username as a URL parameter to pull an external profile image for the image generation.OG Image Generation: The Complete Customization Guide — Learn how to use custom fonts in your Vercel OG image, plus emoji, external images, non-Latin text, dynamic titles, andUsing languages in your OG image — Learn how to use other languages in the text of your OG image.Using emoji in your OG image — Learn how to use emojis to generate an OG image.Using an SVG image in your OG image — Learn how to use SVG embedded content to generate your OG images.Using Tailwind CSS with your OG Image — Learn how to use Tailwind CSS to style your OG images.From vercel-webVercel Edge Functions are now generally availableIntroducing the Vercel Platforms Starter KitFrom vercel-docsInspecting your Open Graph metadata — Learn how to inspect and validate your Open Graph metadata through the Open Graph deployment tab.Frameworks on Vercel — Vercel supports a wide range of the most popular frameworks, optimizing how your application builds and runs no matter wFrontends on Vercel — Vercel supports a wide range of the most popular frontend frameworks, optimizing how your application builds and runs noFull-stack frameworks on Vercel — Vercel supports a wide range of the most popular backend frameworks, optimizing how your application builds and runs noNext.js on Vercel — Vercel is the native Next.js platform, designed to enhance the Next.js experience.Supported Frameworks on Vercel — Learn about the frameworks that can be deployed to Vercel.Glossary — Learn about the terms and concepts used in Vercel's products and documentation.Integration Approval Checklist — Review this checklist before submitting your native or connectable account integration for approval on the Vercel Market
Pricing
- Recommended OG image size: 1200x630 pixels
- @vercel/og uses Satori and Resvg to convert HTML and CSS into PNG
- @vercel/og API reference
Previous
Was this helpful?
