Go-Live Clearance

Social preview · OG image broken

OG Image Not Showing

You designed the perfect og.png, shared the link, and got a blank card. The causes are always one of a few patterns: wrong host, missing tags, wrong size, or a stale social cache. Paste your URL — we check og:image, twitter:image, accessibility, and dimensions, then stamp CLEARED / HOLD / DENIED.

Why OG images do not show

These are the causes we see most often — ranked by frequency.

  • og:image URL is relative (not absolute)

    /og.png without the full host. Social crawlers cannot resolve it. Next.js needs metadataBase to generate absolute URLs.

  • og:image points at *.vercel.app or staging host

    metadataBase is not set to the production domain. The image URL is technically valid but crawlers may not access it, and the card links to the wrong origin.

  • og:image returns 404 or non-image content

    The file was not deployed, or the path is wrong. Some platforms silently drop the card; others show a blank thumbnail.

  • og:image is too small (< 200×200 px)

    Facebook, Twitter, and LinkedIn have minimum dimensions. Under 200px they fall back to a text-only card.

  • Social platform cache is stale

    You fixed the OG image, but the platform cached the old version. Facebook caches for 30+ days; Twitter caches on first share.

  • Missing twitter:card meta

    Twitter/X requires twitter:card to render any card. Without it, the tweet shows a bare link — even if og:image is correct.

Next.js OG image fixes

Fix the root cause — then clear the social caches.

app/layout.tsx — metadataBase + OG image

import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://yourdomain.com'),
  openGraph: {
    title: 'Your Product Name',
    description: 'One-line value prop',
    images: [{
      url: '/og.png',
      width: 1200,
      height: 630,
      alt: 'Your Product Name — tagline',
    }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Product Name',
    description: 'One-line value prop',
    images: ['/og.png'],
  },
}

After fixing: clear social caches

# Facebook Sharing Debugger
# https://developers.facebook.com/tools/debug/

# Twitter Card Validator
# https://cards-dev.twitter.com/validator

# LinkedIn Post Inspector
# https://www.linkedin.com/post-inspector/

# Steps:
# 1. Paste your URL in each tool
# 2. Click "Scrape Again" / "Fetch new information"
# 3. Verify the preview card shows your image
# 4. Re-share the link — the old cache is now replaced

Still check by hand

  • □Confirm og:image URL is absolute: https://yourdomain.com/og.png (not /og.png)
  • □Verify the image file actually exists and returns 200 (curl -I the URL)
  • □Use 1200×630 px (1.91:1 ratio) — works on all platforms
  • □Clear social caches AFTER deploying the fix, not before

Related