You publish a major blog post or launch a new digital tool, copy the URL, and paste it into Facebook, LinkedIn, or WhatsApp—only to see a generic blank white box, a tiny cropped thumbnail, or an outdated image from six months ago.
When social media platforms fail to render rich link preview cards, your social traffic drops by over 75%. Social media users rarely click raw plain-text URLs without a high-contrast visual image and title card.
The culprit is almost always misconfigured Open Graph (OG) protocol metadata or aggressive crawler caching. In this guide, you will learn how to test open graph meta tags for facebook twitter linkedin and fix broken link previews permanently.
1. The Four Technical Reasons Social Images Fail to Display
1. Missing Absolute URL Protocol
The single most frequent mistake web developers make is using relative image paths in their Open Graph tags:
❌ Broken: <meta property="og:image" content="/assets/images/preview.png">
✅ Correct: <meta property="og:image" content="https://yourdomain.com/assets/images/preview.png">
Social media crawlers (like Facebook's facebookexternalhit) do not evaluate links from within your domain origin; they require a fully-qualified, absolute HTTPS URL.
2. Incorrect Aspect Ratio and Dimensions
Modern social platforms expect a 1.91:1 aspect ratio. The gold standard universal dimension is:
1200 pixels width × 630 pixels height (Minimum 600 × 315 pixels).
If your image is smaller than 200×200 pixels, Facebook and WhatsApp will reject it entirely and display a text-only snippet.
Test your Open Graph markup before sharing with clients. Use our free Open Graph Social Card Previewer to visualize Facebook, Twitter/X, LinkedIn, and WhatsApp cards in real-time.
Open Social Previewer →3. Aggressive Social Crawler Caching
When you update an Open Graph image on your site, social platforms do not re-crawl your URL automatically. Facebook caches Open Graph tags for up to 30 days. To force Facebook to re-fetch your new image, you must use the official Facebook Sharing Debugger and click "Scrape Again".
4. Mixed Content (HTTP vs HTTPS)
If your website runs on HTTPS but your og:image URL uses http://, modern browsers and social crawlers will block the image due to insecure mixed-content security policies.
2. The Essential Open Graph & Twitter Card Code Block
Place this complete, validated metadata block in the <head> section of every web page:
<!-- Standard Open Graph for Facebook, WhatsApp & LinkedIn -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://yourdomain.com/blog/article-slug/">
<meta property="og:title" content="Your Engaging Article Title">
<meta property="og:description" content="Your crisp 2-sentence summary designed for social clicks.">
<meta property="og:image" content="https://yourdomain.com/assets/images/featured-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter / X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://yourdomain.com/blog/article-slug/">
<meta name="twitter:title" content="Your Engaging Article Title">
<meta name="twitter:description" content="Your crisp 2-sentence summary designed for social clicks.">
<meta name="twitter:image" content="https://yourdomain.com/assets/images/featured-1200x630.png">
Frequently Asked Questions (FAQs)
Why does WhatsApp not show my website preview image?
og:image file size to be under 300 KB and served over HTTPS with valid SSL certificates. Large images (> 1 MB) fail to load over mobile data connections.
What is the difference between summary and summary_large_image on Twitter?
summary card displays a small square thumbnail on the left, while summary_large_image displays a full-width panoramic 1200×630 banner that dominates the Twitter/X user feed, driving significantly higher engagement.