Webflow sync, pageviews & more.
NEW

How can I update the thumbnail that appears when sharing my Webflow site link on SMS or social media messengers to be a thumbnail of my site?

TL;DR
  • Open the Webflow Page Settings and update the Open Graph image, title, and description under SEO Settings.
  • Publish your site and optionally clear cached previews using tools like Facebook’s Sharing Debugger or LinkedIn’s Post Inspector.

To update the thumbnail preview (Open Graph image) for your Webflow site when it's shared via SMS or social media, you need to modify your site's SEO and Open Graph Settings.

1. Open the Webflow Page Settings

  • Go to your Webflow project and open the Pages tab (in the left-side panel).
  • Hover over the page you want to edit (usually the homepage) and click the settings gear icon.

2. Set the Open Graph Image

  • Scroll down to the SEO Settings section.
  • Toggle open the Open Graph Settings.
  • Upload an image in the "Image URL" field — this is the thumbnail that platforms will use.
  • Recommended image size: 1200 x 630 px.
  • Add a Title and Description — these also appear in previews.

3. Use the Same Image for All Pages (Optional)

  • If you want the same thumbnail for multiple or all pages, you’ll need to repeat this process for each page or use a CMS field to automate it.

4. Publish Your Site

  • Click Publish in the top right and select the correct domain(s).
  • Changes won't reflect until the site is published.
  • Facebook: Use Facebook's Sharing Debugger to refresh the preview cache.
  • LinkedIn: Use LinkedIn’s Post Inspector.
  • Twitter/X: Use Twitter’s Card Validator.
  • Some SMS platforms, like iMessage, use similar caching systems that may take time to refresh, or respond differently based on device and OS.

Summary

To change the thumbnail for your Webflow site link, update the Open Graph Settings in the Page Settings by uploading a preview image, then publish your site and optionally clear preview caches. This ensures platforms like Facebook, Twitter, and LinkedIn display the correct thumbnail when your link is shared.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What is causing the form submission error in Webflow?
How can I set up subscriptions and release a steady amount on a Webflow website for a subscription box business?
What is the best solution in Webflow for allowing applicants to upload a video file larger than the 10MB limit for single-file uploads?
When will Webflow allow for separating interactions from the element they are applied to?
Can Webflow automatically send the details of a form submission, including the contact information and service requested, to my client?
How can I exclude specific pages in Webflow from appearing in our sitemap and analytics, such as auto-generated certificates given to visitors who completed a basic training on our website?
Can Webflow be used to create blogs as a part of a website? If so, what is the process for building a blog into a Webflow site?
How can I enable user account creation and interaction on my Webflow website without using Firebase integration?
Who is eligible for the free Webflow program for students and educators, and what are the specific plans available?
How can I prevent horizontal scroll bars and white space from appearing on a webpage longer than the vertical height when using 100vw in Webflow?
How can I fix an issue where the menu is not present on my Webflow site when published, even though it works fine in preview mode? I've tried rebuilding the interactions, removing custom code, and rebuilding the menu, but nothing seems to work. Can you please help me?
Can anyone provide recommendations and guidance on setting up and testing a reverse proxy with Amazon Cloudfront for a Webflow project, specifically when the client is not on the Enterprise plan?
Is it possible to get an authentic answer about how to eliminate render blocking resources for Google Page Speed in Webflow? Thank you in advance.
Is it possible to duplicate a scroll interaction on a navbar/logo from one page to another in Webflow?
How can I create a scaled-down version of my desktop website for all breakpoints in Webflow until I can optimize it for mobile?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?