# Open Graph tags: the complete guide to link previews

> You need five Open Graph tags - title, description, image, url, type - plus twitter:card set to summary_large_image. The image must be 1200x630, an absolute HTTPS URL, and present in server-rendered HTML, because most social crawlers do not execute JavaScript.

Source: https://rankcert.com/blog/open-graph-guide
Published: 2026-08-29 · Updated: 2026-08-29

---


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

```html
<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.

Free tool: [Open Graph Preview](https://rankcert.com/tools/open-graph-preview) - Preview how your page looks when shared on X, LinkedIn, Slack and Facebook, and find the Open Graph tags you are missing.

## 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:

```html
<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.

<Callout>
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.
</Callout>

## 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:

1. Is `og:image` an absolute `https://` URL? (Most common failure.)
2. Is the image reachable without authentication? Fetch it in a private window.
3. Is it at least 600 × 315, ideally 1200 × 630?
4. Is `twitter:card` set to `summary_large_image`?
5. Are you using `property=` for `og:` tags and `name=` for `twitter:` tags?
6. 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.

<Cta />