How can I change the open graph image displayed when sharing my Webflow website via chat or social media?
TL;DR
- Set the Open Graph image in Page Settings or Project Settings > SEO in Webflow.
- Publish your site to update changes.
- Clear social media caches using Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector.
To change the Open Graph (OG) image displayed when sharing your Webflow website, follow these steps:
1. Set the Open Graph Image in Webflow
- Go to Webflow Designer and open your project.
- Click on the Page Settings (⚙️ icon) for the specific page where you want to set the OG image.
- Scroll down to Open Graph Settings and click Upload Image.
- Ensure your image is at least 1200 x 630 pixels for optimal display.
- If you want the same OG image for all pages, set it in Project Settings > SEO.
2. Publish Your Website
- Click Publish in the top-right corner and publish your site to the appropriate domain(s).
- This ensures that the updated OG image is live.
3. Clear Open Graph Cache on Social Platforms
- Facebook & Messenger: Use the Facebook Sharing Debugger to fetch the latest OG data. Click Scrape Again.
- Twitter (X): Use the Twitter Card Validator and enter your URL.
- LinkedIn: Use LinkedIn Post Inspector and click Inspect.
Summary
Upload your Open Graph image in Page Settings or Project SEO settings, publish your site, and clear social media caches to update the preview image when sharing links.