v2 to v3 · Nuxt OG Image · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

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

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

**OG Image v6** is here! Looking for an older version? [View v5 docs](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction).

[User Guides](https://nuxtseo.com/docs/og-image/getting-started/introduction)

[API](https://nuxtseo.com/docs/og-image/api/define-og-image)

[Releases](https://nuxtseo.com/docs/og-image/releases/v6)

OG Image

- [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

Search…```k`` /`

v6 (latest)

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

### Changelog

### Migration Guides

- [v2 to v3](https://nuxtseo.com/docs/og-image/migration-guide/v3)
- [v5 to v6](https://nuxtseo.com/docs/og-image/migration-guide/v6)

### Releases

- [v6.0.0](https://nuxtseo.com/docs/og-image/releases/v6)
- [v5.0.0](https://nuxtseo.com/docs/og-image/releases/v5)
- [v4.0.0](https://nuxtseo.com/docs/og-image/releases/v4)
- [v3.0.0](https://nuxtseo.com/docs/og-image/releases/v3)
- [v2.0.0](https://nuxtseo.com/docs/og-image/releases/v2)

Migration Guides

# v2 to v3

[Copy for LLMs](https://nuxtseo.com/docs/og-image/migration-guide/v3.md)

### [Playground](#playground)

You must access the playground through Nuxt DevTools, the `/__og_image__` is no longer supported.

### [OG Image URL](#og-image-url)

If you were referencing an OG Image URL, you will need to update it to use the new `/__og-image__/image` endpoint.

## [Nuxt Config](#nuxt-config)

Remove the following keys from your Nuxt config:

- `playground` - If you enable Nuxt DevTools, the module always enables the playground
- `host` - You must migrate to using [Nuxt Site Config](https://nuxtseo.com/docs/site-config/guides/how-it-works)
- `siteUrl` - You must migrate to using [Nuxt Site Config](https://nuxtseo.com/site-config/guides/setting-site-config)
- `runtimeBrowser`, `runtimeSatori` - These are now handled by `compatibility`. If you intend to use the Browser renderer at runtime please see [the Browser docs](https://nuxtseo.com/docs/og-image/renderers/browser) for more information.

## [Nuxt Hooks](#nuxt-hooks)

Remove any usages of the `og-image:prerenderScreenshots` hook, as the module removed it.

If you were using this hook and have a use case for it, please [open an issue](https://github.com/harlan-zw/nuxt-og-image/issues/new/choose).

If you were using `og-image:config` you should replace this code with the new `nuxt-og-image:runtime-config` hook.

## [Caching](#caching)

You will need to delete all old cache keys: `cacheTtl`, `cache`, `cacheKey`, `static`

Please see the [Runtime Cache docs](https://nuxtseo.com/docs/og-image/guides/runtime-cache) for details on using the new `cacheMaxAgeSeconds`.

## [Default Template](#default-template)

If you were referencing the default template as `Fallback` anywhere, you will need to update this to be `NuxtSeo`.

v2

```
// v3
defineOgImage({
  component: 'Fallback',
  // props ...
})
```

v3

```
// v3
defineOgImageComponent('NuxtSeo', {
  // props
})
```

## [Components](#components)

It's now recommended to use the new `defineOgImageComponent` API over using components.

The module removed the following components:

- `OgImageStatic`
- `OgImageDynamic`
- `OgImageCached`
- `OgImageWithoutCache`

If you need to using components then do a search for these components and replace any instances or variations with `<OgImage ... />`

v2

v3 - recommended

v3 - components

```
<template>
  <OgImageStatic :title="title" :description="description" />
</template>
```

```
// v3
defineOgImageComponent('NuxtSeo', {
  title: '',
  description: '',
})
```

```
<template>
  <OgImage :title="title" :description="description" />
</template>
```

If you're using components with Nuxt Content, you will now need to manually make them global.

```
export default defineNuxtConfig({
  ogImage: {
    componentOptions: {
      global: true,
    },
  },
})
```

## [Composables](#composables)

The module removed the following composables:

- `defineOgImageStatic`
- `defineOgImageDynamic`
- `defineOgImageCached`
- `defineOgImageWithoutCache`

Do a global search for these removed composables as well as `defineOgImage`, it's recommended to replace these with the new `defineOgImageComponent`.

The props work bit differently, you will need to pass them in explicitly as a second argument.

If you were using the default template previously, you should use the `NuxtSeo` as the template name. This will provide type-safety.

v2

v3

```
// v2
defineOgImage({
  title: String,
  description: String,
})
```

```
// v3
defineOgImageComponent('NuxtSeo', {
  title: String,
  description: String,
})
```

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/6.migration-guide/v3.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/migration-guide/v3.md)

Did this page help you?

[Nitro Hooks Hook into the Nuxt OG Image runtime.](https://nuxtseo.com/docs/og-image/nitro-api/nitro-hooks) [v5 to v6 Migrate Nuxt OG Image v5 to Nuxt OG Image v6.](https://nuxtseo.com/docs/og-image/migration-guide/v6)

On this page

- [Playground](#playground)
- [OG Image URL](#og-image-url)
- [Nuxt Config](#nuxt-config)
- [Nuxt Hooks](#nuxt-hooks)
- [Caching](#caching)
- [Default Template](#default-template)
- [Components](#components)
- [Composables](#composables)

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

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Nuxt SEO Pro")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/pro/docs/getting-started/mcp-setup)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

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