Open Graph Visuals: Dimensions, Tips & Implementation Examples
Open Graph images determine what shows when your page is shared on Facebook, Twitter or LinkedIn. An incorrect or missing image reduces click-through rates before visitors arrive.
This guide explains ideal sizes, design tips, HTML setup and testing tools — all you need for perfect social previews on every platform.
Contents
What Open Graph images are and why they’re important
Open Graph, created by Facebook, lets you control how your pages appear when shared on social media. The og:image tag specifies the preview thumbnail.
When a link is shared on Facebook, Twitter or LinkedIn, the platform retrieves Open Graph data to create a preview card. This card, showing image, title and description, is often the first thing users see before clicking.
A well-designed Open Graph image can boost click-through rates. Missing or wrongly sized images cause broken previews, cropped thumbnails or generic placeholders that look unprofessional.
Click-through rate
Pages with correctly sized, high-contrast OG images consistently perform better than those without or with poor-quality images.
More clicks per share
Brand recognition
A consistent visual style across shared links builds trust and familiarity before visitors reach your site.
Consistent across platforms
SEO signal
Engaging previews encourage social interaction, generating backlinks and traffic that support organic search rankings.
Indirect ranking benefit
Platform-specific image requirements
Each social network has recommended image sizes, aspect ratios and file limits. Following these avoids cropping, distortion and placeholders.
| Platform | Recommended size | Aspect ratio | Maximum 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 1.91:1 ratio works on Facebook, LinkedIn, WhatsApp, Slack and most platforms. Twitter crops to 16:9 but centres content well — keep key elements centred to avoid clipping.
Design principles for effective Open Graph images
Images appear small in social feeds. Design for the thumbnail size first, not the full image.
Keep key visuals — logo, headline or illustration — within the central 80% of the image. Edges may be cropped on some platforms.
High contrast
Use strong contrast between text, foreground and background. Low-contrast images get lost in busy social feeds alongside vibrant posts.
Legible at any size
Clear typography
If your image has text, use large, bold fonts (minimum 36px equivalent) and limit to two lines. Smaller text is unreadable at thumbnail size.
Ensure legibility at small sizes
Brand consistency
Include your logo or brand colours in every OG image. Each share is a brand impression, even without clicks.
Each share is a brand touchpoint
Choosing the right image format
Use JPEG for photos and PNG for graphics with text, logos or transparency. WebP support is growing but not yet universal among 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 (partial) | 40 – 120 KB | Supplement only |
Aim for 100–200 KB for your OG image. Smaller is better, but avoid over-compression that causes pixelation. WhatsApp limits images to 300 KB — keep images below this if WhatsApp sharing is important.
For more on image format trade-offs, see the website image optimisation guide . For converting existing images, the JPG to WebP guide covers the typical workflow.
HTML implementation and meta tags
Place Open Graph meta tags within the <head> section of your HTML. The og:image tag must use an absolute URL — relative paths aren’t supported by social crawlers.
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 include og:image:width and og:image:height. Without these, platforms must download and inspect the image before showing a preview, slowing display and increasing fallback risk.
If you use Blazor, the Blazor SEO metadata component automatically manages all Open Graph tags with culture-aware URLs.
Testing and debugging Open Graph images
Social platforms cache Open Graph data aggressively. After updating tags or images, use official debugger tools to force a fresh crawl and check the preview before sharing.
Facebook Sharing Debugger
Enter your URL at developers.facebook.com/tools/debug to fetch fresh data, see which image Facebook chose, and debug any warnings or errors.
Force cache refresh
Twitter Card Validator
Use cards-dev.twitter.com/validator to preview your Twitter card. Click ‘Preview card’ to see thumbnail, title and description in 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 appears with current metadata.
Refresh LinkedIn cache
Common mistakes and how to fix them
Most Open Graph image issues stem from a few common errors. Knowing these saves time when debugging.
- Relative URLs. Social crawlers don’t resolve relative paths. The og:image must be a full absolute URL including 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 previewing. Add both to avoid this extra step.
- Images behind authentication. Crawlers can’t access images requiring login or blocked by robots.txt. The OG image must be publicly accessible without authentication.
- Incorrect aspect ratio. Images far from 1.91:1 ratio will be cropped or letterboxed. Always test the ratio before publishing.
- Outdated platform cache. Updating an image without changing its filename or adding a query string means platforms may serve a cached version. Rename the file or use debugger tools to refresh.
Automating Open Graph image creation
For small sites and blogs, a single static OG image per page is simplest and most reliable. For larger sites needing unique previews per page, dynamic generation is practical.
Dynamic OG image generation creates a unique image on request or build time, based on page title, description or content. This delivers unique, branded previews without manual effort.
When to automate
Automate if you have many pages needing unique images, frequent content changes, or manual creation isn’t scalable.
High volume or dynamic content
When to use static images
For most pages — landing pages, guides and evergreen articles — a well-crafted static image beats generated ones in quality and brand consistency.
Quality-first approach
Popular dynamic generation tools include Cloudinary (URL-based transforms), Vercel OG (React/HTML rendering at edge), and Puppeteer or Playwright screenshot pipelines for any tech stack.