How to Test Open Graph Tags — OG Image Preview Tool Guide

What is Open Graph?

Open Graph (OG) is a protocol created by Facebook that controls how web pages appear when shared on social media. When you share a URL on Facebook, LinkedIn, Slack, or WhatsApp, the platform reads OG tags to display a preview card.

Why your social shares might look wrong

If you've ever shared a link and seen the wrong image, a missing image, or incorrect text, it's because:

• Missing og:image tag
• Image wrong dimensions (not 1200×630px)
• Title or description too long
• HTTPS vs HTTP mismatch on image URL
• Cached old data from previous version

OG image specifications by platform

Use 1200×630px as your default — it works well everywhere.

How to test your OG tags for free

1. Go to OG Image Preview
2. Enter your page URL or paste the HTML source
3. View previews for Facebook, Twitter, and LinkedIn simultaneously
4. Check the issues checklist for missing or problematic tags
5. Fix issues and test again

Twitter Cards vs Open Graph

Twitter/X uses its own twitter: meta tags, but falls back to OG tags if Twitter tags are absent. For best results, include both:

<!-- Open Graph (works on most platforms) -->
<meta property="og:title" content="Page Title">
<meta property="og:image" content="https://yoursite.com/og.jpg">

<!-- Twitter/X specific -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:image" content="https://yoursite.com/og.jpg">

summary_large_image shows a full-width image card — much more clickable than the default small summary card.

Next.js Open Graph setup

In Next.js 14+ App Router, use the metadata export to generate OG tags automatically:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    images: [{ url: '/og/page.png', width: 1200, height: 630 }],
  },
}

Common OG issues and fixes

Missing og:image

Add to your HTML head:

<meta property="og:image" content="https://yoursite.com/og-image.jpg">

Image not showing (HTTPS required)

Make sure your og:image URL starts with https://, not http://

Wrong image appearing

Social platforms cache OG data. Force refresh using:

• Facebook: developers.facebook.com/tools/debug
• Twitter: cards-dev.twitter.com/validator
• LinkedIn: linkedin.com/post-inspector

Caching is why your fix "did not work"

The most common frustration with Open Graph is updating the tags, resharing, and seeing the old preview. The tags are correct; the platform cached the previous scrape.

Facebook, LinkedIn, and Slack all cache aggressively, sometimes for days. Each has a way to force a refresh:

A reliable trick while iterating: append a dummy query parameter (?v=2). Crawlers treat it as a new URL and scrape fresh, without waiting out the cache.

Absolute URLs are mandatory

og:image must be a fully qualified URL. A relative path fails, because the crawler has no page context to resolve it against:

<!-- broken -->
<meta property="og:image" content="/og/preview.png">

<!-- correct -->
<meta property="og:image" content="https://example.com/og/preview.png">

In Next.js, setting metadataBase in the root layout resolves relative paths to absolute automatically, which is why relative values sometimes appear to work in that framework and nowhere else.

What crawlers cannot do

Social crawlers fetch raw HTML and do not execute JavaScript. Tags injected client-side — by React on mount, by a tag manager, or by any useEffect — are invisible to them.

This is why a single-page app often shows the same generic preview for every URL: the crawler sees the shell HTML before hydration. The fix is server-side rendering or static generation of the meta tags, not a client-side library.

Verify with curl rather than DevTools, since DevTools shows the DOM after JavaScript has run:

curl -s https://example.com/page | grep 'og:'

If the tags are missing there, every crawler sees what you see.

Other requirements that quietly fail

• HTTPS. Most platforms refuse to load an image over plain HTTP.
• No authentication. The image must be publicly fetchable. A URL behind a login, a signed URL, or a firewall returns an error to the crawler.
• Size limits. Facebook rejects images above roughly 8 MB. Aim well under 1 MB.
• Aspect ratio. 1200×630 (1.91:1) is the safe default. Square images get cropped unpredictably.
• Text placement. Some surfaces crop the edges, so keep important text within the central ~80%.

Frequently asked questions

Do I need both Open Graph and Twitter Card tags?

Not strictly. X falls back to og: tags when twitter: equivalents are missing, so twitter:card alone is often enough. Adding explicit twitter:image gives you a different image per platform if you want one.

Why is a different image showing?

Either a cached scrape, or multiple og:image tags where the platform picked the first. If none is found, some platforms guess by scanning images in the page.

Should og:image be a static file or generated?

Generated images — rendered per page with the title on them — get noticeably better engagement than a single shared graphic. Next.js does this with the ImageResponse API at the edge.

Does Open Graph affect SEO?

Not directly; it is not a ranking signal. It affects click-through rate on shared links, which influences traffic and engagement.

What size should the image be?

1200×630 pixels covers Facebook, LinkedIn, and X. Use the same asset everywhere unless you have a reason not to.