What Is an OG Image? A Complete Guide to Open Graph Images
Learn what OG images are, why they matter for social media sharing, and how to create them. Covers Open Graph protocol, dimensions, and best practices.
Quick Answer
An OG (Open Graph) image is the preview image that appears when you share a URL on social media platforms like Twitter, Facebook, LinkedIn, Slack, and Discord. It is defined using the og:image meta tag in your HTML and is typically 1200×630 pixels.
What Is an OG Image?
OG stands for Open Graph, a protocol created by Facebook in 2010 that lets web pages control how they appear when shared on social media. The og:image meta tag specifies the preview image shown alongside the page title and description.
When someone shares a link to your website on Twitter, Facebook, LinkedIn, Slack, Discord, or iMessage, these platforms look for Open Graph meta tags to generate a rich preview card. Without an og:image, your link appears as plain text — no visual, no click appeal.
Why OG Images Matter
OG images directly impact click-through rates (CTR) on social media. According to multiple studies:
- Links with images get 2-3x more engagement than text-only links
- Twitter cards with images see up to 150% more retweets
- LinkedIn posts with images get 98% more comments
- Slack and Discord unfurl links with images, making them stand out in channels
For developers, SaaS founders, and content creators, OG images are a free marketing tool that works every time someone shares your content.
Which Platforms Support OG Images?
Nearly every platform that supports link previews uses Open Graph or a compatible protocol:
| Platform | Protocol | Image Size |
|---|---|---|
| Open Graph | 1200×630 | |
| Twitter/X | Twitter Cards (falls back to OG) | 1200×628 |
| Open Graph | 1200×627 | |
| Slack | Open Graph | 1200×630 |
| Discord | Open Graph | 1200×630 |
| iMessage | Open Graph | 1200×630 |
| Open Graph | 1200×630 |
How to Add an OG Image to Your Website
Add the following meta tags inside the <head> of your HTML:
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief page description" />The image URL must be an absolute URL (starting with https://), not a relative path.
Creating OG Images at Scale with an API
Manually designing OG images in Figma or Canva works for a handful of pages, but it doesn't scale. If you have a blog with 50+ posts, a SaaS with dynamic content, or an e-commerce site with thousands of products, you need automation.
OG Image Generator (ogimg.xyz) provides a simple API that generates OG images on the fly:
GET https://ogimg.xyz/api/og?title=Your+Title&description=Your+Desc&template=gradientChoose from 10 templates, 10 background patterns, custom colors, and logo support. Images are generated in under 200ms on Vercel Edge — no headless browser required.
The free tier includes 50 images per month with 4 templates. See pricing.
Frequently Asked Questions
What size should an OG image be?
The recommended OG image size is 1200×630 pixels (1.91:1 aspect ratio). This works across all major platforms including Facebook, Twitter, LinkedIn, Slack, and Discord.
Do I need different images for Twitter and Facebook?
No. Twitter Cards fall back to Open Graph tags if no Twitter-specific tags are found. A single 1200×630 image works everywhere. You can optionally set twitter:image for a Twitter-specific image.
What happens if I don't have an OG image?
Without an og:image tag, social platforms will either show no image at all or attempt to find an image on the page (which often looks wrong). This significantly reduces click-through rates.
Related Guides
Compare with Alternatives
See how OG Image Generator stacks up against other tools.
Start Generating OG Images
Free API for developers. 50 images/month, 10 templates, no credit card required.