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. It's the same blind spot as structured data , both live entirely outside what a human visitor or a typical QA pass ever checks. 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.

Open Graph tags are one item worth checking alongside the rest of a technical SEO audit - easy to overlook because nothing about them affects the page's own on-site experience.

A Minimal Correct Example

export const metadata = {
  openGraph: {
    title: "Page Title",
    description: "One or two sentences describing the page.",
    url: "https://example.com/page",
    images: [{ url: "https://example.com/og-image.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
    title: "Page Title",
    description: "One or two sentences describing the page.",
    images: ["https://example.com/og-image.png"],
  },
};