og-image-and-screenshot-patterns

name	og-image-and-screenshot-patterns
description	Use when creating Open Graph images for social sharing. OG images appear in Twitter, Slack, LinkedIn previews.

OG Image and Screenshot Patterns

OG image = 1200×630px. Brand-aligned visual + headline + product name. Tools: Cloudflare Workers + ImageResponse, Puppeteer, or designed in Figma.

OG image dimensions

Standard: 1200×630px (1.91:1 ratio) Also useful: 1200×1200 (square, Twitter card) LinkedIn: 1200×627 Facebook: 1200×630 Twitter card: 1200×675 (16:9)

Use 1200×630 as primary; works everywhere.

OG image content

1. Brand logo / wordmark (top or corner)
2. Headline (8-15 words, large)
3. Brand colors (accent + cream)
4. Optional sub-headline or tagline
5. Optional brand visual or icon
6. Optional URL or product name

Generation patterns

1. Static — design in Figma, export, embed via meta tags
2. Dynamic via Workers — Cloudflare Worker generates per-page OG image
3. Dynamic via Puppeteer — render HTML to PNG
4. Dynamic via ImageResponse — Next.js OG image route
5. AI-generated — base template + LLM-fill headline

Where this fits in the X3 empire

OG image pattern for CardPrepAI shared content.