Preview how your links will appear when shared on Facebook, Twitter, LinkedIn, Discord, Slack, WhatsApp, and iMessage.
See exactly how your page will look when shared on Facebook, Twitter, LinkedIn, and Slack, before you post the link. Enter a URL or manually input Open Graph tags and preview the social card in real time.
Initializing in your browser…
Generate SEO meta tags, Open Graph, and Twitter Card tags for your website. Preview how your page appears in search results and social media.
Create custom border radius with individual corner control, linked/unlinked mode, px/% units, interactive corner sliders on preview, and 12 shape presets
Analyze any URL for phishing, suspicious patterns, and security risks. Detects login keywords, suspicious TLDs, encoded characters, brand impersonation, and more
Before you announce a launch post, you want to see the exact card LinkedIn and Slack will render, and catch missing tags first.
Tags / URL provided
og:title ✓ · og:description ✓ · og:image ✗ missing · og:url ✓
Preview + validation
Slack/LinkedIn card preview rendered from your tags. ⚠ og:image missing → most platforms show a tiny text-only card with no thumbnail. Add a 1200×630 image. ✓ Title and description within recommended length.
Social platforms do not show your page, they show whatever your Open Graph tags say. The tool renders the card the way scrapers will and flags the highest-impact omission (here, no `og:image`, which collapses an eye-catching card into an ignorable line), so you fix it before the post goes out, not after.
See exactly how your page will look when shared on Facebook, Twitter, LinkedIn, and Slack, before you post the link. Enter a URL or manually input Open Graph tags and preview the social card in real time.
The Open Graph Preview tool renders a single set of link details across seven distinct social previews -- Facebook, X/Twitter, LinkedIn, Discord, Slack, WhatsApp, and iMessage -- each drawn with that platform's actual card layout rather than one generic mockup. Facebook, X/Twitter, LinkedIn, and iMessage place the image as a 1.91:1 banner across the top of the card; Discord and Slack instead show the image below the text with a colored left accent bar (Discord's #5865F2, Slack's gray rail), matching how those clients build rich embeds; and WhatsApp draws a chat-bubble preview with a smaller capped-height image. Text is clamped exactly as each client clamps it -- Facebook title to two lines, Discord title to one line and description to three, Slack title to one line -- so you can see where your copy will be cut off on each surface.
You enter the card data by hand: a Page Title, Description, Image URL, Page URL, and Site Name, with the title field showing a 'x/70 characters recommended' counter and the description a 'x/200' counter as you type. There is no live URL crawler -- the tool does not fetch a page and read its meta tags; you supply the values directly, which sidesteps the browser CORS restrictions that block reading arbitrary third-party HTML. The domain shown in each preview is derived by parsing your Page URL through new URL().hostname (falling back to 'example.com' if the URL is invalid). On the banner-style cards (Facebook, X/Twitter, LinkedIn), an Image URL that fails to load triggers an onError handler that swaps in a gray placeholder image icon so you see the broken-image state; the embed-style cards (Discord, Slack, WhatsApp, iMessage) simply drop the image on that same error. An image button loads one of three Unsplash samples (each requested at 1200x630) at random if you just want to test the layout.
A desktop/mobile toggle re-renders every card at that platform's real width breakpoints (for example Facebook and X/Twitter cap at 500px on desktop versus 320px on mobile, while WhatsApp and iMessage use 340px and 280px, and Discord and Slack use 420px and 320px), so you can check both viewports. Each platform also carries a Requirements panel with its specific guidance -- Facebook lists 1200x630px (1.91:1) with a 40-60 character title and 60-110 character description, X/Twitter distinguishes the 120x120 summary card from the 1200x628 large-image card, and LinkedIn calls out a 256-character description max -- so the recommended dimensions track the platform you're previewing. The entered title and description are persisted into the page URL via useUrlStates, making a configured preview shareable through the Share Config button. This is a visual proofing tool for how a link will unfurl; it does not generate or export the underlying og: meta tags.
Verify that your Open Graph tags produce the right card before sharing a new post or page.
Figure out why your links look wrong on social media, missing image, truncated title, or wrong description.
Preview how blog posts and landing pages will appear in social feeds before the marketing team shares them.
Facebook caches Open Graph data. Use their Sharing Debugger to clear the cache and fetch fresh tags.
1200x630 pixels is the recommended size. It works well across Facebook, Twitter (summary_large_image), LinkedIn, and Slack.
Yes. Enter the tags manually instead of fetching a URL, and you can preview the card before the page goes public.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.