A curated list of tools, libraries, and resources for generating Open Graph images
Open Graph images are the preview images shown when you share a link on social media. This list covers everything from APIs and libraries to templates and best practices.
- OG:IMAGE - Simple API that generates beautiful OG images. One URL = one image. 8 templates, $9/mo Pro tier.
GET /api/og?title=Hello - Vercel OG - Generate dynamic OG images at the edge using React components. Free for Vercel users.
- Cloudinary - Image transformation API with OG image support. Free tier available.
- Bannerbear - Auto-generate images and videos. From $49/mo.
- Placid - Design templates and generate images via API. From $19/mo.
- RoboHash - Generate unique robot avatars. Free, useful for placeholder OG images.
- @vercel/og - Vercel's official OG image generation library using Satori.
- satori - Convert HTML/CSS to SVG. Powers Vercel OG.
- puppeteer - Headless Chrome for screenshot-based OG generation.
- playwright - Cross-browser automation, alternative to Puppeteer.
- node-canvas - Cairo-backed Canvas implementation for Node.js.
- sharp - High-performance image processing, useful for post-processing OG images.
- Pillow - Python Imaging Library fork. Standard for image generation.
- imgkit - HTML to image using wkhtmltoimage.
- playwright-python - Python version of Playwright.
- ruby-vips - Ruby bindings for libvips image processing.
- mini_magick - Ruby wrapper for ImageMagick.
- Next.js - Built-in OG image generation with
opengraph-image.tsx. - Astro - Static site generator with OG image recipes.
- SvelteKit - Use with satori or puppeteer.
- Remix - Use resource routes for OG generation.
- OG Image Playground - Vercel's interactive playground for designing OG images.
- Figma OG Image Templates - Community templates on Figma.
- Canva Social Media Templates - Drag-and-drop templates.
| Platform | Recommended Size | Aspect Ratio |
|---|---|---|
| Twitter/X | 1200×628 | 1.91:1 |
| 1200×630 | 1.91:1 | |
| 1200×627 | 1.91:1 | |
| Discord | 1200×630 | 1.91:1 |
| Slack | 1200×630 | 1.91:1 |
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of image" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />- Always use 1200×630 - It's the universal safe size.
- Keep text large - Text should be readable at thumbnail size.
- Use contrast - Ensure text stands out from background.
- Include branding - Add logo or consistent visual identity.
- Test everywhere - Use validators to check appearance.
- The Open Graph Protocol - Official specification.
- Twitter Cards Documentation - Twitter-specific requirements.
- Facebook Sharing Debugger - Debug and preview OG tags.
- LinkedIn Post Inspector - Test LinkedIn previews.
- How to Build an OG Image Generator - Vercel's guide.
- OpenGraph.xyz - Preview OG images across platforms.
- Meta Tags Tester - Test and generate meta tags.
- Twitter Card Validator - Test Twitter card appearance.
- Facebook Sharing Debugger - Debug Facebook sharing.
Contributions welcome! Read the contribution guidelines first.
