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

TL;DR
  • Set up Open Graph Meta Tags in Webflow by logging into your account and accessing the SEO settings in Project Settings.
  • Upload an image via Open Graph Image URL, fill in the title and description fields, save changes, and publish the project.
  • Clear cached data using Facebook's Sharing Debugger to refresh link preview properties.

To add an image when sharing your website on platforms like Messenger, you need to set up the Open Graph Meta Tags within your Webflow project. These tags determine how your site will appear when shared on social media platforms. 

​

1. Access Project Settings

  • Log in to your Webflow account.
  • Open the project you wish to edit.

​

2. Go to SEO Settings

  • Navigate to the Project Settings dashboard.
  • Click on the SEO tab.

​

3. Add Open Graph Image

  • Scroll to find the Open Graph Image URL field.
  • Upload an image that you want to appear when your site is shared. Make sure this image is hosted online, often best uploaded through Webflow's Asset Manager.

​

4. Define Default Open Graph Tags

  • Ensure the Open Graph Title and Description fields are filled. These texts accompany the image.
  • Use default settings for site-wide usage or customize them using the SEO & Open Graph Settings for individual pages within the Designer.

​

5. Update and Publish

  • Save your changes within Project Settings.
  • Publish your project to ensure the meta tags are live.

​

6. Clear Platform Caches

  • Use a service like Facebook's Sharing Debugger to clear cached data of your site's link preview. Input your URL to refresh the preview properties.

​

Summary

To share an image when your website link is posted on platforms like Messenger, add an Open Graph Image in the SEO settings of your Webflow project. Ensure you fill the title and description fields, then publish your changes. Use Facebook’s Sharing Debugger to update the cached image preview.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I overlay a semi-transparent color onto the background of a section in Webflow without using an image?
Has anyone here used Webflow and can share their experience?
Can I duplicate elements and their children in Webflow for easy replication of similar content?
What are some useful third party tools or integrations for Webflow?
How can I create a script in Webflow to close modals with embedded videos when the .close-modal button is clicked?
How do I hide sections in "Display" on duplicated pages from a parent Webflow template/layout without affecting other pages?
How can Webflow help you create a simple customized online formula calculator without requiring web development or JavaScript skills?
How can I make my Webflow navbar responsive when switching to mobile landscape breakpoints?
How can I create a dropdown menu in the hero section of a Webflow website that is preselected based on the ad that brought the user there?
What is the process for connecting a Webflow project to an existing self-hosted WordPress site and publishing a page using the Webflow Pages plugin?
How can I fix the issue of my Home page not loading in Webflow after tinkering with preloaders without knowing what went wrong?
How can I resolve scrolling issues with a dropdown list in Webflow, specifically with a 13" Mac screen that cannot scroll to the bottom of the list?
How can I show a specific container, including text and an image, exclusively on mobile portrait mode in Webflow? I want to prompt users to turn their phone sideways. I couldn't find a "hide" button or similar feature mentioned in older posts or Webflow's content. Am I overlooking something? I've explored Webflow's resources, but haven't come across any solutions.
Can Webflow allow me to customize the placement and alignment of buttons in a slider, specifically positioning them on the right side while keeping the content on the left? Additionally, is it possible to prevent the arrows and navigation from overlapping with content, such as a YouTube player, so that users can use all the buttons and features without any issues?
How can I fix the import issues with DevLinkProvider in Webflow when redeploying and encountering errors related to React hooks and context?
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?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?