---
title: "Cloudflare Deployment · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/guides/cloudflare"
last_updated: "2026-08-16T09:55:30.080Z"
meta:
  description: "Deploy Nuxt OG Image to Cloudflare Workers or Pages."
  "og:description": "Deploy Nuxt OG Image to Cloudflare Workers or Pages."
  "og:title": "Cloudflare Deployment · 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)

**Core Concepts**

# **Cloudflare Deployment**

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)

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

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

### Cloudflare Workers (Module)

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

nuxt.config.ts

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

Then build and deploy:

```bash
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:

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

### Custom Wrangler Config

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

wrangler.toml

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

## Runtime Cache with KV

The module caches rendered OG images 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

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

### 2. Add the Binding

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

### 3. Configure Cache Storage

nuxt.config.ts

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

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

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

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

### 2. Add the Binding

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

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

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

`**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]**`.

**Was this page helpful?**

### **Related **

[**Runtime Cache**](https://nuxtseo.com/docs/og-image/guides/runtime-cache)

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

[**Troubleshooting Nuxt OG Image**](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting)

[**Runtime Cache** How OG image caching works at runtime, including internal storage, CDN edge caching, and platform integration.](https://nuxtseo.com/docs/og-image/guides/runtime-cache) [**Route Rules** Learn how to use route rules to customize your OG Image.](https://nuxtseo.com/docs/og-image/guides/route-rules)