Webflow sync, pageviews & more.
NEW

How can I add an image when sharing my website on platforms like Messenger?

TL;DR
  • Set an Open Graph image in Webflow's SEO settings and enable it site-wide.
  • Optionally customize OG settings per page and publish your site.
  • Use Facebook's Sharing Debugger to update and verify the preview image.

When sharing your Webflow site on platforms like Messenger, Facebook, or LinkedIn, the preview image is determined by Open Graph (OG) meta tags. To control the image that appears when sharing, you need to set a custom Open Graph image in your Webflow project.

1. Set a Social Share Image in Webflow

  • Go to Project Settings of your Webflow site.
  • Navigate to the SEO tab.
  • Scroll down to the Open Graph Settings section.
  • Upload an image under Open Graph Image URL.
  • Recommended size: at least 1200 × 630 px.
  • Format: JPG or PNG.
  • Optionally, set a Title and Description to control the preview text.

2. Update Site-Wide Meta Tags

  • Ensure the checkbox Use Open Graph Settings On All Pages is enabled.
  • This automatically applies the OG image and content to all pages unless individually overridden.

3. Set OG Settings for a Specific Page (Optional)

  • Open the page in the Webflow Designer.
  • Go to Page Settings (click the gear icon next to the page name).
  • Under Open Graph Settings, upload a different image for that specific page if needed.

4. Publish Your Site

  • After updating the OG settings, publish your site to make the changes live.

5. Debug with Facebook Sharing Debugger

  • Go to the Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
  • Enter your site URL and click Debug.
  • Click Scrape Again if your old image still appears.
  • This forces Facebook and Messenger to fetch the latest OG settings.

Summary

To control the image shown when sharing your Webflow site on Messenger or social media, upload an Open Graph image in your site's SEO settings and publish. Use Facebook's debugger tool to refresh link previews.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is the bodymovin plugin compatible with the latest version of After Effects (AE 2020 17.5.0 build 40) as mentioned on the Webflow plugin page?
How can I remove the "test mode" box that appears on my Webflow published site?
Has there been an update or change of keys in Webflow to move a heading and image into the same grid box using the Ctrl + drag on Windows method mentioned in the Cards video of the Webflow 101 course?
How can I add hreflangs to specific CMS blog pages in Webflow without creating issues with multiple head tags?
Can PHP code be added directly in the embed component in Webflow to make a form fully functional in a Webflow hosted environment, or is it still necessary to export and add PHP code?
Is it possible to override background color in a Webflow symbol?
What settings should I update in Webflow to fix the buttons on my home page that are not leading to the correct pages within my domain? Thank you for your help!
How can I link my logo to the homepage on Webflow?
Is there a quick and easy way to apply a new navbar to all pages in Webflow without having to build it from scratch on each page?
Why do I keep getting a "must be a valid video URL" error when entering video links from YouTube or Vimeo into the video link field of my CMS in Webflow? I've tried suggestions from previous closed tickets but the error persists. Even video links that work fine on the sample pages fail when entered into my CMS. The error appears as soon as I enter any text in the field. Any insights on how to resolve this issue?
Is it possible to do integration work on the staging domain before it goes into production in Webflow?
How can I use a jQuery-based databinding utility library to bind a CMS Collection to a Webflow Select form control in Webflow?
What are some third party tools or integrations that can be used with Webflow?
How can I capture and display messages returned from a custom action URL or API endpoint in Webflow? Specifically, I am integrating Stripe donations and need to show a different message for successful charges and failed charges. Can I submit the form to a different page for processing and then redirect the user to a success or error page based on the outcome?
How can I create pagination for a list of 2000 items in Webflow?
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?