Facebook Open Graph Image Guide

Facebook literally invented the Open Graph protocol back in 2010. With nearly 3 billion monthly active users, it remains the largest social platform in the world. When your content gets shared on Facebook, the OG image is your first (and often only) chance to capture attention. Let's make it count.

Fun fact: The "og:" prefix in OG tags stands for "Open Graph"—Facebook's protocol for turning web pages into rich social objects. Today it's the universal standard.

Image Specifications

Facebook has detailed requirements for OG images. Hit these specs and your content displays perfectly across desktop, mobile, and Messenger:

Specification	Recommended	Minimum
Image Dimensions	1200 × 630 px	600 × 315 px
Aspect Ratio	1.91:1	1.91:1
Maximum File Size	8 MB	N/A
Supported Formats	PNG, JPEG, GIF, WebP	N/A
High Resolution	1200 × 630 px+	N/A

Image size matters: Facebook displays higher-resolution images more prominently in the feed. Always use 1200 × 630 or larger for maximum visual impact.

Required Meta Tags

As the creator of Open Graph, Facebook supports the full spec. Here's the complete setup for optimal sharing:

<!-- Required Tags -->
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />

<!-- Strongly Recommended -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Image description for accessibility" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />

<!-- For Articles -->
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-01-15T08:00:00Z" />
<meta property="article:author" content="https://facebook.com/authorpage" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="web development" />

<!-- Facebook-Specific -->
<meta property="fb:app_id" content="your_app_id" />

Tag Details

og:url

The canonical URL of your page. Use this to consolidate likes and shares when you have multiple URLs pointing to the same content.

og:type

Defaults to "website" if not specified. Use "article" for blog posts—Facebook may display additional info like publish date.

og:title

Maximum ~60-70 characters before truncation. Facebook shows titles prominently—make every word count.

og:description

Facebook typically shows 2-3 lines (~155 characters). Provide context that complements the title without repeating it.

og:image

Must be an absolute URL (https://). Facebook recommends serving images over HTTPS for better performance and security.

fb:app_id

Optional but recommended. Ties shares to your Facebook app, enabling analytics and improved debugging. Get one at developers.facebook.com.

Design Best Practices for Facebook

Facebook's feed is competitive. Users scroll fast. Here's how to stop the scroll:

1. Bold, Readable Text

Text on images gets attention—but only if people can read it. The Facebook feed compresses images significantly on mobile:

Use large, bold fonts (minimum 48px for headlines)
High contrast between text and background
Limit to 20% text coverage (Facebook's old ad rule, still good practice)
Sans-serif fonts render better at small sizes

2. Face-Forward Content

Facebook's algorithm and human psychology both favor images with faces:

Images with faces get 38% more likes and 32% more comments
Direct eye contact creates connection
Emotions trigger emotional responses
People relate to people, not abstract graphics

3. Color That Pops

Facebook's interface is blue and white. Stand out with complementary colors:

Orange and red tones contrast well with Facebook's blue
Avoid blue-heavy images—they blend into the interface
Bright, saturated colors catch the eye
Dark backgrounds make content feel premium

4. Mobile-First Design

Over 98% of Facebook users access via mobile. Design for small screens first:

Test at 50% zoom—if you can't read it, increase font size
Simple compositions work better than complex ones
Keep key elements in the center (avoid edges)
Minimize fine details—they get lost on small screens

Multiple Images

Facebook supports multiple OG images, displaying the highest-resolution one:

<!-- Multiple images (Facebook uses the best resolution) -->
<meta property="og:image" content="https://yoursite.com/og-1200.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<meta property="og:image" content="https://yoursite.com/og-600.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

In practice, just use one high-resolution image (1200×630). Multiple images are rarely necessary.

Facebook Sharing Debugger

Facebook's official tool for testing and refreshing OG previews:

Go to developers.facebook.com/tools/debug
Enter your URL and click "Debug"
Review "Link Preview" section—this shows exactly how shares will appear
Click "Scrape Again" to refresh cached data
Check "Warnings" for any issues with your tags

Cache tip: Facebook caches OG data aggressively. After updating your tags, always use the Sharing Debugger to scrape the new version before sharing.

Troubleshooting Guide

Image not showing

• Check og:image URL is absolute (https://)
• Verify image is publicly accessible (not behind auth)
• Ensure image meets minimum size (600×315)
• Use Sharing Debugger to see Facebook's view

Old image still showing

• Use Sharing Debugger and click "Scrape Again"
• May need to scrape 2-3 times for stubborn cache
• Change the image filename to force new scrape
• Wait 24 hours—Facebook's CDN cache is persistent

Image appears cropped

• Use exactly 1200×630 pixels
• Include og:image:width and og:image:height tags
• Keep important content in center safe zone

Title/description wrong

• Check meta tags are in the <head> section
• Verify no duplicate tags from plugins
• Use Sharing Debugger to see what Facebook reads
• Check JavaScript isn't overwriting tags (Facebook doesn't execute JS)

"Error parsing input URL"

• URL must be publicly accessible
• Check robots.txt isn't blocking Facebook
• Verify SSL certificate is valid
• Remove URL encoding issues

Facebook vs. Instagram

Since Meta owns both, you might wonder about Instagram. Here's the key difference:

Instagram doesn't support OG images. Instagram is a closed ecosystem—links in posts aren't clickable, and Stories/Reels with link stickers use their own preview system. OG images are purely for Facebook shares, Messenger shares, and Facebook posts.

Quick Implementation Checklist

✓Image is 1200 × 630 pixels
✓og:image uses absolute HTTPS URL
✓og:image:width and og:image:height included
✓og:title under 70 characters
✓og:description under 155 characters
✓og:url points to canonical URL
✓Tested with Sharing Debugger
✓Text readable at mobile sizes

Create Facebook-Optimized Images

Use og-image.org to generate Facebook-ready images in seconds. All templates are optimized for 1200×630 dimensions.

Create OG Image Test Your Image