Cloudflare Pages Open Graph Tags: Static Site OG Meta Setup

Add og:title, og:image, og:description, and Twitter card tags to Cloudflare Pages sites — covering static HTML, Astro, Next.js, and cache considerations.

Cloudflare Pages and OG tags

Cloudflare Pages is a JAMstack hosting platform that deploys static assets globally via Cloudflare's CDN. Because it serves pre-built HTML files, social crawlers receive fully rendered pages — OG tags you include in your HTML are immediately visible to Twitter, LinkedIn, Discord, and other platforms.

The main consideration with Cloudflare Pages is CDN caching: after updating OG tags, you may need to purge Cloudflare's cache to ensure crawlers see the latest version.

Static HTML: add tags to each page

For plain HTML sites on Cloudflare Pages, add OG meta tags to the <head> of each page:

<head>
  <meta charset="UTF-8">
  <title>My Page Title</title>

  <!-- Open Graph -->
  <meta property="og:title" content="My Page Title" />
  <meta property="og:description" content="My page description." />
  <meta property="og:image" content="https://mysite.pages.dev/og.jpg" />
  <meta property="og:url" content="https://mysite.pages.dev/" />
  <meta property="og:type" content="website" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="My Page Title" />
  <meta name="twitter:description" content="My page description." />
  <meta name="twitter:image" content="https://mysite.pages.dev/og.jpg" />
</head>

Framework deployments (Astro, Next.js, SvelteKit)

Cloudflare Pages supports popular frameworks with server-side rendering via Cloudflare Workers. Follow the framework-specific guide for OG tag implementation, then deploy to Cloudflare Pages as normal:

  • Astro: use <meta> tags in layout components. Astro's static output works perfectly with Cloudflare Pages.
  • Next.js: use the Metadata API with the @cloudflare/next-on-pages adapter for edge SSR. OG tags in generateMetadata() render on the edge.
  • SvelteKit: use <svelte:head> in layouts with the Cloudflare adapter.

Cloudflare cache and OG tags

Cloudflare aggressively caches HTML. After pushing an OG tag update, platforms may still see the old version because Cloudflare is serving a cached copy. To fix:

  1. Go to Cloudflare Dashboard → Caching → Purge Cache
  2. Select "Purge Everything" or enter specific URLs
  3. After purging, use each platform's scraper tool (Twitter Card Validator, LinkedIn Post Inspector) to force a re-fetch

Alternatively, add a Cache-Control header for HTML files in your _headers file:

# public/_headers
/*.html
  Cache-Control: public, max-age=0, must-revalidate

Using _headers for Open Graph images

Your OG images should be served with long cache TTLs since they change infrequently. Add to your _headers file:

# public/_headers
/og.jpg
  Cache-Control: public, max-age=86400
  Content-Type: image/jpeg

/images/*
  Cache-Control: public, max-age=31536000, immutable

Common Cloudflare Pages OG mistakes

  • Using .pages.dev URL in og:image: if you have a custom domain, use it in og:image to avoid inconsistency.
  • Forgetting to purge cache: after updates, always purge Cloudflare cache before testing with platform debuggers.
  • Relative image URLs: og:image must be an absolute HTTPS URL.

Preview your OG tags free at OGFixer.com → Paste your Cloudflare Pages URL to check how your link card looks on Twitter, LinkedIn, Discord, and Slack.

← All guides