Netlify Open Graph Tags: Deploy, Debug, and Fix OG Images

Fix og:image and Twitter card issues on sites deployed to Netlify — including cache-busting, edge functions for dynamic OG images, and redirect rules.

OG tags on Netlify: the fundamentals

Netlify hosts static sites and Jamstack apps. Open Graph tags must be present in the HTML <head> that Netlify serves — whether that's statically generated at build time or rendered by a Netlify Function or Edge Function at request time. Netlify itself does not add OG tags; your framework or generator does.

Static site (Hugo, Jekyll, Eleventy, Astro)

Add OG tags in your base layout template. Your static site generator will inject them at build time:

<!-- Hugo base layout (layouts/_default/baseof.html) -->
<head>
  <meta property="og:title"       content="{{ .Title }}" />
  <meta property="og:description" content="{{ .Description }}" />
  <meta property="og:image"       content="{{ .Params.ogImage | absURL }}" />
  <meta property="og:url"         content="{{ .Permalink }}" />
  <meta property="og:type"        content="article" />
  <meta name="twitter:card"       content="summary_large_image" />
</head>

For Astro: use Astro.props and the <SEO> component or direct meta tags. For Eleventy: use frontmatter or global data files.

Dynamic OG images with Netlify Edge Functions

For personalized or content-specific OG images, create a Netlify Edge Function that generates a PNG on the fly:

// netlify/edge-functions/og-image.js
export default async (request, context) => {
  const url = new URL(request.url);
  const title = url.searchParams.get('title') || 'My Site';

  // Use @vercel/og / satori (works in Deno/edge)
  const { ImageResponse } = await import('https://deno.land/x/og_edge/mod.ts');
  return new ImageResponse(
    {
      type: 'div',
      props: {
        style: { fontSize: 56, color: '#fff', background: '#0a0a0a',
                 width: '100%', height: '100%', display: 'flex',
                 alignItems: 'center', justifyContent: 'center', padding: '48px' },
        children: title
      }
    },
    { width: 1200, height: 630 }
  );
};

export const config = { path: '/og' };

Then reference it in your HTML:

<meta property="og:image"
  content="https://yourdomain.netlify.app/og?title=My+Post+Title" />

Force a cache refresh after updating OG tags

Netlify CDN caches pages and assets. After updating OG tags, you have two options:

  1. Trigger a new deploy: Any new deploy invalidates Netlify's CDN cache for changed files. This is the most reliable method.
  2. Cache-busting headers via netlify.toml:
    # netlify.toml
[[headers]]
  for = "/*.html"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

Note: Social platform scrapers (Facebook, Twitter, Slack) also cache previews independently. Use their respective debugger tools to purge those caches after your Netlify deploy.

Common Netlify OG issues

  • Preview shows old content: Old Netlify cache + social platform scraper cache. Redeploy, then use platform debug tools.
  • og:image not found (404): Check your image path is correct relative to your public/ or static/ folder and that the file was included in the build.
  • Works locally but not on Netlify: Local dev servers often serve from localhost. Social scrapers can't reach localhost — you need a deployed URL.

Verify your Netlify OG tags

After deploying, paste your live Netlify URL into OGFixer to see exactly how Twitter, Slack, Discord, and LinkedIn will render your preview.

Related guides