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.