Social Preview: Catching Bad-Looking Shares Before They Happen
Learn how to preview exactly how your link will appear on Facebook, LinkedIn, Twitter, Discord and Slack, and how to fix the most common preview problems.
How to force a cache refresh on Facebook and LinkedIn
Common preview problems and one-line fixes
1 How previews are generated
When you paste a URL into Facebook, LinkedIn, Twitter, Discord or Slack, each platform fetches your page once, reads the meta tags, and stores a cached preview. The next 30 days of shares use that cached version.
Why this matters:If your OG tags are wrong when someone first shares the URL, the bad preview gets cached and shared by everyone for the next month. Fix before publishing, not after.
2 Test before publishing
1Run the Social Preview toolOpen content-tools.html#social-preview and paste your URL. See exact previews for Facebook, LinkedIn, Twitter, Discord, Slack and iMessage.
2Check each platform separatelyEach platform uses slightly different aspect ratios and text lengths. A preview that looks fine on Facebook may be cropped weird on Twitter.
3Use platform-specific debuggersFacebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator. Each forces a fresh fetch of your URL and shows what their platform sees.
4Clear cache after fixingIf you find a problem, fix it, then re-run each debugger to clear the cache before promoting the URL.
3 Common preview problems
Problem
Likely cause
Fix
Tiny logo instead of image
Missing og:image
Add og:image with absolute URL
Wrong title
og:title missing; using page instead</td><td>Add explicit og:title</td></tr><tr><td>Image cropped weirdly</td><td>Aspect ratio not 1.91:1 (1200x630)</td><td>Resize to 1200x630</td></tr><tr><td>Old image still shows after edit</td><td>Platform cache (30 days)</td><td>Use platform debugger to refresh</td></tr><tr><td>Image not loading</td><td>Relative URL or blocked by referrer policy</td><td>Use absolute URL; allow social bot user agents</td></tr></tbody></table>
</div>
<div class="tutorial-section">
<h2><span class="section-num">4</span> Force a cache refresh</h2>
<ol class="step-list"><li class="step-item"><span class="step-num">1</span><span class="step-content"><span class="step-title">Facebook</span><span class="step-body">Open developers.facebook.com/tools/debug. Paste URL. Click "Scrape Again". Updated immediately on Facebook.</span></span></li><li class="step-item"><span class="step-num">2</span><span class="step-content"><span class="step-title">LinkedIn</span><span class="step-body">Open linkedin.com/post-inspector. Paste URL. The fetch refreshes LinkedIn's cache.</span></span></li><li class="step-item"><span class="step-num">3</span><span class="step-content"><span class="step-title">Twitter</span><span class="step-body">Twitter's validator was deprecated; current workaround is post a tweet with a query parameter (e.g., ?v=2) which forces a fresh fetch.</span></span></li><li class="step-item"><span class="step-num">4</span><span class="step-content"><span class="step-title">Discord/Slack</span><span class="step-body">These respect OG tags but cache aggressively. Adding a query parameter usually forces a re-fetch.</span></span></li></ol><div class="tip-box"><strong>Cache TTLs</strong>Facebook: ~30 days. LinkedIn: ~7 days. Twitter: until you change the URL. Slack: ~24 hours. Discord: until restart.</div>
</div>
<div class="author-bio" itemscope itemtype="https://schema.org/Person">
<div class="author-avatar" aria-hidden="true">👤</div>
<div class="author-info">
<div class="author-label">Written by</div>
<div class="author-name" itemprop="name">John</div>
<div class="author-title" itemprop="jobTitle">Founder, AIWebPageSEO</div>
<p class="author-bio-text" itemprop="description">Social previews are tiny details that hugely affect click-through rates from social media. A 5-minute preview audit before publishing is one of the highest-impact pre-launch checks you can do.</p>
<div class="author-links">
<a href="https://aiwebpageseo.com" class="author-link" itemprop="url" target="_blank" rel="noopener">🔗 AIWebPageSEO.com</a>
<a href="/content-tools.html#social-preview" class="author-link" target="_blank" rel="noopener">🔍 Try the tool →</a>
</div>
</div>
</div>
<div class="related-wrap">
<div class="related-title">Related guides</div>
<div class="related-grid">
<a href="/aipageseo-demo-pages/novice-tutorial-og-generator.html" class="related-card"><div class="related-card-type">Beginner Guide</div><div class="related-card-title">Open Graph Tags</div></a><a href="/aipageseo-demo-pages/novice-tutorial-meta-analyzer.html" class="related-card"><div class="related-card-type">Beginner Guide</div><div class="related-card-title">Meta Tags</div></a><a href="/aipageseo-demo-pages/novice-tutorial-serp-preview.html" class="related-card"><div class="related-card-type">Beginner Guide</div><div class="related-card-title">SERP Preview</div></a>
</div>
</div>
<div class="page-footer">
<p>Part of the <a href="/seo-audit-platform.html">AIWebPageSEO Suite</a> · <a href="/pricing.html">Pricing</a> · <a href="/seo-auth/dashboard.html">Dashboard</a></p>
</div>
</div>
<script>
window.addEventListener('scroll', function(){
var doc = document.documentElement;
var scrolled = doc.scrollTop;
var total = doc.scrollHeight - doc.clientHeight;
var pct = total > 0 ? (scrolled / total) * 100 : 0;
document.getElementById('progress-fill').style.width = pct + '%';
});
</script>
</body>
</html>