Webflow Meta Tags and Open Graph: The Complete Setup
Webflow's SEO tab covers title and description. For OG, Twitter, and JSON-LD you need Custom Code. Here's the full pattern.
Webflow's built-in SEO controls are limited to <title> and <meta name="description">. That covers the basics for search results. It doesn't cover how your pages look when shared on social — no Open Graph title, no preview image, no Twitter card. Those require Custom Code.
This guide covers everything: where Webflow's native controls live, the complete OG/Twitter snippet, how to bind it to CMS fields, and the gotchas specific to Webflow's CDN.
What Webflow Handles Natively
Page Settings → SEO tab is where Webflow's built-in meta tag controls live. You access it via the gear icon in the top right of the Designer while viewing a page. For CMS collection templates, the same panel appears when you're viewing the collection template.
The SEO tab covers:
- Title tag — bound to a CMS field via the field picker, or typed as static text
- Meta description — same binding options
- Canonical URL — Webflow sets this automatically to the current page URL; you can override it
- "Exclude from search results" — adds
<meta name="robots" content="noindex">when checked
That's it. Anything beyond these four things goes in Custom Code.
Where Custom Code Goes
Webflow has two Custom Code locations that matter for meta tags:
1. Site Settings → Custom Code → In <head> tag
This runs on every page of your site. Use it for site-wide tags: your Google Analytics script, any global OG site name tag, or a default Twitter card meta tag.
2. Page Settings → Custom Code → Inside <head> tag
This runs on that specific page (or on every page in a CMS collection template). Use it for page-specific OG tags, structured data, and anything that references CMS fields via field tokens.
The Complete OG + Twitter Snippet for Blog Posts
Add this to your CMS collection template's Page Settings → Custom Code → Inside <head> tag. Replace the field token paths with the actual field names from your collection (click "Add Field" in the Webflow embed editor to generate the correct token syntax).
<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:title" content="{{wf{"path":"seo-title","type":"PlainText"}}}">
<meta property="og:description" content="{{wf{"path":"seo-description","type":"PlainText"}}}">
<meta property="og:image" content="https:{{wf{"path":"main-image","type":"ImageRef"}}}">
<meta property="og:url" content="https://yourdomain.com/blog/{{wf{"path":"slug","type":"PlainText"}}}">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{wf{"path":"seo-title","type":"PlainText"}}}">
<meta name="twitter:description" content="{{wf{"path":"seo-description","type":"PlainText"}}}">
<meta name="twitter:image" content="https:{{wf{"path":"main-image","type":"ImageRef"}}}">
Notice https: prepended before the image field token on lines 5 and 13. This is the Webflow CDN gotcha — explained below.
The og:image Gotcha
Webflow's CDN serves images from assets.website-files.com (or a custom domain if you've configured one). When you use an ImageRef field token, Webflow renders the CDN URL — but it renders it as a protocol-relative URL starting with //:
//assets.website-files.com/abc123/images/hero.jpg
Protocol-relative URLs work fine in browser contexts where the page is already loaded over HTTPS. They don't work reliably when a social crawler like Facebook's or Slack's link unfurl system makes a standalone HTTP request for the URL. Some crawlers treat // as an incomplete URL and fail to fetch the image, which means your social previews show a blank image.
The fix is to prepend https: as a static string before the token:
<meta property="og:image" content="https:{{wf{"path":"main-image","type":"ImageRef"}}}">
This produces https://assets.website-files.com/... — a complete, absolute URL that every crawler handles correctly.
Handling the Fallback Case
Field tokens render as empty strings when the CMS field is empty. If your seo-title field is blank for some collection items, your og:title meta tag will be content="". That's worse than not having the tag at all.
Two options:
Option 1: Make the SEO fields required in your collection.
In Webflow's CMS Collection settings, mark SEO Title and SEO Description as required fields. This prevents publishing an item without them. It's the simplest solution.
Option 2: Use the Name field as a fallback.
In your meta title field, use the Name field token if you don't have a separate SEO Title field. The collection Name is always populated — it's required by Webflow to create an item.
For the meta description, there's no programmatic fallback in Webflow's Custom Code. If the field can be empty, enforce it at the content-entry level.
Static Pages: OG Tags Without CMS
For non-CMS pages (your homepage, about page, contact page), OG tags go in Page Settings → Custom Code → Inside <head> as static HTML. No field tokens — just write the values directly:
<meta property="og:type" content="website">
<meta property="og:title" content="Your Homepage Title">
<meta property="og:description" content="Your homepage description.">
<meta property="og:image" content="https://yourdomain.com/images/homepage-og.jpg">
<meta property="og:url" content="https://yourdomain.com/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/images/homepage-og.jpg">
Use absolute URLs for og:image on static pages. The recommended OG image size is 1200×630px.
og:type for Different Page Types
The og:type value tells social platforms what kind of content the page contains. Use the right type for each page:
| Page Type | og:type |
|---|---|
| Homepage, about, landing pages | website |
| Blog posts, articles | article |
| Product pages | product |
| Videos | video.other |
For article type, you can also add additional Open Graph article tags:
<meta property="article:published_time" content="{{wf{"path":"published-on","type":"PlainText"}}}">
<meta property="article:author" content="{{wf{"path":"author.name","type":"PlainText"}}}">
These are optional but improve how Facebook and LinkedIn display article content.
Verifying Your Tags
After publishing, view your page source and search for og:title. Confirm:
- The tag is present
- The content value is populated (not empty)
- The
og:imageURL starts withhttps://
Then test in Facebook's Sharing Debugger and Twitter's Card Validator. First-time visits to a URL require the debugger to "scrape" the page. The debuggers also cache results — if you're seeing old data, click "Scrape Again" or "Fetch New Card."
For the full CMS SEO setup including binding other page-level fields, see Webflow CMS on-page SEO. The SEO for Webflow guide covers the rest of the Webflow SEO picture.