Open Graph & Social Card Preview Tool
Preview how your webpage links appear when shared across Facebook, Twitter / X, and LinkedIn, and generate clean meta markup.
Optimizing Social Link Previews with the Open Graph Protocol
When users share URLs on platforms like Facebook, LinkedIn, Slack, WhatsApp, or Twitter / X, platform crawlers fetch the shared page to generate rich interactive preview cards. Introduced by Facebook in 2010, the Open Graph Protocol standardizes how webpages communicate rich metadata to external social platforms.
Without explicit Open Graph tags, social platforms fall back to heuristic scraping, often selecting arbitrary body text, picking irrelevant sidebar images, or displaying broken placeholders. Implementing well-structured Open Graph tags ensures your links display professional, high-converting preview cards across every platform.
Recommended Image Dimensions and Aspect Ratios
Social media platforms standardize on a 1.91:1 aspect ratio for large preview cards:
| Platform | Recommended Resolution | Aspect Ratio | Minimum Dimensions |
|---|---|---|---|
| Facebook / LinkedIn | 1200 × 630 pixels | 1.91:1 | 600 × 315 pixels |
| Twitter / X (Summary Large) | 1200 × 628 pixels | 1.91:1 | 300 × 157 pixels |
| Messaging Apps (WhatsApp/Telegram) | Square (300 × 300 px) or 1200 × 630 | 1:1 or 1.91:1 | 200 × 200 pixels |
Essential Open Graph Tags
og:title: The clear, concise headline for your content.og:description: A 1–2 sentence summary that encourages users to click.og:image: An absolute URL to an optimized preview image (1200 × 630 px).og:url: The canonical URL of the shared page.og:type: The resource classification (e.g.,website,article, orprofile).twitter:card: Set tosummary_large_imageto display a prominent full-width visual card on Twitter / X.
Frequently Asked Questions
What is the optimal image size for social media link previews?
The industry standard is 1200 × 630 pixels (a 1.91:1 aspect ratio). This resolution renders sharply on high-DPI displays across Facebook, LinkedIn, Twitter/X, and messaging apps.
Why does my shared link show an old image after updating meta tags?
Social platforms aggressively cache Open Graph metadata. Use platform debugging tools (like the Facebook Sharing Debugger or LinkedIn Post Inspector) to clear cached previews.
Can I use relative paths for the og:image tag?
No. The Open Graph specification requires absolute URLs (e.g., https://example.com/image.jpg). Relative paths will fail to resolve on external platforms.
What is the difference between summary and summary_large_image on Twitter?
summary displays a small square thumbnail alongside text, while summary_large_image displays a prominent, full-width visual banner above your text.
Do Open Graph tags affect search engine rankings directly?
While Google does not use Open Graph tags as a direct search ranking factor, well-crafted social previews drive referral traffic and engagement, which indirectly benefits overall visibility.
Are my preview images uploaded to your servers?
No. If you upload a local image for testing, it is rendered in-browser using a local Object URL. No images or metadata are sent across the network.