What image size should I use for Open Graph?

Facebook recommends images of at least 1200 x 630 pixels for optimal display on high-resolution devices. The minimum recommended size is 600 x 315 pixels. Images smaller than 200 x 200 pixels may not be displayed. For Twitter summary_large_image cards, the recommended size is 1200 x 628 pixels with a 2:1 aspect ratio. For summary cards, use a square image of at least 144 x 144 pixels. Keep file size under 5 MB for Facebook and 5 MB for Twitter. Use JPEG, PNG, GIF, or WebP formats.

Open Graph Preview Tool - Free Online Tool

Q: What are Open Graph tags?

Open Graph (OG) tags are HTML meta tags that control how a URL is displayed when shared on social media platforms like Facebook, LinkedIn, and others. They were introduced by Facebook in 2010 and have become the standard for social sharing metadata. The four required OG tags are og:title (the title of the page), og:type (the type of content, usually 'website' or 'article'), og:image (the URL of the preview image), and og:url (the canonical URL). Additional tags like og:description and og:site_name provide further context.

Q: Why are Open Graph tags important?

Without OG tags, social media platforms guess what title, description, and image to use when someone shares your URL. This often results in incorrect or missing information, cropped images, or generic text that does not encourage clicks. Properly configured OG tags give you full control over your social media appearance, leading to higher click-through rates, more engagement, and a professional appearance when your content is shared. They are essential for content marketing, brand consistency, and social SEO.

Q: What is the twitter:card meta tag?

The twitter:card meta tag tells Twitter how to display your content when shared. There are two main card types: 'summary' shows a small square image with title and description, while 'summary_large_image' shows a large rectangular image above the title and description. Twitter also supports OG tags as fallbacks, so if twitter:title is not set, Twitter will use og:title instead. Setting the card type is the minimum required Twitter-specific tag; all other Twitter tags can fall back to their OG equivalents.

Q: How do I debug Open Graph tags?

Facebook provides the Sharing Debugger tool (developers.facebook.com/tools/debug) that shows exactly how Facebook parses your OG tags and what the preview will look like. It also lets you scrape the URL again to refresh Facebook's cache. Twitter provides the Card Validator (cards-dev.twitter.com/validator) for testing Twitter Card markup. LinkedIn has its Post Inspector tool (linkedin.com/post-inspector). Always test your OG tags with these tools before launching a marketing campaign to ensure the previews look correct across all platforms.

Enter your Open Graph and Twitter Card meta tags to preview how your page will look when shared on Facebook and Twitter.

Understanding Open Graph Tags

The Open Graph protocol was introduced by Facebook in 2010 to allow web pages to become rich objects in a social graph. When someone shares a URL on Facebook, LinkedIn, Pinterest, or other social platforms, the platform fetches the page and reads its Open Graph meta tags to determine what title, description, image, and other metadata to display in the share preview. Without these tags, platforms make their best guess from the page content, which often results in poor previews with missing images, truncated titles, or irrelevant descriptions.

The protocol defines four required properties: og:title (the title of the page), og:type (the type of object, such as "website" or "article"), og:image (the URL of the image to display), and og:url (the canonical URL). Additional optional properties include og:description, og:site_name, og:locale, and media-specific tags for video and audio content. These tags are placed in the <head> section of your HTML as <meta property="og:..." content="..."> elements.

Twitter Cards

Twitter uses its own meta tag system called Twitter Cards, but it falls back to Open Graph tags when Twitter-specific tags are not present. The twitter:card tag is the most important, controlling the display format. The "summary" card type shows a small square image alongside the title and description, suitable for general content. The "summary_large_image" card type displays a large rectangular image above the title and description, ideal for blog posts, articles, and visual content that benefits from a prominent image preview.

Twitter-specific tags like twitter:title, twitter:description, and twitter:image override their Open Graph equivalents on Twitter. If these are not set, Twitter automatically falls back to og:title, og:description, and og:image. This means you only need to add Twitter-specific tags when you want the Twitter preview to differ from the Facebook preview. The twitter:site tag can also specify your Twitter handle to be displayed with the card.

Image Best Practices

The preview image is the most impactful element of a social share. Facebook recommends images of at least 1200 x 630 pixels for high-resolution displays, with a minimum of 600 x 315 pixels. Twitter's summary_large_image cards work best with 1200 x 628 pixels in a 2:1 aspect ratio. Keep file sizes under 5 MB. Use JPEG for photographs and PNG for graphics with text or transparency. Avoid images with excessive text, as Facebook may reduce distribution of posts with images that contain more than 20 percent text overlay. Always test your images with the platform debugging tools before publishing.

Debugging and Validation

Social platforms aggressively cache shared URLs, so changes to your OG tags may not appear immediately. Facebook's Sharing Debugger lets you scrape a URL to refresh its cache and see exactly how your tags are parsed. Twitter's Card Validator shows your Twitter Card preview and validates the markup. LinkedIn's Post Inspector performs similar validation. After updating OG tags, always scrape the URL in these tools to clear the cached preview. Common issues include relative image URLs (always use absolute URLs), missing required tags, images that are too small, and SSL certificate errors that prevent the platform's crawler from fetching the image.

Frequently Asked Questions

What are Open Graph tags?

HTML meta tags that control how URLs appear when shared on social media. They specify the title, description, image, and URL for share previews on Facebook, LinkedIn, and other platforms.

Why are Open Graph tags important?

Without them, social platforms guess what to display, often resulting in poor previews. Proper OG tags increase click-through rates and ensure brand consistency across social sharing.

What is the twitter:card meta tag?

It controls how content displays on Twitter. "summary" shows a small image, "summary_large_image" shows a large banner image. Twitter falls back to OG tags for title, description, and image if Twitter-specific tags are absent.

What image size should I use?

Facebook recommends 1200 x 630 pixels minimum. Twitter summary_large_image works best at 1200 x 628 pixels (2:1 ratio). Keep files under 5 MB. Use absolute URLs and JPEG or PNG format.

How do I debug Open Graph tags?

Use Facebook's Sharing Debugger, Twitter's Card Validator, or LinkedIn's Post Inspector. These tools show how platforms parse your tags and let you refresh cached previews.

Open Graph Preview Tool

Open Graph Tags

Twitter Card Tags

Facebook Preview

Twitter Preview

Embed This Calculator