OG Image generation

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

<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?

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

        <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,
    },
  );
}
```


* [www.hotscots.app](https://www.hotscots.app)
* React site

![image|690x131](/uploads/short-url/3q3rTPUbCkkwiHzdmqIH4wHleeh.png)

Vercel Staff

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!

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?

Vercel Staff

You would probably use the React Meta component 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.

I did some more playing around and found I'm using vite, does the instructions change based on that?

Vercel Alum

Should still be relevant. Give it a go and let us know how you get on!

This topic is closed. It no longer accepts new replies.

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, }, ); } ``` * [www.hotscots.app](https://www.hotscots.app) * React site ![image|690x131](/uploads/short-url/3q3rTPUbCkkwiHzdmqIH4wHleeh.png)