Social Card Preview

What it's for

See what people will see when your page’s link is shared. Facebook, LinkedIn, X, Slack, Teams, Discord and messaging apps build a preview card from Open Graph tags (og:title, og:image and so on) and X’s own twitter: tags in the page’s <head>. A missing picture or a relative address leaves a bare link.

For example, when a new blog post shares as a plain link with no picture, paste its HTML here to find out which tag is missing or wrong, and copy a complete set to fix it.

How to use it

Paste the page’s HTML: the whole page, just its <head>, or only the tags (View Source in a browser shows it). The list gives problems first, then things worth improving. Three previews show the card in the main shapes apps use, and Tags to use is a full set filled in from what’s there, ready to copy into the page.

This page never fetches your picture, so choose the image file as well to see it in the previews and have its size checked (most apps want at least 200 × 200, and 1200 × 630 for a wide card).

Example

Press Try an example, or paste:

<title>Bake Sale | Example Village Hall</title>
<meta property="og:title" content="Village Hall Bake Sale">
<meta property="og:image" content="/images/cakes.jpg">
<link rel="canonical" href="https://hall.example.org/bake-sale">

The message says there’s 1 problem that will spoil the preview: og:image must be a full address starting https://. Notes follow about the missing og:description, og:image:alt, og:url, og:type and twitter:card, and Tags to use fills in og:url from the canonical link.

Good to know

The previews are close to what the apps show, not exact copies: each app crops and shortens in its own way and changes its layout from time to time. Apps also cache cards, so after fixing a live page you may need the app’s own tool (such as Facebook’s Sharing Debugger) to fetch it again.