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)

**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)

Releases

# v2.0.0

[Copy for LLMs](https://nuxtseo.com/docs/og-image/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 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 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 required an complete rewrite of the module.

Using this is zero-config, 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, the module inlines any styles so the Satori parser can support them.](#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-the-module-inlines-any-styles-so-the-satori-parser-can-support-them)

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

The module configures any components in this folder as 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)

The module now caches server-side rendered images 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 module no longer requires the `siteUrl` config for prerendering the og:image to an absolute path; this is now deprecated.

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

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

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

The module removed the following options 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, allowing the module to select the fallback 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/edit/main/docs/content/7.releases/6.v2.md)

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

Did this page help you?

[v3.0.0 Release notes for Nuxt OG Image v3.](https://nuxtseo.com/docs/og-image/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 Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](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)