Open Graph Images: Sizes, Best Practices & Code Examples
Open Graph images control what appears when someone shares your page on Facebook, Twitter, or LinkedIn. The wrong image, or no image at all, kills click-through rates before visitors even reach your site.
This guide covers optimal sizes, design principles, HTML implementation, and testing tools — everything you need to get social previews right on every platform.
Table of Content
What are Open Graph images and why they matter
Open Graph is a protocol introduced by Facebook that lets you control how your web pages appear when shared on social networks. The og:image meta tag tells platforms which image to use as the preview thumbnail.
When someone shares a link on Facebook, Twitter, or LinkedIn, the platform fetches the Open Graph metadata and builds a preview card. That card — with its image, title, and description — is often the only thing someone sees before deciding to click.
A well-crafted Open Graph image can meaningfully improve click-through rates. A missing or incorrectly sized image results in a broken preview, a cropped thumbnail, or a generic placeholder that looks unprofessional.
Click-through rate
Pages with a properly sized, high-contrast OG image consistently outperform those with no image or a low-quality fallback.
More clicks from every share
Brand recognition
A consistent visual identity across every shared link builds familiarity and trust with your audience before they arrive on the page.
Consistent across networks
SEO signal
Social engagement driven by compelling previews generates backlinks and traffic signals that reinforce organic search rankings over time.
Indirect ranking benefit
Platform-specific image requirements
Each social platform has its own recommended dimensions, aspect ratios, and file size limits. Getting these right prevents cropping, distortion, and fallback placeholders.
| Platform | Recommended size | Aspect ratio | Max file size | Format |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Universal safe size: 1200 × 630 pixels
A 1200 × 630 px image at the 1.91:1 ratio works across Facebook, LinkedIn, WhatsApp, Slack, and most other platforms. For Twitter, the image still displays well even though it uses a 16:9 crop — keep important content centered to avoid clipping.
Design principles for effective Open Graph images
The image appears at small sizes in social feeds. Design for the thumbnail first, not the full-size version.
Keep the most important visual element — your logo, a strong headline, or a key illustration — within the central 80% of the image. Platforms often crop the edges. Anything near the border risks being cut off on some displays.
High contrast
Use strong contrast between text, foreground elements, and background. Low-contrast images disappear in busy social feeds next to vibrant competitor posts.
Readable at any size
Typography clarity
If your image includes text, use large, bold fonts — at least 36px equivalent — and avoid more than two lines. Smaller text becomes unreadable at thumbnail scale.
Keep it legible small
Brand consistency
Include your logo or brand color palette in every OG image. Every shared post is a brand impression even if the person never clicks through.
Every share = brand touchpoint
Choosing the right image format
Use JPEG for photographic OG images and PNG for graphics with text, logos, or transparency. WebP has growing support but is not yet universal across all social crawlers.
| Format | Best for | Social support | Typical file size | Recommendation |
|---|---|---|---|---|
| JPEG | Photos, gradients | Universal | 60 – 150 KB | Default for photos |
| PNG | Text, logos, transparency | Universal | 100 – 300 KB | Default for graphics |
| WebP | Both, smaller files | Twitter, Slack (not all) | 40 – 120 KB | Supplement only |
Target 100–200 KB for your OG image. Smaller is always better, but do not compress so aggressively that the image looks pixelated in a social feed. WhatsApp enforces a strict 300 KB limit — if WhatsApp sharing matters to you, keep all OG images under that threshold.
For more on image format trade-offs in general, see the website image optimization guide . For converting existing images, the JPG to WebP guide covers the everyday workflow.
HTML implementation and meta tags
Place Open Graph meta tags inside the <head> element of your HTML. The og:image tag must use an absolute URL — relative paths are not supported by social crawlers.
The minimum required tags are og:title, og:description, og:image, and og:url. The twitter:card tag enables Twitter's large image card format.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Always specify og:image:width and og:image:height. Without them, platforms must fetch and inspect the image before rendering a preview, which slows down the display and increases the chance of a fallback placeholder.
If you use Blazor, the Blazor SEO metadata component handles all Open Graph tags automatically with culture-aware URLs.
Testing and debugging Open Graph images
Social platforms cache Open Graph metadata aggressively. After updating your tags or image, use the official debugger tools to force a fresh crawl and verify the preview looks correct before sharing.
Facebook Sharing Debugger
Enter your URL at developers.facebook.com/tools/debug to fetch fresh metadata, see which image Facebook selected, and debug any validation warnings or errors.
Force cache refresh
Twitter Card Validator
Use cards-dev.twitter.com/validator to preview exactly how your Twitter card will appear. Click 'Preview card' to see the thumbnail, title, and description in the actual card format.
Preview before posting
LinkedIn Post Inspector
LinkedIn's post inspector at linkedin.com/post-inspector refreshes LinkedIn's cache for your URL and shows how your post preview will look with the current metadata.
Refresh LinkedIn cache
Common mistakes and how to fix them
Most Open Graph image problems fall into a small set of recurring mistakes. Knowing what to look for saves debugging time.
- Relative URLs. Social crawlers do not resolve relative paths. The og:image value must be a full absolute URL including the protocol and domain (https://yourdomain.com/path/image.jpg).
- Missing width and height tags. Without og:image:width and og:image:height, platforms must download and inspect the image before generating the preview. Add both to eliminate this extra fetch.
- Images behind authentication. Crawlers cannot access images that require login or are blocked by robots.txt. The OG image must be publicly accessible without any authentication headers.
- Wrong aspect ratio. An image that deviates significantly from 1.91:1 will be cropped or shown with distracting letterboxing. Always test at the intended ratio before publishing.
- Stale platform cache. Updating the image file without changing the filename or adding a query string means platforms serve the old cached version. Either update the filename or use the platform debugger to force a refresh.
Automating Open Graph image generation
For small websites and blogs, a single static OG image per page is the simplest and most reliable approach. For larger publications or applications where every page needs a unique social preview, dynamic generation becomes practical.
Dynamic OG image generation creates a unique image at request time — or at build time — based on the page's title, description, or other content. The result is a unique, on-brand preview for every page without manual image creation.
When to automate
Automate when you have many pages that each need a unique image, when content changes frequently, or when manual image creation does not scale to your publishing volume.
High volume or dynamic content
When to use static images
For most pages — landing pages, guides, and evergreen articles — a carefully crafted static image outperforms a generated one on quality and brand consistency.
Quality-first approach
Popular tools for dynamic generation include Cloudinary (transforms applied via URL parameters), Vercel OG (renders React/HTML to an image at the edge), and Puppeteer or Playwright-based screenshot pipelines for any tech stack.