Debugging Open Graph and Twitter cards when previews look wrong in Webflow
Why the site looks fine but the preview lies
Social apps cache Open Graph and Twitter card metadata aggressively. You can fix tags in Webflow, publish, and still see yesterday’s title in Slack or iMessage because the fetcher has not refetched. Separately, your page might output duplicate tags—one set from SEO settings, another from custom code—leaving parsers to pick unpredictably.
Start every debugging session by identifying which URL the preview tool fetched (with or without www, with or without trailing slash) and whether redirects chain cleanly.
Image dimensions and aspect ratio
Many platforms crop or letterbox previews. Extremely wide or tiny images look blurry or oddly framed. Provide a safe focal point in the art and test with real share debuggers rather than guessing from the Designer canvas alone.
Title and description length
Truncation is not failure, but misleading truncation is. Front-load meaning in the first ~50 characters of titles where platforms clip aggressively.
Cache invalidation tools
Use official card validators and refetch buttons where available. Document for clients that previews may lag hours after launch—set expectations before they panic about “broken social.”
Social Share for Webflow-native buttons and metadata hygiene
FlowAppz Social Share helps teams ship on-brand share controls while keeping performance and metadata work inside a Webflow-friendly workflow.
See Social Share for implementation patterns.
A practical debug order
- View source on the exact canonical URL; count duplicate
og:tags. - Confirm
og:urlmatches the canonical you want indexed. - Validate image absolute URL resolves publicly without auth cookies.
- Refetch in validator tools; retry after TTL if stubborn caches remain.
Previews are a distributed system. Treat debugging like one.
