---
title: "v6.0.0 · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/releases/v6"
last_updated: "2026-08-17T07:50:36.968Z"
meta:
  description: "Release notes for Nuxt OG Image v6."
  "og:description": "Release notes for Nuxt OG Image v6."
  "og:title": "v6.0.0 · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

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

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

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

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

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)

**Releases**

# **v6.0.0**

## 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:**

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

## Features

### 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:

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

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

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

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

### @nuxt/fonts 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))

nuxt.config.ts

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

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

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

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

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

Run the migration CLI to rename automatically:

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

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

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

Templates continue to work in development without ejecting.

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

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

**Satori:**

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

### @nuxt/fonts 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

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

- `**defineOgImageComponent**` deprecated in favor 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 [**~~Runtime Cache guide~~**](https://nuxtseo.com/docs/og-image/guides/runtime-cache) ([**~~#427~~**](https://github.com/nuxt-modules/og-image/pull/427))

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

**Was this page helpful?**

### **Related **

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

[**Takumi Renderer**](https://nuxtseo.com/docs/og-image/renderers/takumi)

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

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