Back to docsRecipe

OpenGraph image design

A repeatable recipe for designing social preview images that convert clicks into customers. Every Meridian page deserves a sharp OG image.

Dimensions & format

  • 1200×630 px — the universal sweet spot
  • PNG or JPEG at 80% quality, keep under 300 KB
  • 1.91:1 aspect ratio, never crop faces or key text

Layout grid

Divide the canvas into three horizontal bands. Top 20% for the Meridian wordmark on solid #0A0612. Middle 60% for the hero headline in bold white text with a violet gradient underline. Bottom 20% for a subtle CTA and the domain.

Typography

  • Headline: Inter Bold, 64–72 px, line-height 1.1
  • Subtitle: Inter Regular, 28 px, #9CA3AF
  • Never exceed two lines for the headline

Color palette

Violet #8B5CF6
Pink #F472B6
Dark #0A0612

Delivery checklist

  • Set og:image meta tag to absolute URL
  • Include og:image:width and og:image:height
  • Test with Facebook Sharing Debugger and Twitter Card Validator
  • Cache at the CDN edge for at least 7 days

Pro tip: Generate OG images dynamically with @vercel/og or a headless browser worker. Keep templates versioned in your repo so every deploy regenerates fresh assets.