[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Help](/c/help/9) # OG Image generation 154 views · 10 likes · 6 posts Arbyruns (@arbyruns) · 2025-02-14 <!-- Questions that get answered the fastest are the ones with relevant info included in the original post. Be sure to include all detail needed to let others see and understand the problem! --> I'm trying to get OG Image Generation setup for my site and following the [documentation](https://vercel.com/docs/functions/og-image-generation#open-graph-og-image-generation) 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 ``` <head> <title>Hello world</title> <meta property="og:image" content="https://og-examples.vercel.sh/api/static" /> </head> ``` 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? <!-- Current versus Expected behavior --> I would see the sample code I placed in `app/api/log` <!-- Code, configuration, and steps that reproduce this issue --> My Router in app.jsx. Would I need to update my `vercel.json` to account for `api/log` ``` <BrowserRouter> ... <Route path="*" element={<AboutModal />} /> </Routes> </div> </BrowserRouter> ``` ```` import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. export async function GET() { return new ImageResponse( ( <div style={{ fontSize: 40, color: 'black', background: 'white', width: '100%', height: '100%', padding: '50px 200px', textAlign: 'center', justifyContent: 'center', alignItems: 'center', }} > 👋 Hello </div> ), { width: 1200, height: 630, }, ); } ``` <!-- Project information (URL, framework, environment, project settings) --> * www.hotscots.app * React site  Aaron Morris (@amorris) · 2025-02-14 · ♥ 5 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](https://github.com/AAorris/og-image-101/blob/main/app/api/image/route.tsx) implements a serverless function that returns images using `@vercel/og` - [The home page](https://github.com/AAorris/og-image-101/blob/main/app/page.tsx) 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! Arbyruns (@arbyruns) · 2025-02-14 · ♥ 1 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? Aaron Morris (@amorris) · 2025-02-14 · ♥ 2 You would probably use the [React Meta component](https://react.dev/reference/react-dom/components/meta#usage) within the component page, since it's likely you'll want a different image for different pages! The end result should be that you see the `og:image` meta tag in the document `<head>` with a full URL in it, and visiting that URL shows you an image. Arbyruns (@arbyruns) · 2025-02-16 @amorris I did some more playing around and found I'm using vite, does the instructions change based on that? Pauline P. Narvas (@pawlean) · 2025-02-17 · ♥ 2 [quote="Aaron Morris, post:2, topic:5866, username:amorris"] The snippet you posted looks like the Next.js example. If you’re not using Next.js: [/quote] :point_up: Should still be relevant. Give it a go and let us know how you get on!
