Social Media Link Preview
Preview how a link may look when shared on Facebook, X and LinkedIn from its title, description and image, or load the og: tags straight from a page URL.
What is Social Media Preview?
This tool shows approximate mock-ups of the link cards Facebook, X (Twitter) and LinkedIn display for a URL, side by side. Type the title, description and image URL, or press "Load tags from URL" to read the page's Open Graph and Twitter tags automatically.
How to use Social Media Preview
- Enter the page URL; optionally press Load tags from URL to fill the fields from its og: and twitter: tags.
- Edit the title, image URL and description to try variations.
- Compare the three card mock-ups; long texts are shortened the way each network typically does.
When to use Social Media Preview
Use it to iterate on share titles and images before publishing. The mock-ups are approximations – real cards depend on the app version, screen size and each network's cache – so confirm with the official debuggers for important campaigns.
How Social Media Preview works
The previews are rendered locally with each network's current card layout (1.91:1 image, host name, title and description) and approximate character limits. "Load tags from URL" uses AlgoKit's SSRF-guarded Pages Function to fetch the page and extract its meta tags (og:title, og:description, og:image, twitter:* with the HTML title and description as fallbacks). The image is displayed directly from the URL you enter.
Common Use Cases
- Check that a blog title is not cut off on Facebook.
- See how a product image is cropped in a wide card.
- Compare the preview of two headline variants.
- Verify a live page's og:image is set correctly.
FAQs
Are these previews exact?
No. They follow the networks' current layouts, but fonts, truncation and cropping vary by device and change over time.
Why does Load tags from URL fail?
The page may block bots, need a login, be on a private network, or be offline. You can still type the values manually.
Which tags are read?
og:title, og:description, og:image and og:url first, then twitter:title/description/image, then the page's <title> and meta description.