Cloudflare Deployment · 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)

### Getting Started

- [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation)
- [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)
- [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image)

### Core Concepts

- [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime)
- [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp)
- [Performance](https://nuxtseo.com/docs/og-image/guides/performance)
- [CLI](https://nuxtseo.com/docs/og-image/guides/cli)
- [Security](https://nuxtseo.com/docs/og-image/guides/security)
- [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare)
- [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules)
- [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache)
- [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs)
- [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts)
- [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales)
- [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis)
- [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images)
- [Styling](https://nuxtseo.com/docs/og-image/guides/styling)
- [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates)
- [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages)

### Overview

- [Overview](https://nuxtseo.com/docs/og-image/renderers)
- [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi)
- [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori)
- [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser)

### Integrations

- [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content)
- [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode)
- [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n)

Core Concepts

# Cloudflare Deployment

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

Nuxt OG Image works on Cloudflare Workers and Pages with the [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) (recommended) or [Satori](https://nuxtseo.com/docs/og-image/renderers/satori) renderer using Wasm bindings.

## [Static Assets (ASSETS Binding)](#static-assets-assets-binding)

OG image generation requires loading font files at runtime. On [Cloudflare](https://cloudflare.com), fonts are served as static assets through the [`ASSETS` binding](https://developers.cloudflare.com/workers/static-assets/binding/). Without this binding, the worker cannot access fonts and all text will be invisible.

### [Cloudflare Pages](#cloudflare-pages)

No extra configuration needed. The `wrangler pages deploy` command configures the `ASSETS` binding automatically.

### [Cloudflare Workers (Module)](#cloudflare-workers-module)

Enable `deployConfig` so Nitro generates a `wrangler.json` with the `ASSETS` binding:

nuxt.config.ts

```
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-module',
    cloudflare: {
      deployConfig: true,
    },
  },
})
```

Then build and deploy:

```
nuxt build
npx wrangler --cwd .output deploy
```

Do **not** deploy with `wrangler deploy --assets .output/public`. This legacy command does not configure the `ASSETS` binding. Use `npx wrangler --cwd .output deploy` which reads the generated `wrangler.json`.

You can verify the binding exists in the deploy output:

```
Your Worker has access to the following bindings:
Binding            Resource
env.ASSETS         Assets
```

### [Custom Wrangler Config](#custom-wrangler-config)

If you manage your own `wrangler.toml`, add the `[assets]` section:

wrangler.toml

```
[assets]
binding = "ASSETS"
directory = ".output/public"
```

## [Runtime Cache with KV](#runtime-cache-with-kv)

Rendered OG images are cached in memory by default, which resets on every deploy. For persistent caching, use [Cloudflare KV](https://developers.cloudflare.com/kv/).

### [1. Create a KV Namespace](#_1-create-a-kv-namespace)

```
npx wrangler kv namespace create OG_IMAGE_CACHE
```

### [2. Add the Binding](#_2-add-the-binding)

wrangler.toml

nuxt.config.ts

```
[[kv_namespaces]]
binding = "OG_IMAGE_CACHE"
id = "<your-namespace-id>"
```

```
export default defineNuxtConfig({
  nitro: {
    cloudflare: {
      wrangler: {
        kv_namespaces: [
          { binding: 'OG_IMAGE_CACHE', id: '<your-namespace-id>' },
        ],
      },
    },
  },
})
```

### [3. Configure Cache Storage](#_3-configure-cache-storage)

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    runtimeCacheStorage: {
      driver: 'cloudflare-kv-binding',
      binding: 'OG_IMAGE_CACHE',
    },
  },
})
```

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

## [Browser Rendering](#browser-rendering)

[Cloudflare Browser Rendering](https://developers.cloudflare.com/browser-rendering/) enables runtime screenshots for `.browser.vue` templates. This is not needed for Takumi or Satori templates.

### [1. Install the Dependency](#_1-install-the-dependency)

```
pnpm add @cloudflare/puppeteer
```

### [2. Add the Binding](#_2-add-the-binding-1)

wrangler.toml

nuxt.config.ts

```
[browser]
binding = "BROWSER"
```

```
export default defineNuxtConfig({
  ogImage: {
    browser: {
      provider: 'cloudflare',
      binding: 'BROWSER',
    },
  },
})
```

### [Rate Limits](#rate-limits)

| Plan | New browsers per minute |
| --- | --- |
| Free | 3 |
| Paid | 30 |

Sessions have a 60 second idle timeout, handled automatically by the module. See [Cloudflare Browser Rendering limits](https://developers.cloudflare.com/browser-rendering/limits/) for details.

## [Troubleshooting](#troubleshooting)

### [Text missing from OG images](#text-missing-from-og-images)

If the background and images render but text is invisible, the `ASSETS` binding is missing. Verify your deployment follows the [setup above](#static-assets-assets-binding).

To diagnose, enable `ogImage.debug` and check the `.json` variant of your OG image URL. If `fonts` is an empty array, fonts failed to load.

### [Fonts load locally but not in production](#fonts-load-locally-but-not-in-production)

`wrangler dev` injects the `ASSETS` binding automatically, so fonts work in local preview. Production deployments need the binding configured explicitly via `deployConfig: true` or a `wrangler.toml` with `[assets]`.

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

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

Did this page help you?

[Security Learn about the security defaults and how to further harden your OG image endpoint.](https://nuxtseo.com/docs/og-image/guides/security) [Route Rules Learn how to use route rules to customise your OG Image.](https://nuxtseo.com/docs/og-image/guides/route-rules)

On this page

- [Static Assets (ASSETS Binding)](#static-assets-assets-binding)
- [Runtime Cache with KV](#runtime-cache-with-kv)
- [Browser Rendering](#browser-rendering)
- [Troubleshooting](#troubleshooting)

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