Open Graph Images: Best Practices for Social Media Sharing

What Are Open Graph Images?

When someone shares a link on Facebook, Twitter, LinkedIn, Slack, or Discord, the platform generates a preview card. The large image in that card is the Open Graph image (OG image). It is pulled from a meta tag in your page's HTML:

<meta property="og:image" content="https://example.com/og-image.jpg">

This small piece of metadata has an outsized impact on engagement. A link shared with an attractive, descriptive preview image gets significantly more clicks than one with a generic placeholder or no image at all. LinkedIn reports that posts with images get 2x higher engagement than text-only posts. Twitter cards with large images get 150% more retweets.

Yet most websites either do not set an OG image or use their site logo — a missed opportunity for every shared link.

Sizes and Specifications by Platform

Different platforms display OG images at different sizes, but one size works well across all of them:

Recommended Size: 1200x630 pixels

This is the universal OG image size. It matches Facebook's recommended dimensions and displays well on all major platforms:

• Facebook: Displays at 1200x630 in the feed. Smaller images appear as small thumbnails with text beside them — much less prominent.
• Twitter/X: Uses the same image for large summary cards. Set <meta name="twitter:card" content="summary_large_image"> to trigger the large format.
• LinkedIn: Displays OG images prominently in the feed. 1200x630 fills the card perfectly.
• Slack and Discord: Both render OG images in link previews. The 1200x630 ratio displays without awkward cropping.
• iMessage and WhatsApp: Show link previews with the OG image. Smaller images may appear blurry on high-DPI screens.

Always use 1200x630 pixels minimum. For high-DPI screens, 2400x1260 is ideal but keep file size under 1 MB.

Design Principles for OG Images

An effective OG image communicates the content of the page at a glance, even at thumbnail size. Here are the principles that work:

• Large, readable text: Include your article title or page headline directly in the image. Use a minimum font size equivalent to 48px at 1200px wide. If the text is not readable at 300px wide (the size of a mobile preview), it is too small.
• High contrast: The image will appear in feeds alongside dozens of other posts. Low-contrast images disappear. Dark text on light backgrounds or white text on dark backgrounds. Avoid medium tones.
• Brand consistency: Include your logo, brand colors, or a consistent layout template. When someone sees multiple shared links from your site, the visual pattern should be recognizable.
• Safe zone: Keep important content within the center 80% of the image. Some platforms crop edges or add rounded corners.
• Avoid text-heavy designs: Facebook may reduce distribution of link posts where the OG image is more than 20% text. A headline and logo is fine — a full paragraph is not.
• No placeholder images: A generic stock photo or your site logo alone is worse than a purpose-built OG image. If the image does not tell the viewer what the page is about, it is not doing its job.

Create custom OG images quickly with our OG Image Generator — enter your text, pick a style, and download a properly sized image.

Required Meta Tags

The OG image is part of a set of Open Graph meta tags that control how your page appears when shared:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of the page">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">

For Twitter specifically, add these additional tags:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Brief description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

The image URL must be absolute (starting with https://), not relative. Relative paths are the most common reason OG images fail to display.

Testing Your OG Images

Always test before sharing. Each platform provides debugging tools:

• Facebook: Sharing Debugger — paste your URL to see how Facebook interprets your OG tags. It also lets you clear the cache if you have updated your image.
• Twitter/X: Card Validator — preview how your link card will appear in tweets.
• LinkedIn: Post Inspector — check how your link preview renders on LinkedIn.
• General: Open your page in an incognito window and paste the URL into a social platform compose box to see the live preview.

Platforms aggressively cache OG images. If you update your image but the old one still shows, use the platform's debug tool to force a cache refresh.

Common OG Image Mistakes

• No OG image at all: The platform picks a random image from your page — often a tiny icon or an irrelevant sidebar image. Always set an explicit OG image.
• Image too small: Images under 600px wide display as small thumbnails on Facebook instead of large cards. Use 1200px minimum.
• Wrong aspect ratio: A square image or a tall portrait image gets cropped awkwardly in the 1.91:1 landscape card format. Stick to 1200x630.
• Relative URL: og:image must be an absolute URL. /images/og.jpg will not work. Use https://yourdomain.com/images/og.jpg.
• HTTP instead of HTTPS: Some platforms reject OG images served over HTTP. Always use HTTPS.
• Slow-loading image: If the OG image takes too long to fetch, platforms may give up and show no image. Keep file sizes under 1 MB and serve from a CDN.

Generate your OG images with our OG Image Generator. For related SEO topics, see our guides on SEO meta tags and favicon sizes.