What is an OG Image?
An Open Graph image (also called an OG image, social media preview image, or link preview image) is the visual that appears when you share a link on platforms like Facebook, Twitter/X, LinkedIn, Slack, Discord, and iMessage. These social card images are defined using the og:image meta tag, part of the Open Graph protocol created by Facebook in 2010.
When someone shares your URL, the platform fetches your page's metadata and displays the Open Graph image as a visual preview. This is often the first thing people see before deciding whether to click on your link.
Where OG Images Appear
OG images show up in many places across the web:
- Social media platforms: Facebook, Twitter/X, LinkedIn, Pinterest
- Messaging apps: Slack, Discord, iMessage, WhatsApp, Telegram
- Collaboration tools: Notion, Trello, Asana
- SEO tools and crawlers: Preview cards in search results
Technical Specifications
To ensure your OG images display correctly across all platforms, follow these key specifications:
- Recommended size: 1200 x 630 pixels (1.91:1 aspect ratio)
- Formats: JPG and PNG recommended (avoid SVG, GIF, and WebP as many platforms don't support them)
- File size: Under 1MB recommended for fast loading
See our OG Image Size Guide for platform-specific dimensions and requirements.
How to Create an Open Graph Image
There are several approaches to creating OG images for your website, from manual design to fully automated solutions.
Adding the Meta Tag
Regardless of how you create your image, you need to add the og:image meta tag to your page's <head> section:
<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:image:alt"
content="Description of the image"
/> The URL must be absolute (including https://) and publicly accessible for platforms to fetch it. The og:image:alt tag provides alt text for screen readers and improves accessibility.
Manual Design
Create images using design tools like Figma, Canva, or Photoshop — or use our free OG Image Generator for a quick start. This gives you full creative control but requires manual work for each page and doesn't scale well for dynamic content like blog posts or product pages.
Automated Generation
Services like MyOG.social generate OG images automatically based on your page content. This is ideal for sites with many pages or frequently changing content, ensuring every page has a professional preview without manual effort. You can use our free OG Preview Tool to test how your pages look before sharing.
If you're evaluating different approaches, see our comparison of MyOG.social vs @vercel/og to understand the trade-offs between hosted services and self-hosted libraries.
What Makes a Good Open Graph Image
A well-designed OG image captures attention and communicates your content's value at a glance. Here are key principles to follow:
Readability
- Large, legible text: Use fonts at least 40-60px for headlines — the image will be displayed small on mobile
- High contrast: Ensure text stands out clearly against the background
- Limit text length: Keep headlines short (5-10 words) to avoid cramping
Visual Hierarchy
- Clear focal point: Guide the viewer's eye to the most important information first
- Whitespace: Don't overcrowd — leave breathing room around elements
- Safe zones: Keep important content away from edges (platforms may crop slightly)
Branding
- Include your logo: Helps with brand recognition in crowded feeds
- Consistent style: Use the same colors, fonts, and layout across all your OG images
- Brand colors: Reinforce your visual identity with consistent color palette
Content Relevance
- Match the page: The image should accurately represent what users will find when they click
- Show value: Communicate the benefit or key takeaway of your content
- Avoid clickbait: Misleading images hurt trust and increase bounce rates
What Does OG Mean in SEO?
"OG" stands for Open Graph, a protocol that lets web pages become rich objects in a social graph. While OG tags are primarily designed for social media sharing, they have important implications for SEO and search visibility.
Social Signals and SEO
Although social shares aren't a direct Google ranking factor, compelling OG images increase click-through rates from social platforms. Posts with images receive 2-3x more engagement than text-only links. More clicks mean more traffic, more backlinks, and stronger brand recognition — all of which indirectly benefit SEO.
Search Result Previews
Some search engines and discovery platforms use OG images in their result previews. Google's Discover feed, for example, often displays the OG image alongside your page title and description, making it a valuable surface for driving organic traffic.
Rich Snippets and Social Proof
When your links are shared in forums, comments, or community sites (Reddit, Hacker News), a professional OG image creates instant credibility. This social proof can lead to more upvotes, shares, and ultimately more backlinks to your content.
The Complete Meta Tag Picture
For comprehensive SEO and social coverage, combine OG tags with other meta tags:
- og:title, og:description: Control social media preview text
- twitter:card, twitter:image: Twitter/X-specific customization
- Standard meta description: For search engine results
Together, these tags ensure your content looks professional and compelling everywhere it appears — from Google search results to Twitter feeds to Slack messages.
Why OG Images Matter
Increased Engagement
Links with images get significantly more engagement than plain text links. Studies show that social media posts with images receive 2-3x more clicks, likes, and shares compared to those without.
E-commerce Click-Through Rates
For e-commerce sites, OG images can significantly impact product page conversions. When customers share product links on social media or messaging apps, a compelling OG image showing the product drives more click-throughs than a generic or missing preview.
Typical product page share
With optimized OG image
Brand Consistency
OG images let you control how your brand appears across the web. Instead of platforms picking a random image from your page, you decide exactly what visual represents your content.
Inconsistent branding
Consistent, branded preview
Professional Appearance
Missing or broken OG images make your links look unprofessional. Platforms may show a generic placeholder or grab an unrelated image from your page, creating a poor first impression.
No OG image set
Professional preview
Control the Narrative
With a well-designed OG image, you can highlight key information, include your logo, and create a compelling visual that encourages clicks.
No control over preview
You decide what people see
Common Pitfalls
- Missing OG images: Platforms show nothing or grab a random page image
- Wrong dimensions: Images get cropped awkwardly or don't display at all
- Relative URLs: Using
/image.pnginstead of the fullhttps://URL — platforms can't resolve relative paths - Slow loading: Large file sizes cause timeouts during fetching
For debugging issues like CORS errors and cache problems, see our OG Image Testing Guide.
How MyOG.social Helps
Automatic OG Image Generation
With MyOG.social, you add a single meta tag to your website and beautiful OG images are generated automatically for every page. No design work needed — images are created on-the-fly based on your page's title and content.
Flexible Integration
Use MyOG.social for all your pages, or mix and match with custom OG images where you want them. The service works seamlessly alongside your existing images — only generating when you need it.
Free Tools
We also offer free tools to help you work with OG images:
- OG Image Generator — Create OG images with customizable templates
- OG Preview Tool — Test how your links appear before sharing
- Bulk OG Checker — Check OG tags across multiple pages at once
These tools detect missing images, CORS issues, and broken URLs so you can fix problems before they affect your social media presence.
Frequently Asked Questions
What is an Open Graph image?
An Open Graph image (OG image) is the preview image that appears when you share a link on social media platforms like Facebook, Twitter/X, LinkedIn, and messaging apps like Slack and iMessage. It's defined using the og:image meta tag in your page's HTML and helps make your shared links more visually appealing and clickable.
How do I create an Open Graph image?
You can create OG images manually using design tools like Figma or Canva, then add the image URL to your page with the <meta property="og:image" content="your-image-url"> tag. Alternatively, services like MyOG.social generate images automatically on-the-fly — just point your og:image tag to their URL and the image is created dynamically based on your page content. The recommended size is 1200 x 630 pixels.
What makes a good Open Graph image?
A good OG image has large, legible text (40-60px minimum), high contrast between text and background, consistent branding with your logo and colors, and content that accurately represents the page. Keep important elements away from edges and limit text to 5-10 words for readability on mobile devices.
What does OG mean in SEO?
"OG" stands for Open Graph, a protocol created by Facebook that turns web pages into rich objects in social graphs. While OG tags primarily control social media previews, they indirectly benefit SEO by increasing click-through rates, driving more traffic, and improving brand visibility across platforms like Google Discover.
Ready to get started?
Add automatic OG images to your website in under 2 minutes.
Already have an account?