Caching Images · 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

# Caching Images

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

In cases where you need to generate images at runtime, Nuxt OG Image provides a caching layer to reduce the load on your server.

The module enables SWR caching by default with a cache time of 72 hours.

## [Build Cache (CI Persistence)](#build-cache-ci-persistence)

For CI/CD environments, you can enable persistent build caching to avoid regenerating images between deployments when the output would be identical.

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    buildCache: true
  }
})
```

This stores rendered images in `node_modules/.cache/nuxt-seo/og-image/` during prerendering (when using [pnpm](https://pnpm.io), this will be in the `node_modules/.pnpm` directory's cache structure; consider using a custom cache directory for consistency). The cache automatically invalidates when:

- **Options change** - Different title, description, or other props
- **Template changes** - The component file is modified
- **Module version changes** - You upgrade `nuxt-og-image`

### [Automatic Cleanup](#automatic-cleanup)

After each prerender, orphaned cache files (images no longer generated) are automatically cleaned up if they're older than 7 days. This prevents unbounded cache growth while preserving images that social platforms may still be referencing.

### [CI Configuration](#ci-configuration)

To persist the cache between CI runs, add the cache directory to your CI configuration:

GitHub Actions

GitLab CI

```
- name: Cache OG Images
  uses: actions/cache@v4
  with:
    path: node_modules/.cache/nuxt-seo
    key: og-images-${{ github.ref_name }}
```

```
cache:
  paths:
    - node_modules/.cache/nuxt-seo/
```

### [Custom Cache Directory](#custom-cache-directory)

You can customize the cache location:

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    buildCache: {
      base: '.cache/og-image'
    }
  }
})
```

## [Runtime Cache Storage](#runtime-cache-storage)

Nitro caching by default will use the memory as a cache storage. This means that if you restart your server, the cache will be cleared.

It's recommended to set a persistent cache storage. This can be done using the `runtimeCacheStorage` option.

The option takes the same configuration as the Nuxt `nitro.storage` option. See the [Nitro Storage Layer](https://nitro.unjs.io/guide/storage) documentation for more details.

For example:

```
export default defineNuxtConfig({
  ogImage: {
    // cloudflare kv binding example, set your own config
    runtimeCacheStorage: {
      driver: 'cloudflare-kv-binding',
      binding: 'OG_IMAGE_CACHE'
    }
  }
})
```

See the [Cloudflare guide](https://nuxtseo.com/docs/og-image/guides/cloudflare#runtime-cache-with-kv) for full KV setup instructions.

### [Using Runtime Config](#using-runtime-config)

If you need to configure the cache storage with runtime environment variables (e.g., for different [Redis](https://redis.io) hosts per environment), you can mount your own storage driver and reference it by key.

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    // Reference your own storage mount by key
    runtimeCacheStorage: 'og-image-cache'
  }
})
```

Then mount the storage in a Nitro plugin where you have access to runtime config:

server/plugins/og-image-cache.ts

```
import redisDriver from 'unstorage/drivers/redis'

export default defineNitroPlugin(() => {
  const config = useRuntimeConfig()

  const driver = redisDriver({
    base: 'og-image',
    host: config.redis.host,
    port: config.redis.port,
    password: config.redis.password,
  })

  useStorage().mount('og-image-cache', driver)
})
```

This approach lets you:

- Use environment variables for connection details
- Share a single Redis connection across multiple features
- Configure the driver dynamically at runtime

## [Cache Time](#cache-time)

You can change the cache time of an image by providing `cacheMaxAgeSeconds` in seconds when defining the image.

```
defineOgImage('NuxtSeo', { title: 'Hello' }, { cacheMaxAgeSeconds: 30 })
```

Alternatively, you can change the default cache time in your nuxt.config.

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    defaults: {
      cacheMaxAgeSeconds: 60 * 60 * 24 * 7 // 7 days
    }
  }
})
```

## [Query Parameters](#query-parameters)

By default, query parameters are ignored when generating cache keys. This means `/page` and `/page?ref=twitter` share the same cache entry.

If your OG images depend on query parameters, you can include them in the cache key:

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    cacheQueryParams: true
  }
})
```

## [Custom Cache Key](#custom-cache-key)

For full control over caching, you can provide a custom cache key:

```
defineOgImage('NuxtSeo', { title: 'Hello' }, { cacheKey: 'my-custom-key' })
```

This is useful when you need to cache based on specific criteria that aren't part of the URL.

## [Cache Version](#cache-version)

By default, the cache is namespaced with the module version. This means upgrading `nuxt-og-image` will invalidate all cached images.

To persist cache across module upgrades, set a static `cacheVersion` or disable it entirely:

Named

Disable

```
export default defineNuxtConfig({
  ogImage: {
    cacheVersion: 'v1',
  }
})
```

```
export default defineNuxtConfig({
  ogImage: {
    cacheVersion: false // no version namespace
  }
})
```

This is useful for production deployments where you want to control cache invalidation manually.

## [Reducing URL Length](#reducing-url-length)

Runtime OG image URLs encode all options in the path. Passing many props or long values can produce long URLs. See the [Performance](https://nuxtseo.com/docs/og-image/guides/performance) guide for strategies.

## [Purging the cache](#purging-the-cache)

If you need to purge the cache, you can do so by visiting the OG Image URL appended with a `?purge` query param.

For example, to purge the OG Image cache for this page you could append `?purge` to the OG image URL shown in the meta tags.

## [Bypassing the cache](#bypassing-the-cache)

While not recommended, if you prefer to opt-out of caching, you can do so by providing a `0` second `cacheMaxAgeSeconds` or disabling `runtimeCacheStorage`.

Disable single caching

Disable all caching

```
<script lang="ts" setup>
defineOgImage('NuxtSeo', { title: 'Hello' }, {
  cacheMaxAgeSeconds: 0 // disable at an individual image level
})
</script>
```

```
export default defineNuxtConfig({
  ogImage: {
    // disable at a global level
    runtimeCacheStorage: false,
  }
})
```

[](https://nuxtseo.com/tools/social-share-debugger)**Clear platform caches** - Use our [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger) to force Twitter, Facebook, and LinkedIn to re-fetch your OG images.

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

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

Did this page help you?

[Route Rules Learn how to use route rules to customise your OG Image.](https://nuxtseo.com/docs/og-image/guides/route-rules) [JPEGs Learn how to generate JPEG images instead of PNG for Nuxt OG Image.](https://nuxtseo.com/docs/og-image/guides/jpegs)

On this page

- [Build Cache (CI Persistence)](#build-cache-ci-persistence)
- [Runtime Cache Storage](#runtime-cache-storage)
- [Cache Time](#cache-time)
- [Query Parameters](#query-parameters)
- [Custom Cache Key](#custom-cache-key)
- [Cache Version](#cache-version)
- [Reducing URL Length](#reducing-url-length)
- [Purging the cache](#purging-the-cache)
- [Bypassing the cache](#bypassing-the-cache)

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