OG Image generation

Help
2

Hi there!

If you’re looking to generate your own image, the URL in <meta content="https://... should point to your full production URL.

For example, if you put https://example.com/api/og-images/log in the metadata for your page, you should be able to visit /api/og-images/log and see the image you want, and your app should deploy to example.com in production.

Here’s an example using Next.js and app router:

  • /api/image implements a serverless function that returns images using @vercel/og
  • The home page Implements a page that points to /api/image for its OG image.

The snippet you posted looks like the Next.js example. If you’re not using Next.js:

  • See the Other Frameworks code examples.
  • You’ll need to import ImageResponse from @vercel/og
  • You may need to put the serverless function in the /api folder of your project (not /app/api).

I don’t think you’ll need to update vercel.json as long as you keep the /api prefix in the URL, but you’ll probably need to run vercel dev on the command line to serve the serverless function during development.

I hope you may find some of this info helpful!

5 Likes