OG Image generation

Help
1

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

<!-- Project information (URL, framework, environment, project settings) -->
* www.hotscots.app
* React site

![image|690x131](upload://3q3rTPUbCkkwiHzdmqIH4wHleeh.png)
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!

3

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?

4

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.

5

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

6

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