I’m trying to get OG Image Generation setup for my site and following the documentation and I’m a bit lost.
To begin the head it’s pointing to the following https://og-examples.vercel.sh/api/static in the example code. Is this the new site created earlier or would this be your existing site and the static is confusing me as well since nothing I created was static.
If I browse to http://localhost:3000/api/og as the documents suggest I’m routed to my notFound page
If I implement the above as shown it works, but is not what i placed in my app/api/log. Would I implement this into my existing app or do I stand up a new app?
I would see the sample code I placed in app/api/log
My Router in app.jsx. Would I need to update my vercel.json to account for api/log
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.
Thanks Aaron. I think you answered the big question on the setup. Since my page is a react page should the meta be in the index.html or on the component page itself?