Setting Open Graph tags in Webflow

Webflow has Open Graph neatly built in — no code required. The settings live per page in the Page Settings, and CMS pages can bind fields. The most common mistake: filling in the image URL incorrectly.

Want to see how your page looks right now?

The free checker shows your previews for nine platforms — from X and WhatsApp to iMessage, Discord and Bluesky.

Check your URL

Open the Page Settings

In the Pages panel, click the gear next to a page and scroll to the Open Graph Settings section.

Title and description

You can let the Open Graph title and description mirror your SEO title/description (checkbox), or set them separately if you want something punchier on social than in Google.

The image: a full URL

The Open Graph Image field expects a full URL. Upload your image (1200×630) to Assets first, click the gear on the asset, copy the URL and paste it into the field.

CMS Collection pages: use fields

In Collection page settings you can fill the Open Graph fields from collection fields (e.g. a "Social image" field per blog post). Every CMS item automatically gets its own preview.

Publish and test

Changes only go live after publishing. Then paste your URL into the MetaPeek checker to see the result on every platform.

Common mistakes

Frequently asked questions

Does Webflow add twitter:card itself?

Webflow generates the common social tags from your Open Graph settings. Check with MetaPeek whether X shows the large card; if not, add twitter:card via the page's custom code (head).

Can I use a different preview image per page?

Yes — the Open Graph Settings are per page, and on CMS pages per item via fields.

Changed your tags? Verify the result.

Paste your URL and see within two seconds whether everything is right — on every platform.

Open the checker

Related guides

Deze gids in het Nederlands →