Webflow Open Graph Tags: How to Set Up Social Previews Correctly

Configure og:title, og:image, og:description, and Twitter card tags on Webflow pages. Covers page SEO settings, CMS collection OG fields, and platform cache refresh.

How Webflow handles OG tags

Webflow has native OG tag support built into every page's SEO settings. It generates the right <meta property="og:*"> tags automatically from your page settings, but only if you fill them in.

By default, Webflow uses your page title as og:title and leaves og:image blank — which means social platforms will either show no image or guess at one. Setting a dedicated social image takes about 2 minutes per page.

Fix: Set OG tags in Webflow page settings

  1. Open the Webflow Designer and select the page you want to configure.
  2. Click the Pages panel (top left) → click the page → click the gear icon to open Page Settings.
  3. Scroll to the Open Graph Settings section.
  4. Fill in:
    • OG:Title — your page title (up to 60 chars)
    • OG:Description — page summary (up to 155 chars)
    • OG:Image — upload or link to a 1200×630 px image
  5. Save and publish.

Dynamic OG tags for Webflow CMS

For CMS Collection pages (blog posts, products, etc.), connect OG fields to CMS data so each item gets its own correct preview:

  1. Open the Collection Settings for your CMS collection (e.g., Blog Posts).
  2. Add an Image field called "OG Image" to the collection schema.
  3. In the Collection Template page settings → Open Graph Settings, use the Connect field icon next to OG:Image to bind it to the "OG Image" CMS field.
  4. Bind OG:Title and OG:Description to the appropriate CMS fields (Name, Summary, etc.).
  5. Re-publish the collection.

Custom meta tags via Webflow code embed

For advanced use cases (e.g., Twitter:card overrides or article-specific tags), use a Webflow Custom Code embed in the page <head>:

  1. In page settings, scroll to Custom Code.
  2. Paste your additional meta tags in the Inside <head> tag box:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta property="og:type" content="article" />

Note: Custom code in the head is available on Webflow paid plans. On the free tier, custom code is not available.

OG image requirements for Webflow

  • Upload images directly to Webflow or use an externally hosted HTTPS URL
  • Recommended size: 1200×630 px
  • Minimum: 200×200 px
  • Use JPG or PNG format for broadest platform support
  • Keep file size under 5 MB

Clear platform cache after publishing

After updating OG settings in Webflow and publishing, force each platform to re-scrape:

Check your Webflow OG tags → Paste your URL into OGFixer to preview how your link looks on Twitter, LinkedIn, Discord, and Slack before sharing.