Facebook uses Open Graph tags to display link previews. If your theme or plugin isn’t outputting proper OG tags, or if the image is missing or cached incorrectly, the preview will fail.
Trying to share your WordPress link on Facebook, Twitter, or WhatsApp but getting no preview, no image, or a broken title? You’re not alone. If your WordPress site preview is not showing on social media, the culprit is almost always a missing or incorrect Open Graph (OG) tag.
This guide will walk you through fixing the problem — whether you want to solve it manually, use a plugin, or just understand what’s going wrong under the hood.
🔍 What Causes WordPress Link Preview Not Showing on Social Media?
When you paste a URL into a social media platform, it sends a crawler (like Facebook’s facebookexternalhit) to fetch metadata — specifically Open Graph (OG) and Twitter Card meta tags.
🛑 If OG tags are missing or misconfigured, the preview fails.
Here are the most common causes:
- OG meta tags not present in your theme’s
<head> - Image URLs are broken or not large enough
- Plugins conflicting or stripping header tags
- Cache or CDN issues (e.g., Cloudflare not purged)
- Facebook or Twitter cached the URL too early
✅ Quick Fix Using a Plugin (Yoast SEO / Rank Math)
1. Enable OG Tags in Your SEO Plugin
For Yoast SEO:
- Go to
SEO → Social - Enable Add Open Graph meta data
For Rank Math:
- Go to
Rank Math → Titles & Meta → Global Meta - Enable Open Graph Meta
2. Add Facebook Image, Title, and Description
- Edit your post
- Scroll to the SEO plugin panel
- Click on the Social tab
- Upload image, customize title + description
✅ Make sure your OG image is at least 1200x630px — otherwise it won’t show correctly on most platforms.
🛠️ Manual Fix: Add Open Graph Tags to <head> in Theme
If you’re not using an SEO plugin, or want tighter control, add this to your header.php (inside your child theme):
<meta property="og:title" content="Your Post Title Here" />
<meta property="og:description" content="Short description about the post" />
<meta property="og:image" content="https://yourdomain.com/path-to-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/your-post" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />💡 You can even make this dynamic using WordPress functions like get_the_title(), get_the_excerpt(), and get_permalink().
—
🧪 Testing Your OG Tags
Once you’ve added your OG tags, make sure they’re being picked up correctly.
✅ Facebook Sharing Debugger
Enter your URL and hit “Debug” → Then click “Scrape Again”
✅ Twitter Card Validator
Paste your URL to preview how Twitter will display it.
✅ LinkedIn Post Inspector
🔥 Common Problems and How to Fix Them
1. OG Image Not Showing?
- Ensure the image is 1200×630 or larger
- URL must be absolute and publicly accessible
- Don’t use WebP unless you know the platform supports it
2. OG Tags Not Appearing in Page Source?
- Make sure caching plugins are cleared
- Disable any minification temporarily
- View source as logged-out user
3. Preview Used to Work, Now It Doesn’t?
- Facebook caches previews aggressively
- Use “Scrape Again” in Debugger to refresh it
🧠 Pro Tip: Add Twitter Card Tags Too
While OG tags are used by Facebook, LinkedIn, WhatsApp — Twitter uses its own card tags.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title Here" />
<meta name="twitter:description" content="Short summary here." />
<meta name="twitter:image" content="https://yourdomain.com/path-to-image.jpg" />📌 Final Checklist
- ✅ OG tags present in source
- ✅ Images are correct size and path
- ✅ Facebook Debugger returns expected output
- ✅ Twitter Validator shows correct card preview
🔗 Related Posts
Still stuck? Contact Babar Ilyas for a full OG tag audit on your site.
