Your link looks terrible when shared on Facebook. Fix it in 10 minutes.
You paste a URL into a Facebook post and the preview shows the wrong image, an ancient thumbnail from 3 years ago, or a blank rectangle with a broken icon.
This is one of the most common and frustrating web problems. The good news: it's almost always caused by one of five fixable things.
Why Facebook link previews break
Facebook reads Open Graph (OG) meta tags to build link previews. These are HTML tags in your page's that tell Facebook what title, description, and image to use.
When Facebook scrapes your URL, it looks specifically for:
If these tags are missing, outdated, or wrong — Facebook's preview breaks.
The 5 most common causes (and fixes)
1. No Open Graph tags at all
If your page doesn't have og:image, Facebook will try to find an image on the page itself. It picks one at random — usually a logo, a product thumbnail, or nothing. The result looks unprofessional.
Fix: Add OG tags to your page's :
2. Old preview is cached — changes not showing
Facebook caches link previews aggressively. After you fix your OG tags, Facebook may still show the old (broken) preview for days or weeks.
Fix: Use the Facebook Sharing Debugger to force a cache refresh:
1. Go to developers.facebook.com/tools/debug
2. Paste your URL
3. Click Fetch new scrape information
4. If it still shows old data, click Scrape Again
This forces Facebook to re-fetch your page immediately and update the cache. Do this every time you update your OG image or title.
3. OG image is the wrong size
Facebook requires a minimum image size of 200×200px to show any preview image, and recommends 1200×630px for the full-width banner style.
Facebook OG image requirements:
- Minimum: 200×200px
- Recommended: 1200×630px (aspect ratio 1.91:1)
- Maximum: 8MB
- Supported formats: JPG, PNG, GIF (static), WebP
Images smaller than 200×200px will be ignored and Facebook will fall back to a text-only preview. Images between 200-600px will show as a small square thumbnail on the left of the text.
Fix: Create a dedicated OG image at 1200×630px. Tools like Canva, Figma, or even Google Slides can export images at this size. Name it og-image.jpg and host it at a permanent URL.
4. OG image URL is not publicly accessible
Facebook's scraper (user-agent: facebookexternalhit) must be able to access your image. If the image is:
- Behind authentication
- On a staging server not accessible publicly
- Blocked by robots.txt
- Returning a 404 or 403
...the preview will show no image.
Check: Paste your og:image URL directly into an incognito browser window. Can you see it? Then check with the Facebook Debugger — it shows exactly what Facebook's scraper saw.
Fix: Make sure the image URL is:
- ✓ Absolute URL starting with
https:// - ✓ Publicly accessible with no login required
- ✓ Not blocked in
robots.txt - ✓ Returns HTTP 200 OK with a valid image content-type
5. Wrong or conflicting og:url tag
The og:url tag should exactly match the canonical URL of the page. If it points to a different URL — or if there are duplicate OG tags — Facebook gets confused and may use a cached version from a different URL.
Wrong:
Right:
Platform-specific fixes
Shopify
Shopify generates OG tags automatically for product pages, but they're often not configured correctly. Go to Online Store → Themes → Customize → Theme Settings → Social Media to set a default OG image.
For custom OG images per page, edit your theme.liquid:
{% if page.image %}
{% elsif settings.share_image %}
{% endif %}
WordPress
Install Yoast SEO (free) or RankMath (free). Both plugins handle OG tags automatically using your post's featured image. No coding required.
If you're already using one of these plugins and previews are still broken — check the plugin settings: Yoast → Social → Facebook → Add Open Graph metadata should be enabled.
Squarespace
Squarespace auto-generates OG tags from your page's content. To customise them: go to Pages → [page] → Settings → Social Image. You can upload a specific image for Facebook previews.
Webflow
In Webflow, go to Page Settings → SEO for each page. There's an "Open Graph" section where you can set a custom title, description, and image per page. You can also set site-wide OG defaults in Project Settings → SEO.
How to test your Facebook link preview
Method 1: Facebook Sharing Debugger
developers.facebook.com/tools/debug — shows you exactly what Facebook sees when it crawls your URL, including any warnings about your OG tags.
Method 2: GetMetaFix
Run a free audit at getmetafix.com. It checks all your OG tags (og:title, og:description, og:image, og:url), flags missing or misconfigured tags, and generates the exact HTML fix code you need. Takes 30 seconds.
Method 3: opengraph.xyz
opengraph.xyz previews how your link looks across Facebook, Twitter, LinkedIn, and Slack simultaneously.
The complete Open Graph template
Here's a complete, correct OG setup for any page:
Quick fix checklist
- ✓
og:titlepresent and under 60 characters - ✓
og:descriptionpresent and under 155 characters - ✓
og:imagepresent, pointing to a public HTTPS URL - ✓
og:imageis at least 1200×630px - ✓
og:urlmatches the page's canonical URL exactly - ✓ No duplicate OG tags on the page
- ✓ Facebook Debugger shows no errors
If you want to check all of this in 30 seconds — run getmetafix.com on any URL. It audits 12 meta tag signals including all Open Graph tags, and if anything's broken, it shows you the exact lines of HTML to fix it. Free, no account needed.