You share a URL on Slack or Twitter. Instead of a beautiful preview card with a title, description, and image — there's a blank box, a wrong image, or your homepage title showing up on a completely different page. You've seen this. We've all seen this.
Here's why it happens and how to fix it permanently.
Why Social Previews Break
Social platforms — Twitter, LinkedIn, Facebook, iMessage, Slack — all read <meta> tags from your page's <head> to build the preview card. Specifically, they look for Open Graph (og:) and Twitter Card (twitter:) tags.
When these tags are missing, wrong, or cached incorrectly, the preview breaks.
The most common reasons:
1. No OG tags at all. The platform falls back to guessing — usually grabbing the page's <title>, the first paragraph of text, and the first image it finds. Results are unpredictable.
2. The same tags on every page. If your CMS or Next.js app has a single og:title in the root layout, every page shows the same title regardless of content.
3. The OG image doesn't exist or is inaccessible. A 404 or authentication-required image renders as a broken placeholder.
4. The platform has cached old data. Platforms cache OG data aggressively — Twitter for up to 7 days. Updating your tags doesn't automatically refresh cached previews.
5. The URL uses HTTP instead of HTTPS. Most platforms block HTTP images in preview cards.
The Fix
Add these tags to every page's <head>, customized per page:
<title>Page-Specific Title | Site Name</title>
<meta name="description" content="Page-specific description under 160 chars." />
<meta property="og:title" content="Page-Specific Title" />
<meta property="og:description" content="Description for social cards." />
<meta property="og:image" content="https://yoursite.com/page-specific-og.png" />
<meta property="og:url" content="https://yoursite.com/this-page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page-Specific Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://yoursite.com/page-specific-og.png" />
In Next.js (App Router), use the metadata export:
export const metadata: Metadata = {
title: "Page Title",
description: "Page description",
openGraph: {
title: "Page Title",
description: "Page description",
images: [{ url: "https://yoursite.com/og.png", width: 1200, height: 630 }],
},
twitter: {
card: "summary_large_image",
title: "Page Title",
description: "Page description",
images: ["https://yoursite.com/og.png"],
},
};
Forcing a Cache Refresh
After updating your tags:
- Twitter: Go to
cards-dev.twitter.com/validator, paste your URL, click "Preview card." This forces Twitter to re-fetch. - Facebook: Use
developers.facebook.com/tools/debug, paste URL, click "Scrape Again." - LinkedIn: Use
linkedin.com/post-inspector, paste URL.
For Slack, there's no official tool — but adding ?v=2 (or any query param) to the URL you paste will cause Slack to treat it as a new URL and fetch fresh data.
OG Image Dimensions
Make one image at 1200×630px and use it for all platforms. This ratio (1.91:1) is accepted by all major platforms. Host it on a CDN for fast load times — slow-loading OG images sometimes cause platforms to skip the image entirely.
Preview Before Publishing
Use our OG Image Previewer to see exactly how your page will appear on Twitter, LinkedIn, Facebook, and iMessage before publishing. Fill in your title, description, image URL, and site name — see all four platform previews side by side with character count warnings. Then copy the generated meta tags and paste them into your <head>.
Fixing your OG tags is a one-time investment per page template. Once set up correctly, every share looks sharp automatically.