What's the difference between Open Graph and Twitter Card tags?

Open Graph (og:title, og:description, og:image) is the protocol Facebook introduced that most platforms — LinkedIn, Slack, Discord, WhatsApp — now read by default. Twitter/X has its own twitter:card, twitter:title, and twitter:description tags, but it falls back to your Open Graph tags if the Twitter-specific ones are missing, which is why most sites only bother setting twitter:card and let the rest inherit.

What image size should I actually use?

1200×630 pixels is the safe standard for a large image card across Facebook, LinkedIn, and X — it keeps the right aspect ratio (roughly 1.91:1) so platforms don't crop awkwardly. For a summary (small, square-ish) card, aim for at least 144×144, though most sites just reuse the same 1200×630 image and let the platform scale it down.

Why doesn't my image show up in the preview here?

The preview loads the image URL directly in your browser, so it'll fail the same way a real crawler would if the URL is wrong, private, blocked by robots.txt, or requires authentication. Open the image URL directly in a new tab to confirm it loads before troubleshooting further.

Why does my real link preview look different on Slack or Discord than this tool?

Every platform renders Open Graph data with its own layout, font, and cropping rules, and most cache the preview the first time a link is shared — so an old cached preview can linger even after you fix your tags. This tool shows the two most common platform styles for quick sanity-checking, not a pixel-exact render of every possible platform.

SOCIAL SHARE PREVIEW

See how your link card renders on Facebook/LinkedIn and X (Twitter) before you publish.

og:title

og:description

og:url

og:image URL (optional)

Facebook / LinkedIn preview

1200 × 630 image

example.com

A Guide to Shipping Side Projects Faster

Seven small habits that cut the time between idea and a live, usable tool — without cutting corners on quality.

X (Twitter) card preview

1200 × 630 image

A Guide to Shipping Side Projects Faster

Seven small habits that cut the time between idea and a live, usable tool — without cutting corners on quality.

example.com

How to preview your social share card

1
Enter the og:title, og:description, og:url, and og:image you plan to use (or already have in your page's meta tags).
2
Pick a card type: a large image card or a compact summary card.
3
Compare the live Facebook/LinkedIn-style preview against the X (Twitter) card preview, side by side.

Questions

What's the difference between Open Graph and Twitter Card tags?: Open Graph (og:title, og:description, og:image) is the protocol Facebook introduced that most platforms — LinkedIn, Slack, Discord, WhatsApp — now read by default. Twitter/X has its own twitter:card, twitter:title, and twitter:description tags, but it falls back to your Open Graph tags if the Twitter-specific ones are missing, which is why most sites only bother setting twitter:card and let the rest inherit.
What image size should I actually use?: 1200×630 pixels is the safe standard for a large image card across Facebook, LinkedIn, and X — it keeps the right aspect ratio (roughly 1.91:1) so platforms don't crop awkwardly. For a summary (small, square-ish) card, aim for at least 144×144, though most sites just reuse the same 1200×630 image and let the platform scale it down.
Why doesn't my image show up in the preview here?: The preview loads the image URL directly in your browser, so it'll fail the same way a real crawler would if the URL is wrong, private, blocked by robots.txt, or requires authentication. Open the image URL directly in a new tab to confirm it loads before troubleshooting further.
Why does my real link preview look different on Slack or Discord than this tool?: Every platform renders Open Graph data with its own layout, font, and cropping rules, and most cache the preview the first time a link is shared — so an old cached preview can linger even after you fix your tags. This tool shows the two most common platform styles for quick sanity-checking, not a pixel-exact render of every possible platform.