Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Set an OG image in Webflow’s Page Settings (1200x630 pixels recommended).
  • Enable "Use same image for Open Graph and Twitter", fill in Title Tag and Meta Description, then Save.
  • Publish your site and test the preview using Facebook's Sharing Debugger.
  • If needed, Scrape Again in the debugger or re-publish to update the preview.

When sharing your Webflow website on platforms like Messenger, Facebook, or Twitter, the preview image is controlled by Open Graph (OG) settings. You need to specify an OG image for your site to ensure the correct image appears.

1. Set the OG Image in Webflow

  • Go to Webflow Designer and open your project.
  • Click on Pages (left panel) and select the page where you want the OG image to appear.
  • Scroll to the Page Settings (⚙️ icon).
  • Under Open Graph Settings, upload your preferred OG image.
  • Ensure that the image is at least 1200x630 pixels for the best quality.

2. Add OG Metadata in Webflow

  • Make sure the "Use same image for Open Graph and Twitter" option is enabled.
  • Verify that your "Title Tag" and "Meta Description" are properly filled.
  • Click Save (bottom right).

3. Publish and Test the OG Image

  • Click Publish to update your site.
  • Use Meta’s Sharing Debugger to see how Facebook and Messenger will display the link.
  • Enter your site URL and click Debug.
  • If the old image appears, click Scrape Again to pull the latest data.

4. Clear Caches for Instant Updates

  • If the incorrect image still appears, try the following:
  • Re-publish your Webflow site.
  • Re-clear Messenger/Facebook cache using the Sharing Debugger tool.

Summary

Set an Open Graph image in Webflow’s Page Settings, publish your site, and use Facebook's Sharing Debugger to ensure the correct image appears. If needed, scrape the URL again to refresh the preview.

Rate this answer

Other Webflow Questions