OG Image Gallery

Looking across these examples, the cards that work have the same few things in common:

1. One clear message. A product name and a short value line, not a paragraph. In a feed the image is often shown 300–500 px wide, so anything smaller than a headline disappears.
2. Safe margins. Platforms crop differently (X trims to 2:1), so the headline and logo sit well inside the edges.
3. The product, not just the logo. SaaS and app cards that show a real screen tell people what they'll get before they click.
4. High contrast. Dark text on light, or the reverse. Busy photo backgrounds make text unreadable at feed size.
5. One per page. The strongest sites give every blog post, product and doc page its own card instead of reusing the homepage image.

• AI: mostly a bold wordmark or a single line of promise. Few show the product, so a real output (a generated image, a transcript) stands out.
• SaaS: product UI screenshots with a one-line benefit, often on the brand colour.
• Developer Tools: dark backgrounds, code or terminal snippets, and a short technical claim.
• Fintech: clean layouts, cards and charts, with numbers used as proof.
• Consumer Apps: device mockups, or the app icon large and centred.
• E-commerce: photography first, minimal text.
• Design Tools, Agencies & Portfolios: type-led, often just a name in a strong typeface or a single piece of work.
• Media & Learning: generated per page with the page's own title, common on blogs, newsletters and docs.
• Animated: GIF cards. X and Slack show the first frame only, so that frame has to work on its own.

The collection started on QRKit, the QR code generator from the team behind BetterLaunch. Here it has been re-sorted for people launching products and extended with well-known launches like Linear, Resend, Cursor and Supabase. Every card is a real og:image that a live site uses.