OpenGraph+ reads HTTP cache headers from your responses to decide when to re-render social card images. Next.js gives you several ways to control these headers.

This page covers the Next.js side. For how OpenGraph+ handles caching at the HTTP level, see the HTTP Caching guide.

Route segment config

Set revalidate in a page or layout to control how long content is cached:

// app/blog/[slug]/page.tsx

// Revalidate every hour
export const revalidate = 3600

This tells Next.js (and OpenGraph+) that the content is valid for one hour before revalidation.

Custom headers in next.config.js

Set Cache-Control headers across routes:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/blog/:path*',
        headers: [
          { key: 'Cache-Control', value: 'public, max-age=86400' },
        ],
      },
      {
        source: '/',
        headers: [
          { key: 'Cache-Control', value: 'public, max-age=3600' },
        ],
      },
    ]
  },
}

Route handlers

For API routes or route handlers that generate responses:

// app/api/og/route.ts
export async function GET() {
  return new Response('...', {
    headers: {
      'Cache-Control': 'public, max-age=3600',
    },
  })
}

Meta tag overrides

If you can’t control HTTP headers (e.g., static hosting that strips custom headers), use meta tags instead:

export const metadata: Metadata = {
  other: {
    'og:plus:cache:max_age': '86400',
    'og:plus:cache:etag': 'v1-about-page',
  },
}

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