Image Tools
Open Graph / Social Card Image Generator
Generate a 1200×630 Open Graph social card image with custom title, subtitle, background and text colours. Preview live and download as a PNG to use with og:image meta tags.
Preview (1200×630 scaled)
What is an Open Graph Image?
The Open Graph protocol allows any web page to specify a preview image that is shown when the
page is shared on social media. The standard og:image meta tag expects a 1200×630 pixel
image. This tool generates that image directly in your browser with no server round-trip required.
OG image specification
The Open Graph image standard (ogp.me) defines several related tags:
-
og:image- the primary image URL. Recommended size: 1200×630 px (1.91:1 aspect ratio). Minimum supported: 600×314 px. -
og:image:alt- alt text for the image, important for accessibility and screen readers on social platforms. -
og:image:type- MIME type (e.g.,image/jpeg,image/png). -
og:image:widthandog:image:height- help social scrapers size the image without downloading it first.
For square platforms (some Instagram and WhatsApp previews), 1200×1200 px is recommended as an alternative.
Platform-specific requirements
| Platform | Recommended size | Max file size |
|---|---|---|
| 1200×630 px | 8 MB | |
| X (Twitter) | 1200×600 px | 5 MB (JPG/PNG/WEBP) |
| 1200×627 px | 5 MB | |
| 1200×630 px | 300 KB recommended | |
| Discord | Auto-resizes (uses og:image) | 8 MB |
| Slack | Auto-resizes (uses og:image) | No strict limit |
Design best practices
- Large text: text should be at least 24px equivalent at the full 1200×630 display size. At thumbnail scale (roughly 400 px wide), smaller text becomes unreadable.
- Single focal point: one clear, centered visual element reads better in a card format than a busy composition.
- Avoid fine detail: intricate graphics compress poorly (JPEG artifacts, pixelation). Flat design with bold shapes and high contrast works best.
- Include branding: logo or site name in a corner. The image is often the first impression from a shared link.
- Test at thumbnail scale: before publishing, shrink the image to 300 px wide and verify it still communicates clearly.
How to add the OG image tag
Place these three lines in your HTML <head>:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://example.com/og-image.png" />
The image URL must be absolute (including https://). Social crawlers do not
follow relative paths.