og-image-design

name	og-image-design
description	Use when designing Open Graph / Twitter Card preview images. Covers sizing, the typography that works at preview size, brand consistency across multiple URLs, and dynamic OG image generation.

Og Image Design

OG images are the preview cards on social. Designed poorly, they hurt. Designed well, they pull clicks.

Sizes

Standard: 1200×630 (1.91:1). Twitter Cards: 1200×600 or 1500×500 for large card. Same image works for most platforms.

Typography at preview size

Body 11-13px in real life shows as TINY in OG image. Use 48px+ for headlines. Bold weight. High contrast.

Brand consistency

Same template for every OG image. Logo + headline + accent color. User shouldn't have to guess who you are.

Dynamic generation

For blog / per-page: generate OG images dynamically (Vercel OG, Cloudinary, similar). Pull title + author + date into a template. Saves hours of manual work.

Test

Use Twitter Card Validator, Facebook Sharing Debugger. Image must load (cached aggressively). Test on a phone — most opens are mobile.

Common mistakes

Tiny text. No logo (no brand recognition). Same OG image for every page. Forgotten when site redesigns. Image too large (slow load on social).

Where this fits in X3 Compass

Applied across the X3 Compass design system.