example.com
Your title here
Your description appears here when shared on social media.
1200 × 630
Previews
Twitter / X
1200 × 628
1200 × 630
example.com
Your title here
Your description appears here when shared on social media.
Facebook
1200 × 630
1200 × 630
EXAMPLE.COM
Your title here
Your description appears here when shared on social media.
LinkedIn
1200 × 627
1200 × 630
Your title here
example.com
WhatsApp
1200 × 630
1200 × 630
https://example.com
Slack
1200 × 630
Discord
1200 × 630
example.com
Your title here
Your description appears here when shared on social media.
1200 × 630
About OpenGraph Studio
OpenGraph Studio is a free, open-source Open Graph image generator and social card preview tool. Design, crop, compress, and preview og:image assets at the standard 1200 × 630 resolution and see exactly how your link will look when shared on Twitter / X, Facebook, LinkedIn, WhatsApp, Slack, and Discord — all in your browser, with no signup, no upload, and no server-side processing of your images.
Use it to crop a photo to the correct OG aspect ratio, compress JPEG, PNG, or WEBP exports under 200 KB, and copy a complete set of og: and twitter: meta tags ready to paste into your site's <head>.
Recommended Open Graph image sizes & specs
| Spec | Recommended | Notes |
|---|---|---|
| Dimensions | 1200 × 630 px | Standard 1.91:1 aspect for all major platforms |
| Safe zone | 1080 × 566 px | ~60 px margin so nothing important gets cropped |
| File size | ≤ 200 KB | Up to 500 KB acceptable; over 1 MB risks rejection |
| Format | JPEG / PNG / WEBP | JPEG is the safest choice; WEBP gives smaller files |
| Title | ≤ 60 chars | Hard caps: WA 65 · TW/LI 70 · Slack 75 · FB 100 |
| Description | 130–160 chars | WhatsApp truncates at ~175, Twitter at 200 |
Features
- Interactive 1200×630 crop tool with live dimension readout
- Quality slider for JPEG, PNG & WEBP export
- One-click auto-compress to under 200 KB
- Drag-and-drop, click, or paste image upload
- Fetch existing og:image from any URL via serverless edge proxy
- Per-platform character truncation in live previews
- Generates 17+
og:andtwitter:meta tags - Source-dimension warning if image is below recommended size
- Copy meta tags to clipboard with one click
- 100% client-side image processing — your images never leave your browser
Frequently asked questions
What is an Open Graph (OG) image?
An OG image is the preview image that appears when your website link is shared on social media — Twitter / X, Facebook, LinkedIn, WhatsApp, Slack, Discord. It's defined in your page's HTML <head> with a <meta property="og:image" content="…"> tag. The recommended size is 1200×630 pixels (a 1.91:1 aspect ratio) and the file should ideally be under 200 KB.
What is the recommended OG image size?
The recommended Open Graph image size is 1200 × 630 pixels (1.91:1 aspect). This is the standard supported by Facebook, LinkedIn, WhatsApp, Slack, Discord, and Twitter's summary_large_image card. Keep important content within a 1080 × 566 safe zone (roughly a 60-pixel margin) so nothing important gets cropped on smaller previews.
What's the maximum length for og:title and og:description?
Aim for ≤ 60 characters on the title and 130–160 characters on the description for clean rendering on every platform. Hard caps for title: WhatsApp ~65, Twitter / LinkedIn 70, Slack 75, Facebook 100. For description, WhatsApp truncates around 175 and Twitter around 200 characters. OpenGraph Studio shows live truncation in each preview card so you can see exactly what will appear.
How big should the OG image file be?
Aim for under 200 KB for best loading performance. Up to 500 KB is acceptable. Over 1 MB risks being downsampled or rejected by some platforms (Facebook in particular). The auto-compress button finds the highest JPEG or WEBP quality that fits under the 200 KB target via binary search.
Do I need separate Twitter Card and Open Graph tags?
Twitter falls back to og: tags if no twitter: equivalent is present, so technically no — but explicit twitter:card, twitter:title, twitter:description, and twitter:image tags give you precise control over how your link appears on Twitter / X. OpenGraph Studio outputs both sets.
Is OpenGraph Studio free? Do I need an account?
Yes — completely free and open-source under the MIT license. No account, no signup, no upload. All image processing happens locally in your browser using the Canvas API. The hosted version uses privacy-friendly Vercel Web Analytics (no cookies, no IP storage, GDPR-compliant). Source on GitHub.
Does it work for self-hosted blogs, Next.js, Astro, Hugo, etc.?
Yes — the generated meta tags are framework-agnostic standard HTML. Paste them into your page's <head> in Next.js (App Router metadata or layout), Astro (slot in your base layout), Hugo (partial template), Jekyll, WordPress, or any plain static HTML site. Works with React, Vue, Svelte, Solid — the tags are just HTML.