doc: sync

harlan-zw · harlan-zw · commit cddb782fe3c5 · 2026-03-26T01:34:44.000+11:00
diff --git a/docs/content/0.getting-started/3.troubleshooting.md b/docs/content/0.getting-started/3.troubleshooting.md
@@ -40,7 +40,7 @@ to reproduce the issue.
 - You can't use anything that will require a fetch request to a different server (e.g. Google Fonts, custom Emojis, images, etc).
 - The `browser` renderer is not supported
 - `sharp` is not supported, so you can't use JPEGs
-- `inline-css` is not supported, so you can't `<style>`{lang="html"} blocks
+- `<style>`{lang="html"} blocks may have limited support
 
 ## Debugging Tools
 
diff --git a/docs/content/0.getting-started/5.getting-familiar-with-nuxt-og-image.md b/docs/content/0.getting-started/5.getting-familiar-with-nuxt-og-image.md
@@ -54,7 +54,6 @@ Feel free to pass in any props you like, but for this example we're going to use
 defineOgImage('NuxtSeo.takumi', {
   title: 'Hello OG Image',
   description: 'Look at me in dark mode',
-  theme: '#ff0000',
   colorMode: 'dark',
 })
 </script>
@@ -77,10 +76,10 @@ Community templates are for development only. Before deploying, eject them with
 
 ```vue [pages/index.vue]
 <script lang="ts" setup>
-defineOgImage('Nuxt.takumi', {
-  headline: 'Greetings',
+defineOgImage('NuxtSeo.takumi', {
   title: 'Hello OG Image',
-  description: 'Look at me using the Nuxt template',
+  description: 'Look at me using the NuxtSeo template',
+  isPro: true,
 })
 </script>
 ```
@@ -107,7 +106,7 @@ Or copy and paste the template manually from the `Community` tab in Nuxt DevTool
 
 ### 1. Create your template component
 
-We're going to start with the [SimpleBlog](https://github.com/nuxt-modules/og-image/blob/main/src/runtime/app/components/Templates/Community/SimpleBlog.vue) template as a quick way to get started.
+We're going to start with the [SimpleBlog](https://github.com/nuxt-modules/og-image/blob/main/src/runtime/app/components/Templates/Community/SimpleBlog.satori.vue) template as a quick way to get started.
 
 Let's copy this template into our project at `./components/OgImage/BlogPost.takumi.vue` and remove some of the boilerplate.
 
diff --git a/docs/content/2.renderers/0.index.md b/docs/content/2.renderers/0.index.md
@@ -15,7 +15,7 @@ All renderers share core features: [Tailwind CSS](https://tailwindcss.com) suppo
 |---------|--------|--------|----------|
 | | **Recommended** | | |
 | **Speed** | Fastest (2-10x) | Fast | Slow |
-| **Edge Runtime** | ✅ | ✅ | ❌ |
+| **Edge Runtime** | ✅ | ✅ | [Cloudflare](/docs/og-image/renderers/browser#cloudflare-browser-rendering) only |
 | **CSS Support** | Complete | Partial | Full |
 | **Gradients** | ✅ | ✅ | ✅ |
 | **Opacity** | ✅ | ✅ | ✅ |
@@ -39,8 +39,8 @@ All renderers share core features: [Tailwind CSS](https://tailwindcss.com) suppo
 | Vercel Edge | ✅ Wasm | ✅ Wasm | ❌ |
 | [Netlify](https://netlify.com) | ✅ | ✅ | ❌ |
 | Netlify Edge | ✅ Wasm | ✅ Wasm | ❌ |
-| Cloudflare Workers | ✅ Wasm | ✅ Wasm | ❌ |
-| Cloudflare Pages | ✅ Wasm | ✅ Wasm | ❌ |
+| Cloudflare Workers | ✅ Wasm | ✅ Wasm | ✅ [Browser Rendering](/docs/og-image/renderers/browser#cloudflare-browser-rendering) |
+| Cloudflare Pages | ✅ Wasm | ✅ Wasm | ✅ [Browser Rendering](/docs/og-image/renderers/browser#cloudflare-browser-rendering) |
 | [StackBlitz](https://stackblitz.com) | ✅ Wasm | ✅ Wasm | ❌ |
 
 ### Binding Types
@@ -58,13 +58,14 @@ Each renderer can use different bindings depending on the environment:
 - Browser unavailable (binary too large)
 - Sharp unavailable (post-install script issues)
 
-**Vercel Edge, Netlify Edge, Cloudflare Pages**
+**Vercel Edge, Netlify Edge**
 - Satori and Takumi use Wasm automatically
 - Browser and Sharp unavailable
 
-**Cloudflare Workers**
+**Cloudflare Workers/Pages**
 - Satori and Takumi use Wasm automatically
-- Browser and Sharp unavailable
+- Browser available via [Cloudflare Browser Rendering](/docs/og-image/renderers/browser#cloudflare-browser-rendering) binding
+- Sharp unavailable
 
 ### Overriding Compatibility
 
@@ -128,7 +129,7 @@ components/OgImage/MyTemplate.takumi.vue
 
 ### Use Satori
 
-Satori works without installing extra dependencies and has good CSS support for most templates:
+Satori requires `satori` and `@resvg/resvg-js` (or `@resvg/resvg-wasm` for edge runtimes) as peer dependencies. It has good CSS support for most templates:
 
 ```bash
 components/OgImage/MyTemplate.satori.vue
diff --git a/docs/content/2.renderers/2.satori.md b/docs/content/2.renderers/2.satori.md
@@ -3,7 +3,7 @@ title: Satori Renderer
 description: Learn how to use the Satori renderer.
 ---
 
-[Satori](https://github.com/vercel/satori) converts Vue components to SVG, then rasterizes to PNG. It works without extra dependencies but has more CSS limitations than [Takumi](/docs/og-image/renderers/takumi).
+[Satori](https://github.com/vercel/satori) converts Vue components to SVG, then rasterizes to PNG via [resvg](https://github.com/yisibl/resvg-js). It has more CSS limitations than [Takumi](/docs/og-image/renderers/takumi).
 
 ::note
 For new projects, we recommend [Takumi](/docs/og-image/renderers/takumi) - it's 2-10x faster with more complete CSS support.
@@ -54,7 +54,7 @@ The module automatically detects the renderer from the filename - zero-config.
 - Fast rendering
 - Works on all environments including edge runtimes
 - Good CSS support (flexbox, fonts, colors, gradients)
-- 6 emoji families supported
+- 11 emoji families supported
 - Google Fonts integration
 
 ## Cons
diff --git a/docs/content/3.guides/3.jpegs.md b/docs/content/3.guides/3.jpegs.md
@@ -11,7 +11,7 @@ The module supports rendering JPEGs instead of PNGs, but it requires Sharp. The
 
 If you're prerendering your images or using a Node based environment, you can enable Sharp to render JPEGs.
 
-Chromium rendering uses `jpeg` images by default.
+Browser rendering uses `jpeg` images by default.
 
 ## Setup
 
diff --git a/docs/content/3.guides/5.custom-fonts.md b/docs/content/3.guides/5.custom-fonts.md
@@ -77,12 +77,12 @@ export default defineNuxtConfig({
 
 Different renderers support different font formats:
 
-| Format | Satori | Takumi | Chromium |
-|--------|--------|--------|----------|
+| Format | Satori | Takumi | Browser |
+|--------|--------|--------|---------|
 | woff2  | ❌     | ✅     | ✅       |
-| woff   | ✅     | ✅     | ✅       |
+| woff   | ✅     | ❌     | ✅       |
 | ttf    | ✅     | ✅     | ✅       |
-| otf    | ✅     | ✅     | ✅       |
+| otf    | ✅     | ❌     | ✅       |
 
 ::note
 When using Google Fonts or other providers, `@nuxt/fonts` automatically fetches the correct format. Format compatibility only matters for local fonts.
diff --git a/docs/content/3.guides/8.community-templates.md b/docs/content/3.guides/8.community-templates.md
@@ -37,7 +37,7 @@ The `NuxtSeo` template is the default one provided for you. It comes with a numb
 to let you customise it however you like.
 
 Like all Community templates, it's recommended to copy+paste it into your project if you want to customise it. You can find
-the source on [GitHub](https://github.com/nuxt-modules/og-image/blob/main/src/runtime/app/components/Templates/Community/Nuxt.vue).
+the source on [GitHub](https://github.com/nuxt-modules/og-image/tree/main/src/runtime/app/components/Templates/Community) (available as both `NuxtSeo.satori.vue` and `NuxtSeo.takumi.vue`).
 
 ## Props
 
@@ -55,36 +55,12 @@ The title of the page. This serves as the main heading.
 
 The description of the page. This serves as the subheading.
 
-### `icon`
+### `isPro`
 
-**Type:** `string` | `boolean`
+**Type:** `boolean`
 **Default:** `false`
 
-The icon of the page. This serves as the main image. Requires Nuxt Icon installation.
-
-### `siteName`
-
-**Type:** `string`
-**Default:** Site Name from [Nuxt Site Config](/docs/site-config/guides/how-it-works)
-
-Sets the bottom centered text of the template.
-
-### `siteLogo`
-
-**Type:** `string`
-
-Replaces the site name and the Nuxt SEO logo with a custom image.
-
-See the [Icons and Images](/docs/og-image/guides/icons-and-images) guide for more information.
-
-### `theme`
-
-**Type:** `string`
-**Default:** `#00dc82`
-
-Changes the theme of the template. You should either provide a hexadecimal color or a valid rgb.
-
-For example: `#d946ef`
+Changes the template to use a purple/violet color scheme instead of green. Useful for distinguishing Pro-tier content.
 
 ### `colorMode`
 
diff --git a/docs/content/4.api/0.define-og-image-component.md b/docs/content/4.api/0.define-og-image-component.md
@@ -41,7 +41,7 @@ Returns an array of generated image URLs.
 defineOgImageComponent(
   'MyCustomComponent',
   { title: 'Welcome to my site!' },
-  { fonts: ['CustomFont:400'] }
+  { cacheMaxAgeSeconds: 3600 }
 )
 ```
 
diff --git a/docs/content/4.api/0.define-og-image-screenshot.md b/docs/content/4.api/0.define-og-image-screenshot.md
@@ -10,7 +10,7 @@ The `defineOgImageScreenshot()`{lang="ts"} composable allows you to take a scree
 This requires the `browser` renderer, check the [Browser](/docs/og-image/renderers/browser) guide for more information.
 
 ::warning
-Screenshots require the Browser renderer which is **not available on serverless platforms** (Vercel, [Netlify](https://netlify.com), AWS Lambda) due to binary size limits. You must either [prerender](/docs/og-image/guides/zero-runtime) your images at build time or use [Satori](/docs/og-image/renderers/satori) / [Takumi](/docs/og-image/renderers/takumi) with a custom component instead.
+Screenshots require the Browser renderer which is **not available on most serverless platforms** (Vercel, [Netlify](https://netlify.com), AWS Lambda) due to binary size limits. [Cloudflare Workers/Pages](/docs/og-image/renderers/browser#cloudflare-browser-rendering) are an exception via Browser Rendering bindings. Otherwise, you must either [prerender](/docs/og-image/guides/zero-runtime) your images at build time or use [Satori](/docs/og-image/renderers/satori) / [Takumi](/docs/og-image/renderers/takumi) with a custom component instead.
 ::
 
 ## Props
diff --git a/docs/content/4.api/0.define-og-image.md b/docs/content/4.api/0.define-og-image.md
@@ -17,7 +17,7 @@ defineOgImage(component, props, options)
 
 - `component`: The component name (e.g., `'NuxtSeo'`, `'MyTemplate'`)
 - `props`: Props to pass to the component
-- `options`: Additional options like `fonts`, `cacheMaxAgeSeconds`, etc.
+- `options`: Additional options like `cacheMaxAgeSeconds`, `extension`, etc.
 
 ```ts
 // Simple
@@ -54,7 +54,7 @@ The alt text of the image. It's recommended to always provide this for accessibi
 
 ### `extension`
 
-- Type: `'png' | 'jpeg' | 'jpg' | 'webp'`{lang="ts"}
+- Type: `'png' | 'jpeg' | 'jpg' | 'webp' | 'svg' | 'html'`{lang="ts"}
 - Default: `'png'`{lang="ts"}
 
 The extension to use when generating the image.
@@ -63,10 +63,10 @@ See the [JPEGs](/docs/og-image/guides/jpegs) guide for using JPEGs.
 
 ### `emojis`
 
-- Type: `'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji'`{lang="ts"}
+- Type: `'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji' | false`{lang="ts"}
 - Default: `'noto'`{lang="ts"}
 
-The emoji set to use when generating the image.
+The emoji set to use when generating the image. Set to `false` to disable emoji rendering.
 
 ### `html`
 
@@ -132,11 +132,14 @@ Options to pass to Sharp when generating images. See the [Sharp docs](https://sh
 
 Options to pass to the browser when generating screenshots. See the [defineOgImageScreenshot](/docs/og-image/api/define-og-image-screenshot) documentation for more details.
 
-### `fonts`
+### `fonts` :deprecated
 
-- Type: `InputFontConfig[]`{lang="ts"}
 - Default: `[]`{lang="ts"}
 
+::callout{type="warning"}
+Deprecated. Configure fonts via [`@nuxt/fonts`](https://fonts.nuxt.com) instead. The module automatically detects and uses fonts from `@nuxt/fonts`.
+::
+
 Extra fonts to use when rendering this OG image. See the [Custom Fonts](/docs/og-image/guides/custom-fonts) documentation for more details.
 
 ### `component`
diff --git a/docs/content/4.api/3.config.md b/docs/content/4.api/3.config.md
@@ -91,7 +91,7 @@ Extra component directories the module should use to resolve components.
 
 ### `runtimeCacheStorage`
 
-- Type: `boolean | (Record<string, any> & { driver: string })`{lang="ts"}
+- Type: `boolean | string | (Record<string, any> & { driver: string })`{lang="ts"}
 - Default: `true`{lang="ts"}
 
 Modify the runtime cache behaviour.
@@ -132,7 +132,7 @@ export default defineNuxtConfig({
 })
 ```
 
-Default cache directory: `node_modules/.cache/nuxt/og-image/`
+Default cache directory: `node_modules/.cache/nuxt-seo/og-image/`
 
 See the [Caching Guide](/docs/og-image/guides/cache#build-cache-ci-persistence) for CI configuration examples.
 
diff --git a/docs/content/5.nitro-api/4.nitro-hooks.md b/docs/content/5.nitro-api/4.nitro-hooks.md
@@ -39,11 +39,34 @@ import { defineNitroPlugin } from 'nitropack/runtime/plugin'
 
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('nuxt-og-image:satori:vnodes', async (vnodes, ctx) => {
-    for (const child of vnodes.children) {
+    const children = vnodes.props.children
+    if (!Array.isArray(children))
+      return
+    for (const child of children) {
+      if (typeof child === 'string' || !child)
+        continue
       // remove icon class from Nuxt Icon
       if (child.props?.class)
         child.props.class = child.props.class.replace('icon', '')
     }
   })
 })
 ```
+
+## `nuxt-og-image:takumi:nodes`
+
+**Type:** `async (nodes: Node, ctx: OgImageRenderEventContext) => void | Promise<void>`{lang="ts"}
+
+The module calls this when it generates the Takumi nodes. Use this hook to modify the final node tree passed to the Takumi renderer. The `Node` type comes from `@takumi-rs/core`.
+
+```ts [server/plugins/ogImage.ts]
+import { defineNitroPlugin } from 'nitropack/runtime/plugin'
+
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('nuxt-og-image:takumi:nodes', async (nodes, ctx) => {
+    // modify the Takumi node tree before rendering
+    if (nodes.style)
+      nodes.style.backgroundColor = '#000000'
+  })
+})
+```
diff --git a/docs/content/6.migration-guide/v6.md b/docs/content/6.migration-guide/v6.md
@@ -21,7 +21,7 @@ This will:
 
 ## What's New
 
-- **Takumi as recommended renderer** - [Takumi](https://takumi.kane.tw) is 2-10x faster than Satori with the same feature set, default 2x DPI for crisp images
+- **Takumi as recommended renderer** - [Takumi](https://takumi.kane.tw) is 2-10x faster than Satori with the same feature set
 - **First-class CSS support** - Tailwind v4, [UnoCSS](https://unocss.dev), CSS variables, and Nuxt UI v3 colors all work
 - **Redesigned DevTools** - better debugging, Bluesky social card support, more accessible interface
 - **Multiple OG images per page** - different dimensions for different platforms

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ Returns an array of generated image URLs.`
`41`	`41`	`defineOgImageComponent(`
`42`	`42`	`'MyCustomComponent',`
`43`	`43`	`{ title: 'Welcome to my site!' },`
`44`		`- { fonts: ['CustomFont:400'] }`
	`44`	`+ { cacheMaxAgeSeconds: 3600 }`
`45`	`45`	`)`
`46`	`46`	```
`47`	`47`