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

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.