How to add Open Graph settings in Webflow?

Open Graph (OG) tags control how your pages appear when shared on social media platforms like Facebook, LinkedIn, X (Twitter), and messaging apps. Without OG tags, social platforms guess what to display — often picking the wrong image, title, or description. Webflow lets you set Open Graph settings per page.

For static pages

1. Open the Pages panel in the Designer.
2. Click the gear icon next to the page.
3. Scroll to the Open Graph Settings section (below SEO Settings).
4. Configure the following fields:

• Title — The headline shown in the social card. If left blank, Webflow uses the meta title.

• Description — The summary text. If left blank, Webflow uses the meta description.

• Image — The image displayed in the social card preview. Recommended size: 1200x630px for standard OG cards.

1. Publish the site.

For CMS template pages

1. Go to the CMS tab and open the Collection.
2. Click Template to edit the template.
3. Click the gear icon for the template in the Pages panel.
4. Scroll to Open Graph Settings.
5. Use + Add Field to insert dynamic CMS values for title, description, and image.

For example, a blog template might bind:

• OG Title → {Name}

• OG Description → {Excerpt}

• OG Image → {Featured Image}

This ensures each CMS item has its own social card when shared.

Twitter Card settings

Webflow also supports Twitter-specific card tags in the same section. You can set:

• Twitter Card Type — Choose Summary (small image) or Summary with Large Image (full-width image). The large image option is usually better for blog posts and landing pages.

If you leave Twitter-specific fields blank, Twitter falls back to the Open Graph values, which works fine in most cases.

Image requirements

• Size: 1200x630px is the standard for large image cards.

• Format: JPG or PNG. Avoid GIF and SVG for OG images.

• File size: Keep under 1 MB for fast loading in previews.

• Text overlay: If you include text on the image, make sure it is readable at small sizes.

Testing your OG tags

After publishing, use these tools to verify your social cards:

• Facebook Sharing Debugger (developers.facebook.com/tools/debug/) — Shows how Facebook renders your card and clears cached previews.

• Twitter Card Validator (cards-dev.twitter.com/validator) — Previews the Twitter card.

• LinkedIn Post Inspector (linkedin.com/post-inspector/) — Checks LinkedIn rendering.

If the preview still shows old data, use the debug tool to force a re-scrape. These platforms cache OG data aggressively.

Common issues

Wrong image showing — The OG image field is empty, and the platform is picking up a random image from the page. Always set an explicit OG image.

Changes not reflected — Social platforms cache OG tags. Use the debug tools above to force a refresh after updating.

CMS items missing OG data — The template likely uses static OG values instead of dynamic fields. Edit the template and bind OG fields to CMS data.