A Guide to Testing Open Graph Tags and Social Share Previews

A page can look flawless in the browser and still show up as a blank gray box - or worse, someone else's image - the moment it's pasted into Slack, iMessage, or Twitter. That gap is entirely controlled by a handful of meta tags most page templates get only half right.

The Tags That Actually Control the Preview

• og:title - the headline shown in the preview card, independent of the page's <title> tag.
• og:description - the summary text, independent of the meta description used for search results.
• og:image - the preview image. Most platforms require an absolute URL, not a relative path, or the image silently fails to load.
• og:url - the canonical URL the card should link to, useful when the shared URL includes tracking parameters you don't want indexed.
• twitter:card - separately controls Twitter/X's preview format (summary_large_image for a full-width image card).

Why a Page Can "Look Fine" and Still Break Sharing

None of these tags affect anything a human visitor sees on the page itself - they're read exclusively by the crawlers social platforms send out when a link is pasted. A page can render perfectly and still have a missing og:image, a relative image path that resolves to nothing outside a browser session, or no Open Graph tags at all if they were never added to the template.

Common Mistakes

• Relative image URLs. /images/hero.jpg works fine in a browser but fails for a crawler with no session context to resolve it against.
• Image dimensions too small. Most platforms want at least 1200×630px for a large image card; smaller images get cropped oddly or rejected.
• One static image for every page. Missing per-page og:image means every shared link - blog post, product page, homepage - shows the same generic thumbnail.
• Stale cached previews. Some platforms cache a page's preview aggressively; after fixing the tags, you may need each platform's own cache-refresh tool to see the update reflected.

A Minimal Correct Example

1export const metadata = {
2  openGraph: {
3    title: "Page Title",
4    description: "One or two sentences describing the page.",
5    url: "https://example.com/page",
6    images: [{ url: "https://example.com/og-image.png", width: 1200, height: 630 }],
7  },
8  twitter: {
9    card: "summary_large_image",
10    title: "Page Title",
11    description: "One or two sentences describing the page.",
12    images: ["https://example.com/og-image.png"],
13  },
14};