v2.0.0 · 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)

You're viewing **OG Image v5** documentation. For the latest, [switch to v6](https://nuxtseo.com/docs/og-image/getting-started/introduction).

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

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

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

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`` /`

v5

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

### Changelog

### Migration Guides

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

### Releases

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

Releases

# v2.0.0

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/releases/v2.md)

## [Background](#background)

I'm excited to finally tag a stable release, it has been in the works for many months.

Some fun numbers:

- 71 beta releases
- 285+ commits, hundreds of bug fixes
- 25+ issues closed

It has been a massive effort to get to this point, happy to move on from debugging WASM issues on different edge providers...

I'm very grateful for the support from the community and the sponsors who have made this possible.

## [Features 🚀](#features)

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

The default template has been modernized. It now matches the Nuxt branding.

![og](https://github.com/harlan-zw/nuxt-og-image/assets/5326365/f5ce95f7-cd91-482c-9f22-4f4d9ae5f518)

See the [Fallback.vue](https://github.com/harlan-zw/nuxt-og-image/blob/main/src/runtime/components/OgImageTemplate/Fallback.vue) component for all props.

### [Server-Side Runtime Images](#server-side-runtime-images)

With v1 of the module, images would only work when you would prerender your app. This was great for small SSG apps.

However, it was really limiting for large SSR apps.

With v2, we introduce true runtime images. Allowing you to support any number of og images without the build time.

While this sounds like a small change, it's actually required an almost complete rewrite of the module.

Using this is zero-config, just deploy your app using `nuxt build` and it will work for for the following providers:

Check the compatibility below:

| Provider | Satori | Browser |
| --- | --- | --- |
| Node | ✅ | ✅ |
| [Vercel](https://nuxt-og-image-playground.vercel.app/) | ✅ | ❌ |
| [Vercel Edge](https://nuxt-og-image-playground-gkdt.vercel.app/) | ✅ | ❌ |
| [Cloudflare Pages](https://nuxt-og-image-playground.pages.dev/) | ✅ | ❌ |
| [Netlify](https://nuxt-og-image-playground-netlify.netlify.app/) | ✅ | ❌ |
| [Netlify Edge](https://nuxt-og-image-playground-netlify-edge.netlify.app/) | (TBC) | ❌ |
| [StackBlitz](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=package.json) | ✅ (emojis don't work) | ❌ |

### [Satori Vue SFC When using the Satori browser, you can now use the `<style>` tag in your Vue SFCs. This comes in handy as Satori's Tailwind support is limited. It supports any preprocessor that you're using.```
<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<style>
h1 {
  font-size: 100px;
  text-align: center;
}
</style>
``` For this to work, it will inline any styles, so they can be supported by the Satori parser.](#satori-vue-sfc-supportwhen-using-the-satori-browser-you-can-now-use-the-style-tag-in-your-vue-sfcs-this-comes-in-handy-as-satoris-tailwind-support-is-limitedit-supports-any-preprocessor-that-youre-usingtemplate-div-h1hello-worldh1-divtemplatestyleh1-font-size-100px-text-align-centerstylefor-this-to-work-it-will-inline-any-styles-so-they-can-be-supported-by-the-satori-parser)

### [Custom Font Support](#custom-font-support)

You can now use any font that you want in your images with a simple config.

```
export default defineOgImage({
  ogImage: {
    fonts: [
      'Inter:400', // loads from google
      {
        name: 'optieinstein',
        weight: 800,
        path: '/OPTIEinstein-Black.otf', // loads locally
      }
    ],
  }
})
```

You can learn more on the [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts) page.

### [Playground: Editable Props](#playground-editable-props)

The playground now supports editing the props of the image. This is useful for testing out different configurations.

### [Nuxt Icon Support](#nuxt-icon-support)

You can now use [Nuxt Icons](https://github.com/nuxt-modules/icon) in your images.

```
<template>
  <div>
    <Icon name="logos:nuxt-icon" />
  </div>
</template>
```

### [New Component Folder](#new-component-folder)

The new recommendation for components is to put them inside the `OgImage` folder.

Any components in this folder will be configured to be a Nuxt Island. You can extend the folders by using the `componentDirs` option if you prefer your own convention. Setting up components in this dir will also allow you to reference the component using a shorthand instead of the full path.

For example, a component at `./components/OgImage/Foo.vue` can be referenced as:

```
defineOgImage({
  component: 'Foo' // foo, OgImageFoo and og-image-foo will also work
})
```

Otherwise, any island components set up with the previous convention will still work.

### [New composable / component API](#new-composable-component-api)

A cleaner, simpler API for defining your og images.

```
defineOgImage(options)
```

```
<template>
  <OgImage />
</template>
```

The old API is deprecated but will still work.

### [Runtime Cache](#runtime-cache)

Server-Side rendered images will now be cached by default. This will speed up the time to first byte for your images and reduce the load on your server.

See the [Cache](https://nuxtseo.com/docs/og-image/guides/cache) page for more details.

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

The `siteUrl` config was required for prerendering the og:image to an absolute path, this is now deprecated.

Instead, [nuxt-site-config](https://github.com/harlan-zw/nuxt-site-config) is used which automatically sets the URL for some environments.

## [Deprecations and Breaking Changes](#deprecations-and-breaking-changes)

### [API Changes](#api-changes)

The following options have been removed from nuxt.config:

- `host`, `siteUrl`
- `forcePrerender` - removed, not needed
- `satoriProvider` - removed use `runtimeSatori`
- `browserProvider` - removed use `runtimeBrowser`
- `experimentalInlineWasm` - removed, this is now automatic based on environment
- `experimentalRuntimeBrowser` - removed, this is now automatic based on environment

The following options have been deprecated from the `defineOgImage` options:

- `static` - use `cache` instead

If you were referencing the old default template, you will need to update it.

- `OgImageBasic` - remove the property, allow the fallback to be selected automatically

Composables & Components:

- `defineOgImageStatic()` is deprecated, use `defineOgImage()` (default behaviour is to cache), if you want to be verbose you can use `defineOgImageCached()` or `<OgImageCached />`
- `<OgImageStatic />` is deprecated, use `<OgImage />`
- `defineOgImageDynamic()` is deprecated, use `defineOgImageWithoutCache()`
- `<OgImageDynamic />` is deprecated, use `<OgImageWithoutCache />`

### [Behaviour Changes](#behaviour-changes)

If you were using the runtime browser previously, you will need to manually opt-in for it to work in production.

```
export default defineNuxtConfig({
  ogImage: {
    runtimeBrowser: true
  }
})
```

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/7.releases/6.v2.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/releases/v2.md)

Did this page help you?

[v3.0.0 Release notes for Nuxt OG Image v3.](https://nuxtseo.com/docs/og-image/v5/releases/v3) 

On this page

- [Background](#background)
- [Features 🚀](#features)
- [Deprecations and Breaking Changes](#deprecations-and-breaking-changes)

[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 "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [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)