What is an Open Graph Image?
The complete guide to OG images: what they are, why every page needs one, correct sizes for 2026, and how to create them in seconds.
Table of contents
If you've ever shared a link on Twitter, Slack, or LinkedIn and seen a preview card with an image, title, and description — that's an open graph imageat work. And if your pages don't have one, you're losing clicks every single day.
What is an open graph image?
An open graph image (OG image) is a specific image that represents a web page when that page is shared on social media platforms, chat apps, and other websites. It's controlled by the og:image meta tag in your HTML <head>.
When someone pastes your URL into Twitter, Facebook, LinkedIn, Slack, Discord, WhatsApp, or iMessage, the platform fetches your page and looks for OG meta tags to build a rich preview card. The OG image is the visual centerpiece of that card.
The open graph protocol
Open Graph is a protocol originally created by Facebook in 2010. It allows any web page to become a “rich object” in a social graph — meaning platforms can extract structured information about your page (title, description, image, author) and display it consistently across their platform.
The protocol defines a set of meta properties that you add to the <head> section of your HTML:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling description" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />Why every page needs an OG image
Here's the blunt truth: pages without OG images get fewer clicks. When your link appears in someone's Twitter feed or Slack channel without a preview image, it looks unfinished. People scroll past it. They assume it's spam.
A good OG image does three things:
- 1Grabs attention in a crowded feed. Visual content is processed 60,000x faster than text.
- 2Communicates the topic instantly. A well-designed image tells people what your page is about before they click.
- 3Builds trust. A professional preview card signals that your content is worth reading.
The data: clicks and engagement
More engagement with images vs. text-only links
More total views on articles with OG images
Increase in retweets when images are included
If you publish blog posts, documentation, or product pages without OG images, you're leaving traffic on the table every time someone shares your link.
The correct OG image size
The recommended open graph image size for 2026 is 1200 x 630 pixels. This gives you a 1.91:1 aspect ratio that looks great across all platforms. Keep your file size under 8MB (preferably under 1MB for fast loading).
Pro tip: Keep important text and logos within the center 1000x500px area. Platforms like Twitter crop the edges on certain display sizes.
For a deeper dive, read our complete guide to OG image sizes for 2026.
Platform-specific behavior
Each platform handles OG images slightly differently:
| Platform | Display size | Notes |
|---|---|---|
| Twitter / X | 1200x675 | Uses twitter:card meta tags. summary_large_image for OG-style cards. |
| 1200x630 | Original OG protocol creator. Full card with image, title, description. | |
| 1200x627 | Trims slightly. Professional audience — keep it clean. | |
| Slack | 1200x630 | Shows unfurled card in channels and DMs. |
| Discord | ~400x210 | Scales down. Use high contrast for readability. |
| 1200x630 | Large preview in chat. Loads on tap. | |
| iMessage | 1200x630 | Rich preview in Messages app on iOS. |
How to create OG images
There are three main approaches:
1. Use a dedicated OG image generator (recommended)
This is the fastest approach. Pick a template, type your headline, choose a brand color, and download a polished 1200x630 PNG. No design skills needed. Our OG Image Generator does this for free with a small watermark, or $9/month for no watermark and premium templates.
2. Design manually in Figma or Photoshop
Create a 1200x630 canvas, add your text and branding, export as PNG. Works fine for a single page, but doesn't scale when you publish multiple articles per week.
3. Generate dynamically with code
Use a library like satori + resvg-js to render OG images on the fly from a URL. This is how Vercel and Next.js sites do it. Our Pro plan includes a dynamic image API that does this for you — just drop a URL in your meta tag.
For a step-by-step walkthrough, see our guide on adding OG images to a Next.js site.
Tools for generating OG images
How to check your OG image
Before publishing, always verify your OG image renders correctly. Use these free tools:
- Twitter Card Validator — preview how your link looks on Twitter/X
- Facebook Sharing Debugger — see the Facebook preview and clear cache
- LinkedIn Post Inspector — check the LinkedIn preview
- OpenGraph.xyz — multi-platform preview tool
Common mistakes
Frequently asked questions
Do I need an OG image for every page?
Yes. Every page you want shared on social media should have a unique OG image. Blog posts, landing pages, product pages, documentation — all of them.
Can I use the same OG image for every page?
You can, but it's not recommended. A generic image performs worse than a page-specific one with the actual headline. Each image should be unique.
What file format should OG images be?
PNG is the safest choice. JPG works for photographic images. WebP is increasingly supported but not universally. Avoid GIF, SVG, and BMP.
How do I force platforms to refresh my OG image?
Facebook: use the Sharing Debugger to scrape again. Twitter: use the Card Validator. Most platforms cache for 7-30 days, so plan ahead.
Create your first OG image in seconds
Pick a template, type your headline, download a polished 1200x630 image. No signup required.
Get started free