Social Share Preview

Preview how your link appears when shared on Facebook, Twitter/X, LinkedIn, Discord, and Slack — accurate CSS simulations, dark/light toggle.

Enter page details above and click Preview.

How to Use the Social Share Preview Tool

  1. Enter your page details — paste your page URL, title, description, and image URL into the form fields. These correspond to the og:url, og:title, og:description, and og:image meta tags.
  2. Click Preview — the tool renders simulated share cards for Facebook, Twitter/X, LinkedIn, Discord, and Slack using accurate CSS that mirrors each platform's actual card styles.
  3. Filter platforms — use the option chips to focus on a specific platform's card.
  4. Toggle dark/light mode — preview cards in both light and dark mode to ensure your image and text are readable in both contexts. Discord always displays in dark mode.
  5. Adjust until satisfied — if text gets cut off or the image looks wrong, update your meta tags and preview again before publishing.

Why Social Share Previews Matter

When someone shares a link on social media, the platform generates a preview card by reading your page's Open Graph meta tags. These cards are often the first thing potential visitors see before deciding whether to click — making them one of the most impactful elements of your click-through rate. A compelling card with a striking image, clear title, and engaging description can significantly increase the traffic you get from social sharing.

Open Graph Meta Tags

Open Graph (OG) is a protocol developed by Facebook that defines how web pages are represented when shared on social platforms. The four most important tags are: og:title (the headline shown in the card, typically the page title), og:description (a 1–2 sentence summary, 150–200 characters), og:image (the preview image URL — should be 1200x630 pixels), and og:url (the canonical URL of the page). LinkedIn, Discord, Slack, and many other platforms read these same tags.

Twitter Cards

Twitter has its own twitter:card meta tag that controls the card format. Use summary_large_image for a large banner image (best for articles and blog posts) or summary for a compact card with a small thumbnail. If Twitter-specific tags are missing, Twitter falls back to Open Graph tags. Set twitter:site to your Twitter handle and twitter:creator to the author's handle to attribute cards correctly.

Platform-Specific Image Sizes

Facebook and LinkedIn both prefer 1200x630 pixels (1.91:1 aspect ratio). Twitter's summary_large_image uses 1200x628 (almost identical). Discord and Slack also respect 1200x630. Some platforms crop images on the sides on mobile, so keep important content (text, logos) centered. File size should be under 5 MB, preferably under 300 KB for fast loading. Use JPG for photographs and PNG for graphics that include text.

Cache Busting Social Previews

After updating your Open Graph tags, social platforms will continue showing the old preview for hours or days because they cache the scraped data. To force an update: use Facebook's Sharing Debugger, LinkedIn's Post Inspector, or Twitter's Card Validator. These tools re-scrape your page and clear the cache immediately. For Discord, simply sharing the link again in a server usually pulls a fresh preview. For Slack, unfurling can be refreshed via the message options menu.

Frequently Asked Questions

Open Graph (OG) tags are HTML meta tags that control how pages appear when shared on social media. Defined by Facebook, they are now used by LinkedIn, Discord, Slack, and Twitter as a fallback. Key tags are og:title, og:description, og:image, and og:url. Without them, platforms scrape and guess what to display.
Use 1200x630 pixels for Facebook and LinkedIn (1.91:1 ratio), 1200x628 for Twitter summary_large_image, and 1200x630 for Discord and Slack. Keep file size under 300 KB. JPG for photos, PNG for graphics with text. Keep important content centered to avoid cropping on mobile.
Social platforms cache og:image and meta tags for hours to days. To force an update: use Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn's Post Inspector, or Twitter's Card Validator. These tools clear the cache and re-scrape your page.
'summary' shows a small thumbnail (144x144 max) beside the text — compact, for news and short posts. 'summary_large_image' shows a large banner image above the text — better for articles and blog posts with compelling hero images.
Yes. Both Discord and Slack read og:title, og:description, and og:image. Discord also reads twitter:card and twitter:image as fallbacks. Slack uses og:title, og:description, og:image, and the page title. Setting correct OG tags ensures consistent previews across all platforms.