pictuary
CompressResizeSocial Media
BlogSize GuideGlossary

← Glossary

web performance and seo

Open Graph image

The image that displays in social media preview cards when sharing website links.

What is Open Graph image?

An Open Graph image is the specific image that appears in preview cards when a website URL is shared on social media platforms like Facebook, LinkedIn, X/Twitter, Slack, Discord, and messaging apps. This image is defined by the og:image meta tag in a webpage's HTML code, which tells social platforms exactly which image to display in the link preview. Without a properly configured Open Graph image, platforms will either grab a random image from the page or display no image preview at all.

Importance of Open Graph image

Open Graph images directly control your website's visual appearance across all social media platforms, making them essential for brand consistency and click-through rates. When sharing blog posts, product pages, or any web content, the Open Graph image size and quality determine whether your links look professional or broken in social feeds. A properly optimized og image ensures your content displays correctly whether shared on Facebook, LinkedIn, or messaging platforms.

Open Graph image in Practice

When you share a blog post URL in a Slack channel, the platform requests the og:image specified in the page's HTML and displays it as a 1200×630 pixel preview card. If the original image is 2400×1260 pixels, Slack automatically scales it down to fit the preview dimensions while maintaining the 1.91:1 aspect ratio. This same 1200×630 image renders perfectly across Facebook posts, LinkedIn shares, and X/Twitter cards without any cropping or letterboxing.

Open Graph image Best Practices

  • → Use 1200×630 pixel dimensions for universal compatibility across all social platforms
  • → Keep file sizes under 1MB to ensure fast loading in social media previews
  • → Place important text and logos in the center 60% of the image to avoid cropping

Example of Open Graph image

A travel blog's article about Paris originally has a 3000×2000 pixel hero image that's 2.8MB. When shared on Facebook without an optimized Open Graph image, the platform randomly selects a small sidebar photo instead. After creating a 1200×630 pixel JPEG version that's 180KB and adding it as the og:image, the same article now displays a professional preview card with the intended Paris skyline photo across Facebook, LinkedIn, and Discord.

Related Terms

Aspect ratioPixel dimensionsCropJPEG / JPGAVIF

Frequently Asked Questions

What is the best size for open graph images?

The optimal Open Graph image size is 1200×630 pixels with a 1.91:1 aspect ratio. This dimension ensures your images display correctly across Facebook, LinkedIn, X/Twitter, Slack, Discord, and other social platforms without cropping or letterboxing. Most platforms will scale this size appropriately for their specific preview card layouts.

Why is my website showing the wrong image when shared on social media?

Your website is likely missing an og:image meta tag or the tag points to an incorrect image URL. Social media platforms automatically select the first available image from your page when no Open Graph image is specified, which often results in logos, ads, or unrelated photos appearing in the preview. Adding the correct og:image meta tag to your HTML will fix this issue.

Do I need different open graph images for Facebook and Twitter?

No, you can use the same 1200×630 pixel Open Graph image for all social media platforms in 2026. While X/Twitter has its own twitter:image tag, it will fall back to the og:image if no Twitter-specific image is provided. The 1.91:1 aspect ratio works universally across Facebook, LinkedIn, X/Twitter, Slack, Discord, and messaging apps.