Open Graph Preview

When someone shares your URL on Facebook, LinkedIn, Slack, Discord, iMessage, or WhatsApp, those platforms don't visit your site as a human would. They send a scraper to read specific meta tags — collectively called Open Graph tags — and use them to build the preview card. Without OG tags, the card falls back to whatever the platform can guess: usually a broken thumbnail, the raw URL as the title, and no description.

The four tags that matter: og:title (the headline of the preview), og:description (the subtext), og:image (the picture), and og:url (the canonical link). Twitter/X uses its own similar set prefixed with twitter: — twitter:card, twitter:title, twitter:description, twitter:image. Most modern sites define both.

The safe universal size is 1200×630 pixels, 2:1 aspect ratio, under 1MB, JPG or PNG. This works on Facebook, LinkedIn, Slack, Discord, and iMessage. Twitter/X uses either 1200×628 (summary_large_image) or 1200×1200 (summary) depending on which card type you specify.

Text on the image should be at least 40px tall so it's readable at the thumbnail size platforms actually display (often as small as 300px wide). Keep important content in the middle 80% — platforms crop the edges differently. And test every share on the actual platform before publishing widely, because rendering is inconsistent and each platform caches previews for 24+ hours (so a bad preview hurts you for a day even after you fix it).

Facebook: use their Sharing Debugger and click "Scrape Again." LinkedIn: use their Post Inspector. Twitter/X: previously had a Card Validator, now deprecated — post to a private account first as your test. All three cache aggressively, so the debugger is the only way to force a re-fetch after you fix an issue.