Open Graph Tags: The 6 You Need, the Sizes That Work, and How to Debug Previews

The short answer

Open Graph tags are <meta property="og:..."> tags in a page's <head> that tell Facebook, LinkedIn, WhatsApp, Slack, iMessage and other apps which title, description and image to show when someone shares the link. The protocol requires four of them: og:title, og:type, og:image and og:url. Add og:description as well, because LinkedIn and WhatsApp expect it. Use an image around 1200 × 630 px (1.91:1), under 600 KB, at an absolute https:// URL, and make sure the tags are in the HTML your server sends, not added later by JavaScript. If a preview is still wrong after that, the cause is usually a cache, not your markup.

The smallest tag set that works

These four lines are the whole requirement of the Open Graph protocol at ogp.me. Everything else improves the result or satisfies one particular platform.

<meta property="og:title" content="Trail Runner X2 Review">
<meta property="og:type" content="article">
<meta property="og:image" content="https://trailfoot.example.com/og/trail-runner-x2.jpg">
<meta property="og:url" content="https://trailfoot.example.com/reviews/trail-runner-x2">

Without any Open Graph tags, Facebook's crawler guesses the title, description and image from the page, and the guess is often a logo or an ad. Writing the tags yourself removes the guesswork.

The full tag set, and what each tag does

On top of the four required tags, the platforms ask for a few more. LinkedIn's help center lists og:title, og:image, og:description and og:url as tags that must exist, and WhatsApp's documentation says title, description and URL must be in the head and not empty.

How to add Open Graph meta tags so crawlers see them

Use property=, not name=. The protocol is built on RDFa and every example on ogp.me uses property. Put the tags near the top of the <head>: Meta's crawler cuts off Open Graph properties that come after the first 1 MB, and WhatsApp needs the head within the first 300 KB of HTML. Most important, render them on the server. Apple states that Messages link previews do not run JavaScript or follow meta redirects, and Slack says its crawler fetches as little of the page as it can to read the tags. Tags injected in the browser by a single-page app or a tag manager are invisible to these crawlers.

<head>
  <title>Trail Runner X2 Review | TrailFoot</title>
  <link rel="canonical" href="https://trailfoot.example.com/reviews/trail-runner-x2">

  <meta property="og:title" content="Trail Runner X2 Review">
  <meta property="og:description" content="Grip, fit and comfort after a season on muddy trails.">
  <meta property="og:image" content="https://trailfoot.example.com/og/trail-runner-x2.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Muddy trail running shoe on a rocky path">
  <meta property="og:url" content="https://trailfoot.example.com/reviews/trail-runner-x2">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="TrailFoot">

  <meta name="twitter:card" content="summary_large_image">
</head>

The last line is for X. According to X's card markup reference, twitter:title, twitter:description, twitter:image and twitter:image:alt fall back to the matching og: tags. The card type does not: if twitter:card is missing, X may render a small summary card instead of the large image one. The Twitter card validator guide covers that gap in detail.

Next.js App Router. Set the same values through openGraph in your metadata. Relative image and URL paths need metadataBase; without it the build fails. Metadata from nested segments is merged shallowly, so a page's own openGraph object replaces the layout's rather than extending it, and an openGraph without images loses the layout's image. Next.js also streams metadata for ordinary browsers but keeps it in the head for bots such as Twitterbot and Slackbot, so test with a crawler user agent rather than your browser.

// app/reviews/trail-runner-x2/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  // Usually set once in app/layout.tsx
  metadataBase: new URL("https://trailfoot.example.com"),
  alternates: { canonical: "/reviews/trail-runner-x2" },
  openGraph: {
    title: "Trail Runner X2 Review",
    description: "Grip, fit and comfort after a season on muddy trails.",
    url: "/reviews/trail-runner-x2",
    siteName: "TrailFoot",
    type: "article",
    images: [
      {
        url: "/og/trail-runner-x2.jpg",
        width: 1200,
        height: 630,
        alt: "Muddy trail running shoe on a rocky path",
      },
    ],
  },
};

What each platform reads

Image rules that cover every platform

• Size and ratio: 1200 × 630 px (1.91:1) meets Facebook's high-resolution recommendation, LinkedIn's 1200 × 627 minimum and Apple's 900 px guidance. X's large card is 2:1, so it can crop a 1.91:1 image slightly. Keep important content away from the top and bottom edges.
• File weight: keep it under 600 KB. That is WhatsApp's limit and the one people miss. Photos exported as JPG usually fit, while the same picture as PNG often does not.
• URL: absolute, on HTTPS, and publicly reachable without a login, hotlink protection or an expiring signed URL. WhatsApp requires an absolute image URL, and ogp.me defines URL values as full addresses.
• Format: JPG, PNG or GIF for Facebook (og:image:type), WEBP also works on X, and SVG does not work on X.
• Text in the image: Apple advises against it, because images are shown at different sizes and the text can become unreadable. Put the words in the title and description tags.

Why your link preview is stale, and how to refresh it

Platforms fetch a URL, cache what they find and reuse it. Facebook caches images by their URL, so overwriting the file at the same address changes nothing. Meta's guidance is to give the new image a new URL and keep the old file, since earlier shares still point to it. How to force a fresh fetch:

• Facebook: paste the page URL into the Sharing Debugger. It shows the tags the crawler read with any errors or warnings, and it triggers a new scrape. If an image will not render, paste the image URL itself into the debugger too. Meta says its cache otherwise refreshes about every 24 hours.
• LinkedIn: run the URL through Post Inspector, which shows what LinkedIn extracted, when it last updated its data, and lets you request a re-scrape.
• Slack: caches unfurls across the service for around 30 minutes, so waiting is enough.
• WhatsApp and iMessage: the official documentation describes no refresh tool. The practical route is a URL they have not seen: give the image a new filename, or share the page with a harmless query string added.

Updating an image does not change posts that are already out. Meta says old shares need to be refreshed separately. Check the tags before a link goes out widely, not after.

Open Graph debugging checklist

Check your Open Graph tags

CheckSEO's Open Graph Checker fetches a URL and reports whether og:title, og:description, og:image, og:url and og:type are present, flags a missing og:site_name or og:locale, warns when og:image isn't an absolute URL, and draws a share-card preview from the values it finds. Run it after every fix, then refresh the platform caches.

Sources

• The Open Graph protocol (ogp.me)
• Meta: A Guide to Sharing for Webmasters
• Meta: Images in Link Shares
• Meta: Sharing best practices
• Meta: Web crawlers
• Meta: WhatsApp link previews
• LinkedIn Help: Make your website shareable on LinkedIn
• LinkedIn Post Inspector
• Apple TN3156: Create rich previews for Messages
• Slack Robots
• Google Search Central: Influencing title links
• Google Search Central: Site names
• X Developer docs: Cards markup (archived copy read)