OpenGraph+ reads HTTP cache headers from your responses to decide when to re-render social card images. Nuxt gives you several ways to control these headers.
This page covers the Nuxt side. For how OpenGraph+ handles caching at the HTTP level, see the HTTP Caching guide.
Route rules
Set cache headers per route pattern in nuxt.config.ts:
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { headers: { 'cache-control': 'public, max-age=3600' } },
'/blog/**': { headers: { 'cache-control': 'public, max-age=86400' } },
'/about': { headers: { 'cache-control': 'public, max-age=604800' } },
}
})
This is the simplest way to control caching across your Nuxt app.
Server middleware
For dynamic cache logic, use a server middleware:
// server/middleware/cache.ts
export default defineEventHandler((event) => {
setResponseHeader(event, 'Cache-Control', 'public, max-age=3600')
})
Or set headers in specific server routes:
// server/api/posts/[slug].ts
export default defineEventHandler((event) => {
setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
// ...
})
Static generation
If you’re using nuxt generate for static site generation, your cache headers come from your hosting provider (Vercel, Netlify, Cloudflare Pages, etc.). Configure headers through their respective config files.
For hybrid rendering with prerender: true on specific routes:
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/blog/**': { prerender: true },
}
})
Pre-rendered pages are served as static files. Cache headers depend on your hosting configuration.
Meta tag overrides
If you can’t control HTTP headers, use meta tags instead:
<script setup>
useHead({
meta: [
{ property: 'og:plus:cache:max_age', content: '86400' },
{ property: 'og:plus:cache:etag', content: 'v1-about-page' },
]
})
</script>
See the HTTP Caching guide for the full list of meta tag overrides.
Purging cached images
When you need to force a refresh immediately, go to your website dashboard, find the page, and click purge. This clears the cached image and triggers a re-render on the next request.
Recommendations
| Page type | Strategy |
|---|---|
| Static pages (about, contact) | cache-control: public, max-age=604800 (1 week) |
| Blog posts | cache-control: public, max-age=86400 (1 day) |
| Index / listing pages | cache-control: public, max-age=3600 (1 hour) |
| Dynamic / user content | No caching or short TTL |