Create an OG Image with AI
An OG image is the 1200×630 card that appears when your link is shared. It is not a thumbnail, not a hero image, and not a place to put your entire value proposition. The job is narrower: make someone recognise the link, trust it, and click.
What you get
- A 1200×630 PNG (or 2400×1260 for retina) under 300 KB
- Title text inside the safe area — roughly the centre 1080×560
- Enough contrast to read at 300 px wide in a Slack sidebar
- A file name that says what it is:
groclawa-og-pricing.png
Why most OG images fail
Three predictable reasons: text sits within 40 px of the edge and gets cropped; the title is set at 24 px so it's unreadable in a feed; and the image says the company name but not the promise. Fix those and you're ahead of most SaaS blogs.
Three prompts that work
1. The editorial card — "Create a 1200×630 OG image. Off-white background, one large serif headline in the upper-left, a single product screenshot bleeding off the right edge, and a 2 px rule under the headline. No logo larger than 120 px wide."
2. The data card — "Make an OG image where the number 13,761 is the hero, set at 180 px, with the label 'indexed pages' beneath it in 28 px. Keep 80 px of padding on all sides."
3. The before/after card — "Split the canvas vertically. Left: a plain page screenshot at 40% opacity. Right: the same page with the new design. A 4 px white divider, and a caption in the bottom-left corner."
Skills that render them
| Skill | Style | Installs |
|---|---|---|
| Notion Style OG Image | Minimal, document-like | 197 |
| Linktree Style OG Image | Bold colour blocks | 142 |
| Apple Style OG Image | Product-forward, lots of air | 59 |
| OpenAI Style OG Image | Restrained, typographic | 54 |
| A24 Style OG Image | Cinematic, grain, letterboxing | 50 |
| Linear Style OG Image | Dark, precise, gradient edge | 49 |
Pre-publish checklist
- [ ] Rendered at 1200×630, not stretched from a square
- [ ] Title readable at 25% zoom
- [ ] Nothing important within 60 px of any edge
- [ ] Tested in the X card validator and a Slack DM
- [ ] Alt text written for the page, not the image
FAQ
Do I need a separate image per page? Yes for money pages. A generic brand card is fine for legal and utility pages.
JPG or PNG? PNG for type and UI, JPG for photography. Keep both under 300 KB.
Can the agent pull the title from my page? Yes — give it the URL and ask for the OG image using the page's H1.