v6.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

# v6.0.0

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

## [Introduction](#introduction)

Nuxt OG Image v6 is a complete overhaul focused on **performance**, **modern tooling**, and **developer experience**.

The headline change is [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) as the recommended renderer - a Rust-based renderer that's 2-10x faster than Satori. Alongside this, v6 brings first-class CSS support, redesigned DevTools, opt-in dependencies, and smarter caching.

See the full [migration guide](https://nuxtseo.com/docs/og-image/migration-guide/v6) for upgrade instructions.

### [Quick Migration](#quick-migration)

```
npx nuxt-og-image migrate v6
```

## [Features](#features)

### [Takumi Renderer (Recommended)](#takumi-renderer-recommended)

[Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) is a Rust-based renderer that directly rasterizes to PNG/JPEG/WebP - no SVG intermediate step. It's 2-10x faster than Satori+Resvg. ([#414](https://github.com/nuxt-modules/og-image/pull/414))

Takumi and Satori are feature-compatible within Nuxt OG Image - both support [Tailwind CSS](https://tailwindcss.com), custom fonts, emoji, edge runtimes, and all the same template features.

Use Takumi by creating components with the `.takumi.vue` suffix:

```
components/OgImage/MyTemplate.takumi.vue
```

### [First-Class CSS Support](#first-class-css-support)

Nuxt OG Image now has first-class support for multiple CSS approaches with zero configuration. See the [styling guide](https://nuxtseo.com/docs/og-image/guides/styling) for details. ([#430](https://github.com/nuxt-modules/og-image/pull/430))

- **Tailwind v4**: build-time class extraction with Tailwind's CSS engine, `@theme` values work
- **UnoCSS**: full [UnoCSS](https://unocss.dev) support
- **CSS Variables**: use your app's CSS custom properties directly in OG image templates
- **Nuxt UI v3**: the module automatically resolves semantic colors (`primary`, `secondary`, etc.)

### [Multiple OG Images Per Page](#multiple-og-images-per-page)

Define multiple images with different dimensions for different platforms. See the [WhatsApp guide](https://nuxtseo.com/docs/og-image/guides/whatsapp) for a common use case. ([#305](https://github.com/nuxt-modules/og-image/pull/305))

```
defineOgImage('NuxtSeo', { title: 'My Page' }, [
  { key: 'og' }, // Default 1200x600 for Twitter/Facebook
  { key: 'whatsapp', width: 800, height: 800 }, // Square for WhatsApp
])
```

### [@nuxt/fonts Integration](#nuxtfonts-integration)

Custom fonts now use [@nuxt/fonts](https://fonts.nuxt.com) instead of the legacy `ogImage.fonts` config. See the [custom fonts guide](https://nuxtseo.com/docs/og-image/guides/custom-fonts). ([#432](https://github.com/nuxt-modules/og-image/pull/432))

```
export default defineNuxtConfig({
  modules: ['@nuxt/fonts', 'nuxt-og-image'],
  fonts: {
    families: [
      { name: 'Inter', weights: [400, 700], global: true }
    ]
  }
})
```

You must set `global: true` for fonts to be available in OG image rendering.

### [Redesigned DevTools](#redesigned-devtools)

The OG image DevTools have been overhauled with better image preview, more accessible interface, and improved error reporting. Bluesky social cards are now supported.

## [Breaking Changes](#breaking-changes)

### [Component Renderer Suffix Required](#component-renderer-suffix-required)

OG Image components now require a renderer suffix in their filename. This enables automatic renderer detection and tree-shaking. ([#433](https://github.com/nuxt-modules/og-image/pull/433))

```
# Before
components/OgImage/MyTemplate.vue

# After
components/OgImage/MyTemplate.takumi.vue # Recommended
components/OgImage/MyTemplate.satori.vue
```

Run the migration CLI to rename automatically:

```
npx nuxt-og-image migrate v6
```

### [Community Templates Must Be Ejected](#community-templates-must-be-ejected)

[Community templates](https://nuxtseo.com/docs/og-image/guides/community-templates) (`NuxtSeo`, `SimpleBlog`, etc.) are no longer bundled in production. Eject them to your project before building. ([#426](https://github.com/nuxt-modules/og-image/pull/426))

```
npx nuxt-og-image eject NuxtSeo
```

Templates continue to work in development without ejecting.

### [Install Renderer Dependencies](#install-renderer-dependencies)

Renderer dependencies are no longer bundled - install only what you need. Running `nuxi dev` will prompt you to install missing dependencies automatically. See the [installation guide](https://nuxtseo.com/docs/og-image/getting-started/installation) for details. ([#415](https://github.com/nuxt-modules/og-image/pull/415))

**Takumi (recommended):**

```
npm i @takumi-rs/core # Node.js
npm i @takumi-rs/wasm # Edge runtimes
```

**Satori:**

```
npm i satori @resvg/resvg-js # Node.js
npm i satori @resvg/resvg-wasm # Edge runtimes
```

### [@nuxt/fonts Required for Custom Fonts](#nuxtfonts-required-for-custom-fonts)

v6 removes the legacy `ogImage.fonts` config. Use [@nuxt/fonts](https://fonts.nuxt.com) with `global: true` for [custom fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts). ([#432](https://github.com/nuxt-modules/og-image/pull/432))

### [New URL Structure](#new-url-structure)

OG Image URLs now use a Cloudinary-style format with options encoded in the path, enabling better CDN caching. ([#305](https://github.com/nuxt-modules/og-image/pull/305))

| v5 | v6 |
| --- | --- |
| `/__og-image__/image/` | `/_og/d/` |
| `/__og-image__/static/` | `/_og/s/` |

Runtime URLs can become long when passing many props. For best results, pass minimal props (like a slug) and fetch data inside your OG component. Prerendered images automatically use short hash URLs. See the [Performance](https://nuxtseo.com/docs/og-image/guides/performance) guide.

### [Other Breaking Changes](#other-breaking-changes)

- `defineOgImageComponent` deprecated in favour of [`defineOgImage`](https://nuxtseo.com/docs/og-image/api/define-og-image) ([#433](https://github.com/nuxt-modules/og-image/pull/433))
- UnoCSS runtime removed - UnoCSS is now resolved at build time ([#430](https://github.com/nuxt-modules/og-image/pull/430))
- Nuxt Content v2 support removed, several legacy config options removed ([#410](https://github.com/nuxt-modules/og-image/pull/410))
- Cache key format changed for better CDN compatibility. See the [cache guide](https://nuxtseo.com/docs/og-image/guides/cache) ([#427](https://github.com/nuxt-modules/og-image/pull/427))

## [Bug Fixes](#bug-fixes)

- Improved HMR for OG image templates ([`055eadf9`](https://github.com/nuxt-modules/og-image/commit/055eadf9))
- Auto-eject components in dev ([`265cad56`](https://github.com/nuxt-modules/og-image/commit/265cad56))
- Exclude default options from URLs ([#431](https://github.com/nuxt-modules/og-image/pull/431))
- Always fallback to emoji fetching in edge runtimes ([#429](https://github.com/nuxt-modules/og-image/pull/429))
- Avoid crashing main thread with resvg errors ([`7b5b1af8`](https://github.com/nuxt-modules/og-image/commit/7b5b1af8))
- Support local fonts with [zero runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime) mode ([#428](https://github.com/nuxt-modules/og-image/pull/428))
- Support `error.vue` navigation ([`d22ede31`](https://github.com/nuxt-modules/og-image/commit/d22ede31))
- Dynamic runtime cache storage ([#425](https://github.com/nuxt-modules/og-image/pull/425))
- Force social platform cache invalidation between builds ([#423](https://github.com/nuxt-modules/og-image/pull/423))
- Encoding bug for array text children in Satori ([#422](https://github.com/nuxt-modules/og-image/pull/422))
- Flakey image rendering ([#421](https://github.com/nuxt-modules/og-image/pull/421))
- Light-weight emoji resolves ([`bbeeea16`](https://github.com/nuxt-modules/og-image/commit/bbeeea16))

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/7.releases/2.v6.md)

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

Did this page help you?

[v5 to v6 Migrate Nuxt OG Image v5 to Nuxt OG Image v6.](https://nuxtseo.com/docs/og-image/migration-guide/v6) [v5.0.0 Release notes for Nuxt OG Image v5.](https://nuxtseo.com/docs/og-image/releases/v5)

On this page

- [Introduction](#introduction)
- [Features](#features)
- [Breaking Changes](#breaking-changes)
- [Bug Fixes](#bug-fixes)

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