Paste your full HTML or just the <head> section:
Social card preview appears here
Paste HTML and click Extract Tags — or use Manual entry
// see how your page looks when shared on social media
Preview how your page looks when shared on Facebook, Twitter/X, LinkedIn, and Slack. Paste HTML or enter tags manually — see pixel-accurate social card mockups instantly. Free.
Paste the full HTML of your page or just the <head> section and click Extract Tags. Or switch to Manual entry to type tag values directly.
Switch between Facebook, Twitter Large, Twitter Small, LinkedIn, Slack and WhatsApp to see how the card looks on each platform.
The Issues panel shows missing tags, incorrect image dimensions, and other problems. Each warning includes a suggested fix.
Open Graph Preview reads the OG and Twitter Card meta tags from any HTML and renders pixel-accurate social card mockups for six major platforms — entirely in the browser. Paste your page's HTML and see exactly how the link preview will appear when someone shares it on Facebook, Twitter/X, LinkedIn, Slack, or WhatsApp.
The recommended size is 1200 × 630 pixels with an aspect ratio of approximately 1.91:1. Facebook requires a minimum of 200 × 200 pixels and recommends at least 600 × 315 pixels. File size should be under 8 MB. For Twitter's summary_large_image card, the same 1200 × 630 recommendation applies. Images smaller than 300 × 157 pixels on Twitter will render as the small summary card.
Each platform crops and resizes OG images differently. Facebook shows a wide landscape card (1.91:1). Twitter crops to roughly 2:1 for large image cards and to a 1:1 square for the summary card. LinkedIn uses a wider crop. Slack shows a thumbnail. Design your OG image with important content centred and away from the edges so it looks good across all aspect ratios.
Facebook caches OG data aggressively — once a URL has been shared, the original image, title, and description are cached for hours or days. To force a cache refresh, use the Facebook Sharing Debugger at developers.facebook.com/tools/debug and click "Scrape Again." The debugger also shows you exactly which OG tags Facebook found and any errors it encountered.
Twitter reads its own twitter:* meta tags first. If a specific Twitter tag is missing, it falls back to the equivalent OG tag. If twitter:image is not present, Twitter uses og:image. If twitter:title is absent, it uses og:title. This means you often only need to add twitter:card to specify the card type — the rest can be inferred from your OG tags.
Yes. LinkedIn reads standard Open Graph tags to generate link previews. The most important are og:title, og:description, and og:image. LinkedIn also has its own cache that you can clear using the LinkedIn Post Inspector at linkedin.com/post-inspector. Like Facebook, LinkedIn requires that your page is publicly accessible — previews cannot be generated for pages behind authentication.
Slack's Unfurl feature reads OG tags when a URL is pasted into a channel. It shows a compact card with the OG image (cropped to a small thumbnail on the left), the OG title, and a truncated description. The Slack preview is more compact than Facebook and Twitter cards. Slack respects og:image for the thumbnail and og:title and og:description for the text content.
When someone shares a link on social media, they don't share the page itself — they share a rich card with an image, title, and description. This card is generated from Open Graph meta tags embedded in the page's HTML. How that card looks depends entirely on which OG tags are present, what values they contain, and how each platform renders them. Testing before publishing is the only way to catch missing tags, broken image URLs, and titles that truncate at the wrong point.
Open Graph was created by Facebook in 2010 to give web publishers control over how their content appears when shared. The protocol defines a set of meta tags using the property attribute with og: prefixes. The four required tags are og:title, og:type, og:image, and og:url. Without these, each platform applies its own heuristics to choose an image and title, often with poor results.
Facebook renders a wide landscape card with the image spanning the full width of the card. The title appears below the image in bold, followed by the description and the domain name. Twitter/X offers two card types: summary_large_image shows a large image above the tweet with title and description below; summary shows a small square thumbnail to the left of the text. LinkedIn uses a landscape card similar to Facebook. Slack's Unfurl is the most compact, showing a small thumbnail with the title and a short description.
The safest OG image strategy is to design at 1200 × 630 pixels with important visual content confined to a central safe zone of approximately 900 × 470 pixels. This accounts for cropping across all platforms. Use a high-quality JPEG or PNG under 300 KB for fast loading. Avoid transparent backgrounds — some platforms render transparency as black. Include text in the image sparingly and test that it remains legible when the image is cropped to a square thumbnail.