Why are Facebook and Twitter not picking up the correct image from the specified link on the Webflow SEO page? Is there an issue with the integration or am I missing something?
TL;DR
- Ensure Open Graph and Twitter Card images are set correctly in Webflow SEO settings using absolute URLs with proper dimensions and formats.
- Use page-specific image overrides when needed, confirm meta tags render correctly on the live site, and validate previews with Facebook Sharing Debugger and Twitter Card Validator.
- If issues persist, add or fix meta tags manually using custom code in Webflow settings.
If Facebook and Twitter are not displaying the correct image from your Webflow SEO settings, the issue likely stems from how metadata is configured or how the platforms cache link previews.
1. Check Open Graph and Twitter Card Settings in Webflow
- Go to Project Settings > SEO in Webflow.
- Ensure a valid Open Graph image is set either globally or per page.
- The image URL must be absolute, not relative (e.g., starts with
https://). - Recommended dimensions: 1200x630 pixels and under 5MB.
- Use proper file formats like
.jpg,.png, or.webp.
2. Use Page-Specific Overrides
- In the Webflow Designer, go to the specific page.
- Open Page Settings and scroll to the SEO Settings section.
- Set a Page Title, Meta Description, and Open Graph image if you want to override global settings.
- Ensure the image is hosted on Webflow or a reliable CDN and is publicly accessible.
3. Validate with Debugging Tools
- For Facebook, use the Sharing Debugger: developers.facebook.com/tools/debug.
- Enter your URL and click "Debug".
- Check what Facebook's scraper sees, and click Scrape Again to refresh the cache.
- For Twitter, use the Card Validator: cards-dev.twitter.com/validator.
- Enter the URL and preview how it's rendered.
4. Confirm Meta Tags Are Rendered Correctly
- After publishing, view source on the live site.
- Confirm that the correct og:image and twitter:image meta tags are rendered.
- Example:
<meta property="og:image" content="https://yourdomain.com/img.jpg"> - If tags are missing or incorrect, Webflow might not have re-published your latest changes.
5. Use Custom Code if Needed
- If Webflow's built-in SEO tools aren't adding the correct tags:
- Go to Page Settings > Custom Code or Project Settings > Custom Code.
- Manually insert Open Graph (
og:*) and Twitter Card<meta>tags. - Ensure no conflicting tags exist.
Summary
Make sure your Open Graph and Twitter card meta tags are correctly set, and use debug tools to verify what’s being scraped. Double-check that your image is publicly accessible and properly formatted. If issues persist, use manual <meta> tags via Webflow’s custom code settings.