When you paste a link into Slack, X, LinkedIn, or iMessage and a clean card with an image, title, and description pops up, that is Open Graph doing its job. When you paste a link and get a bare blue string with no preview, that is Open Graph missing. This guide shows you exactly how to add it — the minimal set of tags, the one rule that breaks most previews, framework snippets you can paste in, and how to test before you publish.

What Open Graph tags actually are

Open Graph (OG) is a small set of meta tags you put in your page head. They tell any platform that scrapes your link what title, description, and image to show in the preview card. They are read by Facebook, LinkedIn, Slack, Discord, iMessage, and most others. X reads the same tags plus a couple of its own.

You do not need a backend, a plugin, or an account. You add a handful of tags to the page head and you are done. The hard part is getting the details right — especially the image.

The minimal set of tags

This is the smallest set that reliably produces a large image card across platforms. Drop it into your page head:

<head>
  <meta property="og:title" content="Your page title" />
  <meta property="og:description" content="A short, compelling summary of the page." />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:url" content="https://example.com/your-page" />
  <meta property="og:type" content="website" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://example.com/og-image.png" />
</head>

Five Open Graph tags plus two for X. That is the whole baseline. Everything else is optional polish.

The one rule that breaks most previews

The single most common reason link previews look broken is a relative image path. Crawlers do not run on your domain, so they cannot resolve a path like /og-image.png. Your og:image must be an absolute URL that starts with https://:

<!-- Broken: crawlers cannot resolve this -->
<meta property="og:image" content="/og-image.png" />

<!-- Correct: absolute https URL -->
<meta property="og:image" content="https://example.com/og-image.png" />

Two more image rules worth knowing:

Dimensions. Design for 1200 by 630 pixels (a 1.91:1 ratio). It is the universal sweet spot and renders well almost everywhere.
Reachability. The image must be publicly fetchable with no login, no expiring signed token, and no bot block. Verify it loads in a private or incognito window.

If you also declare the size, scrapers can lay out the card before the image downloads:

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A short description of the image" />

Framework snippets

Next.js (App Router)

In the App Router you do not write meta tags by hand. Export a metadata object (or a generateMetadata function) and Next.js renders the tags for you:

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: "Your page title",
  description: "A short, compelling summary of the page.",
  openGraph: {
    title: "Your page title",
    description: "A short, compelling summary of the page.",
    url: "https://example.com/your-page",
    type: "website",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
    images: ["/og-image.png"],
  },
};

Setting metadataBase is what lets you use a root-relative image path like /og-image.png; Next.js turns it into an absolute URL for you. For a per-page image, return the values from generateMetadata instead of a static object.

Plain HTML

If you control the markup directly, the minimal set from above goes straight into your head. Just remember the absolute og:image URL:

<head>
  <meta property="og:title" content="Your page title" />
  <meta property="og:description" content="A short, compelling summary." />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:url" content="https://example.com/your-page" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

Nuxt and Astro

Most frameworks expose a head or SEO helper that ends up emitting the same tags. In Nuxt, use useHead with a meta array; in Astro, place the tags directly in the layout head. The tag names and the absolute-URL rule are identical no matter how they are generated:

<meta property="og:image" content="https://example.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />

How to test before you publish

Do not ship blind and hope. Test the tags first, then confirm once the page is live.

Before publishing, paste your head markup into the free OG image checker. It renders live preview cards for Open Graph, X, Facebook, LinkedIn, Slack, and Discord, and runs a validation report that flags relative URLs, wrong dimensions, and missing tags. It is 100% client-side, so nothing you paste is uploaded.
After publishing, run the live debuggers to confirm and to bust caches: the Facebook Sharing Debugger and the LinkedIn Post Inspector both let you re-scrape your URL so the platform picks up your latest image instead of a stale one.

For the full pre-publish workflow, see preview and test your OG image before you publish.

Common mistakes

Relative og:image path. The number-one cause of blank cards. Use an absolute https:// URL.
No image at all. Without og:image, platforms guess — usually badly, or with nothing.
Wrong shape. A tall or tiny image gets cropped or downgraded to a small thumbnail. Stick to 1200 by 630.
Login-walled or expiring image. If a scraper cannot fetch it anonymously, the card is empty.
Forgetting twitter:card. Without summary_large_image, X may show a small square instead of the big card.
Stale cache after an update. Platforms remember the first version they scraped. Re-scrape with the official debuggers after any change.

For a deeper tag-by-tag breakdown, see the Open Graph meta tags reference and the why your link preview looks broken guide.

Need an image to point at?

If your tags are ready but you do not have a purpose-built share image yet, make one in a couple of minutes. Open the editor to design a clean 1200 by 630 card, then export it at 2x for crisp results on high-DPI screens. Everything is client-side: no signup, no watermark, nothing uploaded. Add the image, paste your tags into the OG image checker, fix anything it flags, and ship once.