Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Configure Open Graph settings in Webflow's Project Settings and individual page settings with a title, description, and image.
  • Republish the site and use Facebook and LinkedIn debug tools to verify and refresh preview data.
  • Ensure OG images are publicly accessible, properly formatted, and not restricted or overwritten by custom code.

If your Webflow site preview appears empty when shared on platforms like Facebook or LinkedIn, it's likely due to missing or incorrect Open Graph (OG) tags. These tags determine what content displays in social previews.

1. Enable Open Graph Settings in Webflow

  • Go to Project Settings > SEO tab.
  • Scroll to Open Graph Settings.
  • Add a title, description, and upload an Open Graph image (recommended: 1200x630 px, under 5MB).
  • Webflow uses these to generate the correct meta tags.

2. Set Unique OG Content for Individual Pages

  • Open each page in the Webflow Designer.
  • Click the Page Settings (gear icon).
  • Scroll to the Open Graph Settings section.
  • Add a specific title, description, and image if you want different social previews per page.
  • If these fields are left blank, Webflow defaults to the site-wide OG content set in Project Settings.

3. Republish Your Website

  • After adding or editing Open Graph settings, republish your site to ensure changes take effect.
  • Click Publish in the top-right corner of the Designer or Dashboard.

4. Verify Using Sharing Debuggers

5. Ensure OG Image is Accessible

  • Ensure your OG image is:
  • Published properly (not a CMS asset with restricted access).
  • Not behind a login or on a staging domain.
  • Uses a valid image format like .jpg or .png.

6. Avoid Custom Code Conflicts

  • If you're using custom code in your head tag or via third-party integrations, verify that it doesn't overwrite Webflow’s OG tags.
  • Improperly formatted OG meta tags can cause the preview to break.

Summary

To fix empty social previews in Webflow, configure Open Graph settings in both Project Settings and individual pages, republish the site, and use Facebook/LinkedIn debug tools to verify. Ensure your OG image is public and correctly formatted.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What is the recommended method for hosting an open graph image in Webflow?
Why are the images on my website stretched on mobile devices after replacing the source image in Webflow?
How can I reverse the order of an image and text in Webflow so that the text appears above the image on mobile view while maintaining the original order on desktop view?
Can I limit the width of a row in Webflow flexbox so that additional divs move to a second row?
How can I style the <select> dropdown field in Webflow so that it doesn't display white text on a white background when focused?
Where can I start to resolve an 'INP issue' with mobile views for a Webflow site flagged by Google search console?
Webflow & Javascript: How can I hide search result items with a blank page in Webflow that contain "/sku/" in the URL using Javascript?
How can I unlink a nav bar from a symbol in Webflow so that I can edit it independently on subsequent pages?
How can an active class be added to the reset button in Webflow, so that it appears the same as the radio buttons when "checked"? I'm unable to find the toggle state through the documentation.
How can I pass the schedule information of a location to a collection popup in Webflow, so that the client can update the schedule images?
How do I fix the "403 restricted error" with the "openresty" message when trying to visit a friends' site on a custom domain linked through Webflow?
How can I generate a unique HTML ID for a heading inside a collection list item in Webflow without duplicating it when new collection list items are added?
Can I add the CSS code "writing-mode: vertical-rl" to create a vertical heading in Webflow without having to rotate it 90 degrees?
Can the background color of a fixed navbar in Webflow be changed from transparent to a different color when a visitor starts scrolling?
How can I optimize my Webflow site to improve my Lighthouse score? Specifically, I need help with converting images to next-gen format, removing unused JavaScript, eliminating render-blocking resources, efficiently encoding images, reducing the number of fonts loading on page load, improving site speed with a global CDN, defining explicit heights and widths for images, and minimizing main thread work. Thank you!
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 use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
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?