How to fix empty website preview when sharing on social media platforms like Facebook and LinkedIn?
TL;DR
- Set Open Graph title, description, and image in Webflow’s Page Settings and SEO tab.
- Publish your site and use Facebook Debugger or LinkedIn Post Inspector to verify the updated preview.
An empty website preview on social media platforms like Facebook or LinkedIn usually means your site is missing or misconfigured social sharing metadata (Open Graph tags). Here's how to fix it in Webflow.
1. Set Open Graph Settings in Webflow
- Go to the Webflow Designer.
- Open the Page Settings by clicking the gear icon next to the page you want to share.
- In the Open Graph Settings section:
- Title: Add a descriptive title.
- Description: Write a concise description (under 300 characters is ideal).
- Image: Upload a preview image (recommended size is 1200×630 pixels).
- If these fields are blank, platforms will try to guess content, often resulting in an empty preview.
2. Set the Global Social Share Image
- Go to your Project Settings > SEO tab.
- In the Open Graph Image URL field, upload a default image that will be used when a specific page doesn’t have its own OG image.
- This acts as a fallback for any pages missing Open Graph content.
3. Publish the Website
- After making metadata updates, click Publish Site to make sure your new Open Graph data is live.
- Social media platforms won’t see your changes unless the page is published.
4. Debug with Link Preview Tools
- Use the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) to:
- Enter your URL.
- Click Debug to fetch current metadata.
- Click Scrape Again until you see the updated preview.
- For LinkedIn, use their Post Inspector: https://www.linkedin.com/post-inspector/.
5. Check for Meta Tag Conflicts
- Avoid manual
<meta>tags in the Custom Code sections that override Webflow defaults (like Open Graph tags). - Conflicting Open Graph tags can prevent the correct preview from appearing.
6. Ensure Pages Are Public
- Private, password-protected, or unpublished pages will not generate link previews.
- Make sure your site is published and publicly visible at the URL you're sharing.
Summary
To fix empty website previews on social media, set Open Graph metadata (title, description, and image) in Webflow’s Page Settings and SEO tab, publish your site, and use share debugger tools to verify changes. This ensures platforms like Facebook and LinkedIn display the correct preview.
