Install Nuxt OG Image

Using Nuxt SEO? This module is already installed for you.

1. Install the nuxt-og-image dependency to your project:

npx nuxi@latest module add og-image

2. Set a Site URL (optional)

The og:image property value must be an absolute URL, so if you prerender any of your pages, you will need to provide the module your site URL so that your OG Image can be correctly generated.

The easiest way to set a site URL is to provide it through your Nuxt config or an .env file.

export default defineNuxtConfig({
  site: {
    // production URL
    url: 'https://example.com',
  },
})

For more complex applications, learn more at the Nuxt Site Config docs.

3. Enable Nuxt DevTools (optional)

Nuxt OG Image uses Nuxt DevTools to provide a live preview of your OG Images.

export default defineNuxtConfig({
  devtools: { enabled: true },
})

4. Create your first image (optional)

Setup complete! Now get started with your first image.