OG Preview Tool

Guides › Frameworks & CMS

How to add Open Graph tags in Webflow

In the Designer, open Pages, hover the page, click the settings gear, and scroll to Open Graph Settings. Set the title, description and Open Graph image URL (upload the image to Assets and copy its URL), or tick "Same as SEO".

CMS collection pages

On the collection template page, bind the Open Graph title, description and image to CMS fields (such as the post title, summary and main image), so every item gets its own preview.

Pitfall

Webflow's default OG image is blank. Pages without one share as text-only cards, so set an image on every static page.

Verify

Deploy, then run the live URL through the OG previewer. It fetches the page like a social crawler (no JavaScript), so tags added only on the client side won't show up. That matches what Facebook, LinkedIn and X see.

Preview your link now

Related

How to add Open Graph tags in Next.jsHow to add Open Graph tags in NuxtHow to add Open Graph tags in AstroHow to add Open Graph tags in WordPressHow to add Open Graph tags in ShopifyHow to add Open Graph tags in Hugo

More free tools from Swift Labs

Robots & Sitemap Checker
Validate robots.txt and XML sitemaps, test any path, see which AI crawlers you block.
Email DNS Check
Check SPF, DKIM, DMARC and MX records in seconds.
DeadLinkPatrol
Find broken links across your whole site.