Install Nuxt OG Image · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Integrations

-
-

Getting Started

# Install Nuxt OG Image

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/getting-started/installation.md)

## [Setup Module](#setup-module)

Want to know why you might need this module? Check out the

.

To get started with Nuxt OG Image, you need to install the dependency and add it to your Nuxt config.

nuxt

npm

yarn

pnpm

bun

bash

`npx nuxt module add og-image`

bash

`npm i nuxt-og-image`

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

```
export default defineNuxtConfig({
  modules: [
    'nuxt-og-image',
  ],
})
```

bash

`yarn add nuxt-og-image`

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

```
export default defineNuxtConfig({
  modules: [
    'nuxt-og-image',
  ],
})
```

bash

`pnpm i nuxt-og-image`

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

```
export default defineNuxtConfig({
  modules: [
    'nuxt-og-image',
  ],
})
```

bash

`bun i nuxt-og-image`

You will need to manually add the module to your Nuxt config.

nuxt.config.ts

```
export default defineNuxtConfig({
  modules: [
    'nuxt-og-image',
  ],
})
```

## [Verifying Installation](#verifying-installation)

Out-of-the-box the module will not do anything until you configure it.

You can verify the module is installed correctly by checking the [Nuxt DevTools](https://devtools.nuxt.com/) for the OG Image tab.

The DevTools is the starting point, providing a playground to design and test your OG Image with full HMR support.

## [Configuration](#configuration)

OG Images must be served with absolute URLs, if you're prerendering, you will need to provide a Site URL.

nuxt.config.ts

```
export default defineNuxtConfig( site: {  url: 'https://example.com',  name: 'My Awesome Website'  }, })
```

.env

```
NUXT_SITE_URL=https://example.comNUXT_SITE_NAME=My Awesome Website
```

For more advanced configurations, check out the

.

## [Next Steps](#next-steps)

You've successfully installed Nuxt OG Image, but you need to make your first OG Image.

Follow the

 tutorial to get started.

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/0.getting-started/1.installation.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/getting-started/installation.md)

Did this page help you?

On this page

- [Setup Module](#setup-module)
- [Verifying Installation](#verifying-installation)
- [Configuration](#configuration)
- [Next Steps](#next-steps)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)