Webflow sync, pageviews & more.
NEW

How to fix empty website preview when sharing on social media platforms like Facebook and LinkedIn?

TL;DR
  • Add Open Graph metadata in Webflow's SEO or Page Settings, including title, description, and a properly sized image.
  • Republish your site to the live domain, ensure OG image URLs are accessible, and test using Facebook Debugger and LinkedIn Inspector.

Empty link previews on platforms like Facebook and LinkedIn usually mean your Webflow site is missing proper Open Graph meta tags or the page hasn’t been published with recent changes.

1. Add Open Graph Settings in Webflow

  • Go to Project Settings → SEO tab.
  • Scroll to Open Graph Settings.
  • Fill out the following:
  • Title: The name you want to appear when shared.
  • Description: A short description of the page.
  • Image URL: Upload or link to a high-resolution image (1200x630 recommended).
  • Make sure to check “Use this for homepage” if it’s for your main URL.
  • Or, for individual pages: go to the Page Settings of each page and define the Open Graph settings there.

2. Republish Your Website

  • After setting Open Graph metadata, click ‘Publish’ and make sure your site is updated for the live domain, not just the staging (webflow.io) one.
  • Social platforms scrape only the live domain (e.g., yourdomain.com).

3. Test With Social Media Scraper Tools

  • Facebook: Use the Facebook Sharing Debugger.
  • Paste your URL and click “Debug”.
  • Click “Scrape Again” if the preview is still outdated or missing.
  • LinkedIn: Use the LinkedIn Post Inspector.
  • Submit your URL and check if the correct title, description, and image appear.

4. Check Hosting and Asset URLs

  • Make sure your Open Graph image URL is publicly accessible (no 404s or webflow.io links if your site uses a custom domain).
  • Avoid images hosted on third-party services unless they allow hotlinking.

5. Avoid Lazy Loading Open Graph Images

  • Don’t set the OG image as a lazy-loaded asset (loading="lazy"), as it's for HTML images only—OG images must come from meta tags, not from page content.

Summary

Set proper Open Graph metadata in Webflow’s settings, republish your site, and use social media tools like Facebook Debugger and LinkedIn Inspector to clear cached previews and verify the metadata loads.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make this code work on my Webflow page? I've tried adding it to the footer in project settings, the specific page's footer, and an embedded code element, but it's not showing on the published site.
Is there a way to animate the opening of the dropdown menu in Webflow to make it smoother and less abrupt?
Can Webflow integrate with a hotel booking calendar plugin or use custom codes for that purpose?
Can I use pointer-events: none; to enable clicking on a Slider button that is underneath a transparent div in Webflow?
Is anyone experiencing issues with their Robots.txt file in Webflow? I'm having trouble uploading the sitemap to Google and testing the site for rich results on Google due to the site being blocked by the robots.txt file. I've tried editing the robots.txt file and deleting text from the SEO tab, but neither solution has worked. Even manually indexing each URL on Google's sitemap app doesn't resolve the issue. Any suggestions?
Is it possible to integrate images into a text in Webflow like in the provided capture? How can I achieve this?
What is preventing the "Current" text from changing color on the mobile version of my Webflow site when clicked?
How can I add tooltips to elements in Webflow without leaving the Designer interface?
Can someone help with a solution for forwarding contact form submissions to an expert's email on their profile page in Webflow?
How can I quickly duplicate a prepopulated CMS Collection Page in Webflow and easily modify its contents without manually copying and pasting fields or using the bulk import function?
Can I use Webflow with a CMS and a limited builder on my site? Is there a way to embed a Webflow page using an iframe generator?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?
How can I nest additional pages under a parent page in Webflow without using a CMS collection and ensure that the visible HTML page uses the same slug that has already been assigned to the folder method?
Can images (including gifs) be added to a Webflow website from a URL instead of uploading them, to avoid the problem of uploading images larger than 4MB?
What could be causing glitches in the Designer and live site of a specific Webflow project, specifically when using the CMS section, while other projects in the same account are not affected?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?