Go-Live Clearance

Social preview · Open Graph

Open Graph Checker

A broken share card is the fastest way to look unfinished on launch day. Paste the URL you will share — we check og:title, og:image, og:description and Twitter cards, then stamp CLEARED / HOLD / DENIED.

OG failures we catch

These make your Product Hunt, Twitter, or LinkedIn post look broken — even when the page itself works fine.

  • Missing og:title or og:image

    Social platforms fall back to a plain link or blank card. Your carefully written headline and hero image never appear.

  • og:image returns 404 or wrong host

    The path points to a staging bucket or *.vercel.app. You see it in your browser, but social crawlers get nothing.

  • og:image too small or wrong aspect ratio

    Under 200×200 px some platforms drop the card entirely. 1.91:1 (1200×630) is the safe default.

  • No Twitter card meta (twitter:card / twitter:image)

    Twitter/X falls back to a summary-without-image card. Your launch tweet looks like a bare link.

  • og:url or canonical points at preview domain

    Shares attach to *.vercel.app instead of your real domain. Future shares and search signals fragment.

Next.js metadata fixes

Prefer the App Router metadata API over hand-written <meta> tags.

app/layout.tsx — OG + Twitter card

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 for social cards',
    url: 'https://yourdomain.com',
    siteName: 'Your Product Name',
    images: [{ url: '/og.png', width: 1200, height: 630 }],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Product Name',
    description: 'One-line value prop for social cards',
    images: ['/og.png'],
  },
}

Per-page OG override — app/about/page.tsx

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us — Your Product',
  openGraph: {
    title: 'About Us — Your Product',
    description: 'What we build and why.',
    images: [{ url: '/og-about.png' }],
  },
}

Still check by hand

  • □Use Twitter Card Validator and Facebook Sharing Debugger after deploy
  • □Make sure og:image is an absolute URL (not /og.png without the host)
  • □Clear social caches if you update OG tags after the first share

Related