Open Graph Preview

Preview how your page will look when shared on Facebook, Twitter/X, LinkedIn, Slack, and Discord. Validate Open Graph tags and get actionable improvement suggestions.

What is Open Graph Preview?

An Open Graph Preview tool simulates exactly how your web page's link will appear when someone shares it on social media—before you publish or deploy your changes. The Open Graph protocol, developed by Facebook and now supported by virtually every social platform, defines a set of HTML meta tags (og:title, og:description, og:image, og:url) that social platforms read to generate rich link preview cards. Without these tags, platforms fall back to guessing content from your page's HTML, often producing ugly, inaccurate previews with no image, a truncated title, and an irrelevant description. A compelling link preview card dramatically increases click-through rates—posts with a relevant image and well-crafted description consistently outperform links with missing or poor previews. The challenge is that every platform renders these previews differently: Facebook shows a wide card with a large image below the text; Twitter/X has its own twitter:card tag system and different aspect ratios; LinkedIn crops images differently and has its own character limit behavior; Slack and Discord show sidebar previews. Testing across all platforms after every page update is tedious and slow—this tool shows all five platform previews simultaneously from a single input, so you can fine-tune your tags before shipping.

How to Use Open Graph Preview

Fill in your page's Open Graph data in the input form: the og:title (your page's display title—aim for 60 characters or fewer), og:description (a compelling summary—aim for 120–160 characters), og:image (a full HTTPS URL to your preview image), and your page's canonical URL. The preview panels on the right update in real-time as you type, showing how your link will appear in Facebook's link card, Twitter/X's summary card and summary-with-large-image card, LinkedIn's feed post preview, and Slack's and Discord's sidebar unfurl. Switch between platform tabs to inspect each preview individually or use the All Platforms view to see them side by side. The validator panel at the bottom checks for common issues: missing image, non-HTTPS image URL, title too long for search results, description too short, incorrect image dimensions. Each issue is listed with a specific recommendation. Copy the generated HTML meta tag snippet to paste into your page's head section.

FAQ

Why does Facebook show a different preview than what I set?

Facebook aggressively caches Open Graph data. Even after you update your og: tags, Facebook may show the old preview for hours or days. To force a refresh, use Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) and click 'Scrape Again'. This tells Facebook's crawler to re-fetch your page and update its cache. LinkedIn has a similar Post Inspector tool. Always test and validate your OG tags in these official tools before sharing important content.

What image size should I use for best results across all platforms?

1200×630 pixels is the recommended universal size—it works well on Facebook (1200×630 required), Twitter/X (1200×628 recommended), LinkedIn (1200×627 recommended), and Slack/Discord. The image must be served over HTTPS, not HTTP. Use JPEG for photos and WebP/PNG for graphics with transparency. Minimum size is 200×200 pixels, but anything smaller than 600×315 will appear as a tiny thumbnail instead of the large card format.

What is the difference between og:title and the HTML title tag?

The HTML title tag (shown in the browser tab and search engine results) and the og:title (used for social sharing previews) can be different—and often should be. Your HTML title might be 'JSON Formatter - Free Online Tool | UtiliZest' (optimized for SEO with brand name), while your og:title might be 'Free JSON Formatter & Validator' (more compelling for social sharing without the brand suffix). Having separate values allows you to optimize each independently.

Do I need separate tags for Twitter and Facebook?

Twitter has its own set of meta tags (twitter:card, twitter:title, twitter:description, twitter:image) separate from Open Graph tags. However, Twitter automatically falls back to og: tags when twitter: specific tags are not present. For most sites, setting og: tags gives you coverage on Facebook, LinkedIn, Slack, Discord, and basic Twitter. Add twitter:card at minimum (set to 'summary_large_image' for the big card format) and optionally duplicate the other values as twitter: tags for the best Twitter experience.

Why is my link preview not showing an image?

Common causes: the og:image URL uses HTTP instead of HTTPS (most platforms block non-secure images), the image URL returns a 404 or requires authentication to access, the image file is too small (under 200×200px), the image MIME type is not recognized (use .jpg, .png, or .webp), or the og:image tag is missing or malformed. Also check that your image is accessible by external crawlers—a localhost URL or an image behind a VPN or firewall cannot be fetched by social platforms.