Open Graph Tags for Link Previews: What X, LinkedIn and Slack Read

Short answer: a good link preview needs og:title, og:description, og:image, og:url, og:type and twitter:card. Make the image a 1200×630 PNG, JPG or WebP at an absolute https:// URL, under 5 MB. X, Facebook, LinkedIn, Slack, Discord and iMessage all build their cards from these tags.

Paste any URL into the free Open Graph checker to see which tags it sends, how big its image really is, and an approximate card for each platform.

What the tags are

The Open Graph protocol is a set of <meta> tags in a page's <head> that describe the page to other sites. Facebook published it in 2010; today almost every app that unfurls links reads it. The protocol names four required properties:

Add og:description for the line under the title, og:site_name for your brand, and og:image:alt so the image has a text description.

X reads Open Graph too, but it decides which card to draw from its own twitter:card tag. Use summary_large_image for a full-width image or summary for a small square thumbnail. When twitter:title, twitter:description or twitter:image are missing, X falls back to the Open Graph values, so you rarely need them.

A minimal set that works everywhere

<meta property="og:title" content="Acme – invoices in one click" />
<meta property="og:description" content="Send a branded invoice in under a minute." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.example/" />
<meta property="og:image" content="https://acme.example/og.png" />
<meta property="og:image:alt" content="The Acme invoice editor" />
<meta name="twitter:card" content="summary_large_image" />

Note the attribute names: Open Graph tags use property, X tags use name. Most parsers accept either, but this is what each specification asks for.

Image size and format

A 1200×630 image satisfies both and works on LinkedIn and Slack too. Since the platforms crop slightly differently (about 1.91:1 on Facebook and LinkedIn, 2:1 on X), keep text and logos away from the edges.

X's documentation also warns against using the same generic image on every page, such as your logo. A card per page, with the page's own title on it, is more likely to get the click.

The mistakes the checker finds most

1. No og:image at all. The card shows text only, or the platform picks a random image from the page.
2. A relative image URL such as /og.png. The protocol expects an absolute URL, and some platforms ignore relative ones.
3. An SVG image. X and Facebook do not render SVG previews. Export a PNG.
4. An image behind a login, a firewall or a bot block. Crawlers do not send your cookies. If your CDN challenges unknown bots, the image fails for them.
5. A missing twitter:card. X then may not show the large image card even when og:image is set.
6. The wrong page. The tags are fine on the final URL but the shared URL redirects somewhere else first. Check the chain with the redirect checker.

Why the old preview still shows

Platforms cache link previews, sometimes for days. After fixing your tags:

• Facebook: paste the URL into the Sharing Debugger and choose "Scrape Again".
• LinkedIn: paste the URL into the Post Inspector, which fetches it again.
• X, Slack and others: there is no public refresh button. Wait, or share the URL with a harmless query string such as ?v=2, which counts as a new URL.

Setting the tags in Next.js

In the App Router, export metadata (or generateMetadata) from a page or layout, and Next.js renders the tags:

export const metadata = {
  title: "Invoices in one click",
  description: "Send a branded invoice in under a minute.",
  openGraph: {
    title: "Acme – invoices in one click",
    description: "Send a branded invoice in under a minute.",
    url: "https://acme.example/",
    type: "website",
    images: [{ url: "https://acme.example/og.png", width: 1200, height: 630, alt: "The Acme invoice editor" }],
  },
  twitter: { card: "summary_large_image" },
};

You can also add an opengraph-image.png (or a generated opengraph-image.tsx) next to a page; Next.js then sets og:image with the right absolute URL and dimensions. That is how every page on this site, including the free tools, gets its card.

Before you share your launch

Run your launch URL through the Open Graph checker, fix anything marked as a problem, and check it again. Directories and launch platforms show the same card, so it pays off on every listing, including ConfettiSaaS. If you charge for the product, the Stripe fee calculator shows what each sale leaves you.