Webflow sync, pageviews & more.
NEW

How do I adjust the zoomed-in Facebook icon when sharing my Webflow site?

TL;DR
  • Upload a 1200x630 px Open Graph image in Webflow's SEO settings to ensure correct display.
  • Use Facebook’s Sharing Debugger to clear the cache and update the shared image preview.

When your Webflow site is shared on Facebook and the icon appears zoomed-in or cropped, it typically means the wrong image size or markup is used for the Open Graph (OG) image. Here's how to fix it:

1. Use the Correct Image Dimensions

  • Facebook prefers OG images to be at least 1200 x 630 pixels (aspect ratio 1.91:1).
  • If the image is square or has incorrect proportions, Facebook may auto-crop or zoom it.
  • Avoid small images—Facebook may not display them properly, especially on high-resolution screens.

2. Set Your OG Image in Webflow

  • Go to Project Settings in Webflow.
  • Select the SEO tab.
  • Scroll to Open Graph Settings.
  • Upload a custom image with optimal dimensions (preferably 1200x630 px).
  • Save and Publish your site.

3. Override OG Image Per Page (Optional)

  • In the Webflow Designer, go to the Pages panel.
  • Select a page, then go to Page Settings (gear icon).
  • Under Open Graph Settings, upload a custom image specific to that page.
  • This allows you to fine-tune the share image per page.

4. Clear the Facebook Cache

  • Even after updates, Facebook may still pull the old image from cache.
  • Use the Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
  • Paste your URL and click “Debug”, then click “Scrape Again”.
  • This forces Facebook to update its cache and fetch your new OG image.

5. Test the Share Appearance

  • After updating and scraping, test by pasting your URL into a Facebook post to preview the updated card.
  • Ensure the image shows correctly without being zoomed or cropped.

Summary

To prevent Facebook from zooming in on your Webflow site’s share icon, upload a 1200x630 px OG image in your Project SEO settings, and use the Facebook Debugger to refresh the preview. This ensures your shared link displays correctly on Facebook.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there a simple code that allows slider heights in Webflow to automatically adjust based on the height of the content within them, even for CMS pages? It would be greatly appreciated as it is preventing the launch of my site. Thank you!
How can I fix the issue with my grid layout sticking out on the right side of the page on tablet breakpoint in Webflow?
How can I resolve the issue in Webflow where a CMS item in a filtered collection list becomes skinny when there is only one result, while using Jetboost for filtering?
Why does one Vimeo video not display in the Webflow preview, even though it is set to public and embeddable, while other Vimeo videos work fine and can be embedded using the HTML Embed widget?
How do I make the buttons in the Webflow side menu extend all the way while maintaining the blue line on the far right border when hovered and selected?
How can I create a smooth scroll Back to Top Button in Webflow for long pages or for when I want to add a modern feature that only appears once the visitor has scrolled down a bit? Can you provide an example?
How can I hide the video controls for a Vimeo video on my Webflow site?
What are some third party tools or integrations that can be used with Webflow?
How can I calculate a value from a number in a Webflow CMS collection, divide it by a fixed number, and use the resulting percentage as the width of a div for each item in the collection? Is there a way to do this without using CSS calc() or jQuery?
Is there a way to update Webflow CMS content items when a record in Airtable changes?
What is happening with Webflow? Has it lost its magic and stability over the years?
How can I put text within a text block in Webflow without accidentally clicking on background elements like sections or divs?
How can I fix the issue of all the blog posts on my Webflow site having the same publication date? Here is the public share link for reference.
How can I clear the server cache in Webflow after migrating my site?
Is it possible to create a multilingual website structure with subdirectories in Webflow while maintaining a relational database perspective and using country-specific CMS that references the main English CMS?
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?