OG / Twitter Card Preview

See how your link will look when shared on Facebook, LinkedIn, and Twitter. Generate the required meta tags automatically.

OG Properties
Social Previews
Facebook / LinkedIn
Twitter — Summary Card
Twitter — Large Image Card
Generated Meta Tags
Enter your OG properties to preview social share cards.

How to Use the OG / Twitter Card Preview Tool

  1. Enter your Open Graph properties in the form on the left. At minimum, provide an og:title, og:description, and og:image URL. The social media previews update in real time as you type.
  2. Review the Facebook/LinkedIn preview which shows a large image card format used by most social platforms. This is the most common share format and should be your primary focus.
  3. Check both Twitter card formats to see how your content appears as a summary card (small thumbnail) and as a large image card. Select your preferred card type from the twitter:card dropdown.
  4. Copy the generated meta tags from the code output section below the previews and paste them into the <head> of your HTML page.

Understanding Open Graph and Twitter Cards

Open Graph (OG) tags and Twitter Cards are meta tags that control how your content appears when shared on social media platforms. Without these tags, platforms will attempt to scrape information from your page, often resulting in missing images, incorrect titles, or truncated descriptions. By explicitly defining your Open Graph properties, you ensure your content looks professional and compelling every time it is shared, whether on Facebook, LinkedIn, Twitter, Slack, Discord, or messaging apps like WhatsApp and Telegram.

Essential Open Graph Tags

The four required Open Graph tags are og:title, og:type, og:image, and og:url. The title should be concise and compelling, ideally different from your page title to optimize for social sharing contexts. The description should entice users to click through. The image is the most impactful element and should be high quality, at least 1200x630 pixels, and visually represent your content. The URL should be the canonical URL of your page.

Twitter Card Types

Twitter supports two main card types for most websites: summary and summary_large_image. The summary card displays a small square thumbnail image next to the title and description, which works well for general content and articles. The summary_large_image card shows a large banner image above the text, which is ideal for visual content, product pages, and blog posts with strong featured images. Choose the type that best showcases your content.

Image Requirements and Best Practices

Social media platforms have specific image requirements. Facebook recommends 1200x630 pixels with a 1.91:1 aspect ratio. Twitter requires a minimum of 144x144 for summary cards and 300x157 for large image cards. Use JPEG or PNG format, keep file sizes under 5MB, and avoid images with too much text. Facebook may reduce distribution of posts with images containing more than 20 percent text. Always provide high-resolution images for retina displays.

Debugging Social Share Issues

Social platforms aggressively cache Open Graph data, which means changes to your tags may not appear immediately when sharing. Facebook provides the Sharing Debugger tool where you can enter a URL to see what Facebook has cached and force a re-scrape. Twitter offers a similar Card Validator tool. LinkedIn uses its Post Inspector. After updating your OG tags, always use these debugging tools to clear the cache before sharing your content. For a complete social and SEO setup, generate your meta tags with our Meta Tag Generator, preview search results with the SERP Preview, and add structured data using the Schema Generator.

Platform-Specific Considerations

  • Facebook uses the Open Graph protocol exclusively and requires the og:image to be at least 200x200 pixels.
  • Twitter checks for twitter: tags first, then falls back to og: tags, giving you the option to customize the Twitter appearance separately.
  • LinkedIn uses Open Graph tags and is particularly sensitive to og:image dimensions; images outside the recommended ratio may be cropped poorly.
  • Slack and Discord read Open Graph tags and display them in link unfurls within messages.
  • WhatsApp and Telegram use Open Graph tags to generate link previews in chat messages.

Frequently Asked Questions

Open Graph (OG) tags are HTML meta tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, and Pinterest. They define the title, description, image, and URL displayed in the social share card. The Open Graph protocol was created by Facebook in 2010.
Twitter Cards are Twitter-specific meta tags that control how links appear in tweets. While Twitter supports Open Graph tags as a fallback, Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) take priority when present. The main Twitter Card types are summary (small image) and summary_large_image (large image above text).
The recommended Open Graph image size is 1200x630 pixels for optimal display across all platforms. Facebook requires a minimum of 200x200 pixels but recommends 1200x630. Twitter requires a minimum of 144x144 for summary cards and 300x157 for summary_large_image cards. Use a 1.91:1 aspect ratio for best results.
Social platforms cache Open Graph data for performance. If you recently updated your OG tags, the old data may still be cached. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) to clear the cache and re-scrape your page. Twitter has a Card Validator tool for the same purpose. Changes typically take effect within minutes after clearing the cache.
While Twitter will fall back to Open Graph tags if Twitter Card tags are not present, it is best practice to include both. This gives you full control over how your content appears on each platform. Twitter Card tags allow you to specify different titles, descriptions, or images specifically optimized for Twitter's layout.