When you share a link on X, LinkedIn, Slack or Discord, the platform fetches your page and reads a handful of meta tags to build the preview card. Get them wrong and your launch announcement shares as a bare URL with no image. Get them right and the same post gets noticeably more clicks.
Open Graph tags do not affect rankings. They affect whether anyone clicks the link at all, which for a launch matters more.
The five tags you actually need
<meta property="og:title" content="Free Open Graph Preview" />
<meta property="og:description" content="See your link card before you share it." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/tools/open-graph-preview" />
<meta property="og:type" content="website" />
Note property, not name. Open Graph is an RDFa vocabulary and uses property; Twitter's tags use name. Most parsers tolerate either, but some - notably older LinkedIn - do not.
og:title - up to about 60 characters before truncation on most platforms. It does not have to match your <title>; the SEO title should lead with a keyword, while the social title can lead with a hook.
og:description - 2 to 4 lines depending on platform, so roughly 155 characters is safe. Slack shows more, X shows less.
og:image - the one that matters most. Details below.
og:url - the canonical URL of the page. Without it, shares of tagged URLs (?utm_source=x) accumulate engagement separately instead of aggregating.
og:type - website for most pages, article for blog posts. article unlocks article:published_time and article:author, which some platforms display.
Getting the image right
This is where most people lose.
Size: 1200 × 630 pixels. That is the 1.91:1 ratio every major platform renders as a large card. Anything below 600 × 315 falls back to a small square thumbnail, which is a dramatically worse click-through.
Format: PNG or JPG. WebP support is inconsistent - X handles it, some Slack versions do not. SVG is not supported anywhere. Keep it under about 1MB; the 8MB ceiling Facebook documents is a hard limit, not a target.
Absolute HTTPS URL. Relative paths silently fail on most crawlers. So does HTTP on an HTTPS page.
Text must survive being small. The card renders at roughly 500px wide in a busy feed. Anything under about 40px in the source image is unreadable. Two lines of large type beats a screenshot of your dashboard every time.
Do not put critical content in the outer 5%. Different platforms crop slightly differently.
Twitter/X tags
X reads Open Graph as a fallback, so you need exactly one X-specific tag:
<meta name="twitter:card" content="summary_large_image" />
Without it, X renders the small square card even when you have a perfect 1200 × 630 image. This single missing tag is the most common social preview bug there is.
The other twitter: tags - twitter:title, twitter:description, twitter:image - only matter if you want different copy on X than everywhere else. If not, omit them and let the og: tags do the work. Fewer tags, fewer things to drift out of sync.
Why your preview still shows the old image
Every platform caches aggressively, and none of them re-fetch on their own.
- Facebook / Instagram: the Sharing Debugger, "Scrape Again".
- LinkedIn: the Post Inspector.
- X: no public debugger any more; changing the URL (adding
?v=2) is the reliable workaround. - Slack and Discord: cache for roughly 30 minutes, then refresh on their own.
If you are about to launch, check and fix your card the day before, not the hour before. Cache clearing is not instant, and X in particular can hold a stale card for hours.
Generating images automatically
Hand-designing an OG image for every page does not scale past about ten pages. Every modern framework can generate them at build time - Next.js has ImageResponse from next/og, which renders JSX to a PNG with no headless browser and no image library.
A good template has three parts: an eyebrow saying what kind of page it is, the page title at large size, and your logo plus domain. That reads at feed scale, works for every page, and takes one file.
Debugging checklist
When a card renders wrong, check in this order:
- Is
og:imagean absolutehttps://URL? (Most common failure.) - Is the image reachable without authentication? Fetch it in a private window.
- Is it at least 600 × 315, ideally 1200 × 630?
- Is
twitter:cardset tosummary_large_image? - Are you using
property=forog:tags andname=fortwitter:tags? - Are the tags in the
<head>, not injected by client-side JavaScript? Most crawlers do not execute JS.
That last one catches every single-page app that renders tags in React on mount. If your framework does not put OG tags in the server-rendered HTML, no social platform will ever see them.
Launch it where the numbers are checked
RankCert ranks products on domain control we verify ourselves. Listing is free and the link stays dofollow whether or not you display the badge.