How to Fix Broken Social Share Previews (OG Tags)

A prospect shares a client's homepage on LinkedIn and the preview is a blank rectangle with a garbled title. The page itself is fine. The brand looks amateur. This is an OG tag failure, and it happens on a surprising number of agency-managed sites.

Open Graph (OG) tags are the <meta> properties that control what LinkedIn, Facebook, Slack, WhatsApp, and iMessage display when someone pastes a URL. Getting them wrong is cheap to fix and expensive to ignore — every shared link is a micro ad impression, and a broken one destroys it.

Why Shares Render Blank or Wrong

Three failure modes account for almost every bad preview:

1. Missing tags entirely. No og:image means the platform picks an arbitrary image or shows nothing.
2. Relative image URLs. og:image must be an absolute URL (https://example.com/og.jpg). A relative path (/og.jpg) breaks every crawler that doesn't know the domain.
3. Wrong image dimensions. The canonical size is 1200 × 630 px. LinkedIn crops to 1.91:1; Twitter/X uses the same ratio for summary_large_image. An image that's too small gets rejected or pixelated.

Stale cache is a fourth culprit that trips agencies up: you fix the tag, but LinkedIn still shows the old preview because its crawler cached the page. That's not an SEO failure — it's a debugger problem (covered below).

The Required OG Tag Set

Every page that might be shared needs at minimum:

<meta property="og:title" content="Page Title Here" />
<meta property="og:description" content="One- or two-sentence description." />
<meta property="og:image" content="https://example.com/og/homepage.jpg" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />

For articles, swap og:type to article and add:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-16T00:00:00Z" />
<meta property="article:author" content="https://example.com/about" />

Use og:site_name to reinforce brand on multi-section sites:

<meta property="og:site_name" content="Acme Roofing" />

Twitter/X Card Tags

OG tags don't control Twitter/X. That platform reads its own card meta tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title Here" />
<meta name="twitter:description" content="One- or two-sentence description." />
<meta name="twitter:image" content="https://example.com/og/homepage.jpg" />
<meta name="twitter:site" content="@clienthandle" />

summary_large_image is the card type you want for editorial content and landing pages. summary (small square image) is acceptable for profile-type pages but performs worse in feeds.

The dirty secret: most platforms now fall back to OG tags if Twitter card tags are absent. But don't rely on the fallback — platforms change behavior, and having explicit tags means you control exactly what renders.

Image Spec Checklist

One original observation worth internalizing: the OG image is read by crawlers that will never execute your JavaScript. If you're generating the image URL in a React component without SSR, the crawler sees nothing.

The Absolute URL Mistake That Kills Mobile Shares

The most common error on client sites is a root-relative path:

<!-- BROKEN — crawler has no base URL context -->
<meta property="og:image" content="/images/social-banner.jpg" />
 
<!-- CORRECT -->
<meta property="og:image" content="https://acmeroofing.com/images/social-banner.jpg" />

This breaks WhatsApp shares even when Facebook and LinkedIn happen to resolve it correctly. Always hardcode the domain. Check with the OG Preview tool — it shows exactly what the raw og:image value looks like before any browser resolution applies.

Dynamic OG Images

Static OG images fail for content-heavy sites. A blog post without a unique preview image is a missed opportunity. Two solid approaches:

Next.js / Vercel: Use the next/og package with the ImageResponse API to generate images at the edge from route params. Each blog post gets a unique image with its title and author baked in — no designer needed after initial setup.

Cloudinary URL transforms: If the site is already on Cloudinary, build a URL template:

https://res.cloudinary.com/demo/image/upload/
  w_1200,h_630,c_fill/
  l_text:Arial_60_bold:Page%20Title,co_white,g_south_west,x_60,y_60/
  base-template.jpg

Either approach beats a single static og.jpg for every page on the site.

Common Mistakes to Skip Past

Don't use the page's <title> tag as a substitute. og:title is separate. Platforms don't fall back to <title>.

Don't set og:description to the same string as the meta description. The meta description is for search results. The OG description is for social cards. They have different length constraints (social cards truncate around 155 characters but vary by platform) and different jobs — search descriptions drive clicks, social descriptions drive shares.

Don't forget internal pages. Agencies typically fix the homepage and forget /services, /case-studies, and blog posts. Every page that a user might share deserves a unique og:image and an accurate og:title.

Don't skip validation. Use the OG Preview tool and the Meta Tag Analyzer together — the first shows what crawlers see, the second surfaces missing or malformed tags in the full meta tag audit.

Cache Busting After You Fix Tags

LinkedIn, Facebook, and Slack cache OG data aggressively. After deploying fixes:

• Facebook/Instagram: Use the Facebook Sharing Debugger and click "Scrape Again"
• LinkedIn: Use the LinkedIn Post Inspector and force a re-fetch
• Slack: Paste the URL in Slack and wait ~24 hours, or use a cache-busted URL with a query string (?v=2) temporarily

Twitter/X cache clears faster — typically within a few hours of the tag change deploying.

Validating the Fix at Audit Time

When auditing a prospect site, check these in order:

1. View page source — search for og:image. Absent? Flag immediately.
2. If present, check whether the value is an absolute URL.
3. Fetch the image URL directly — verify it returns a 200 and the image is ≥600px wide.
4. Run through the OG Preview tool to see the rendered card.
5. Check og:title and og:description for truncation at realistic preview widths.

This five-step check takes under two minutes per page and produces a concrete finding clients understand — they've all seen a broken LinkedIn preview and felt the embarrassment.

The audit one-liner for OG tags: Every page that might be shared needs five absolute, pixel-perfect OG tags — missing or relative values turn every social share into a dead impression.

Related reading

• Meta Tags That Actually Impact Rankings
• How to Read Your Meta Tag Analyzer Results
• The Most Common Audit Failures