Guide
OG images that actually convert
Dimensions, typography, and contrast rules for 1200×630 cards that look sharp everywhere.
OG images are your ad on every link share. Most are blurry, off-brand, or unreadable at thumbnail size.
Dimensions
1200×630 is the standard. Safe zone: keep text and logos inside the center 80%. Platforms crop edges.
Typography
Large, high-contrast titles. Two lines max. If it doesn't read at 200px wide, rewrite it.
Contrast
Test on both light and dark Twitter/X backgrounds. Semi-transparent overlays behind text help.
Tools
We built our OG generator because we hit this problem weekly: FLUX backgrounds + crisp Satori text, composited server-side.
Related
- 01
AtroUI indie site kit: portfolio chrome you can own
We extracted the narrow personal homepage patterns from a real portfolio into AtroUI: ~640px chrome, command menu, ship log, personal hero, reading shelf, and more. A second altitude next to studio Blocks.
Essay · 8 min read - 02
Introducing AtroUI
We extracted the UI we actually ship on client sprints into a free React / shadcn registry. Own the source, edit CONTENT, keep the dark-first system.
Essay · 8 min read
Want this built for you?
Fixed-scope MVP sprints and AI integrations. Same stack as this guide.