How to Add JSON-LD Schema Markup to Webflow CMS Collection Pages

Webflow's SEO tab gives you title, meta description, and Open Graph fields. That's it. There's no structured data panel, no schema toggle, and no built-in way to output BlogPosting or Article JSON-LD on your collection pages. If you want rich results — article bylines, FAQ dropdowns, breadcrumbs — you have to add the schema yourself.

The good news: Webflow's Embed block lets you inject raw HTML into any page, including collection page templates. You can reference CMS field values inside that HTML using Webflow's {{wf ...}} dynamic bindings. That combination is everything you need.

This guide walks through the full process for BlogPosting schema on a blog collection. The same approach works for Product, FAQPage, or any other schema type.

Why Webflow's SEO tab isn't enough

The fields Webflow exposes in the SEO panel (og:title, og:description, og:image, and the canonical URL) are meta tags, not structured data. Google reads them, but they don't unlock rich results. Rich results require schema markup — specifically <script type="application/ld+json"> blocks with the correct properties.

Webflow doesn't generate these automatically, and there's no third-party app in the Webflow marketplace that reliably handles dynamic CMS collection pages without introducing its own limitations. The embed approach described here is what most experienced Webflow developers use because it gives you complete control over the output.

Step 1: Set up your CMS collection fields

Before writing any JSON-LD, make sure your CMS collection has the fields you need. For BlogPosting schema, you'll want at minimum:

Title (Text) — maps to headline
Author (Reference to a Staff/Author collection, or a plain Text field) — maps to author.name
Published date (Date) — maps to datePublished
Featured image (Image) — maps to image
Slug (auto-generated by Webflow) — used to build the canonical URL

Optional but recommended: a short description field for description, and a category/tag field for articleSection.

If you're using a Reference field for authors, you can pull the author name from the referenced item using nested {{wf ...}} bindings.

Step 2: Add an Embed block to your collection page template

Open your CMS collection page template in the Webflow designer (not a specific collection item — the template that all items share). Add an Embed element. You can place it anywhere in the layout — most developers drop it at the very top of the page body or inside the <head> using a custom code section.

Step 3: Write the JSON-LD with CMS field bindings

Click the Embed block and open the editor. Paste the following template, then use the "Add Field" button (or type {{ manually) to bind each value to your CMS fields.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{wf {"path":"name","type":"PlainText"} }}",
  "description": "{{wf {"path":"post-summary","type":"PlainText"} }}",
  "image": "{{wf {"path":"featured-image","type":"ImageRef"} }}",
  "author": {
    "@type": "Person",
    "name": "{{wf {"path":"author-name","type":"PlainText"} }}"
  },
  "datePublished": "{{wf {"path":"published-date","type":"Date","format":"YYYY-MM-DD"} }}",
  "dateModified": "{{wf {"path":"updated-date","type":"Date","format":"YYYY-MM-DD"} }}",
  "publisher": {
    "@type": "Organization",
    "name": "Your Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/logo.png"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://yoursite.com/blog/{{wf {"path":"slug","type":"PlainText"} }}"
  }
}
</script>

Replace the field path values ("post-summary", "author-name", etc.) with the actual field slugs from your CMS collection. You can find the field slug in your Collection settings under each field's name.

Step 4: Handle the author reference field

If your author is a Reference field pointing to a separate Author collection, the binding syntax changes slightly. Webflow supports nested field access for Reference fields:

"author": {
  "@type": "Person",
  "name": "{{wf {"path":"author > name","type":"PlainText"} }}",
  "url": "https://yoursite.com/authors/{{wf {"path":"author > slug","type":"PlainText"} }}"
}

The > operator tells Webflow to follow the reference and pull a field from the referenced item. This works in Embed blocks on collection pages bound to collections that include the reference.

Step 5: Set the date format correctly

Google requires dates in ISO 8601 format (YYYY-MM-DD or full datetime YYYY-MM-DDTHH:MM:SSZ). Webflow's Date field outputs whatever format you specify in the format key of the binding. Always use "format":"YYYY-MM-DD" for schema dates.

"datePublished": "{{wf {"path":"published-date","type":"Date","format":"YYYY-MM-DD"} }}"

If you omit the format key, Webflow outputs a human-readable date string like "May 23, 2026" — which Google's parser will reject.

Step 6: Handle quote escaping in CMS text fields

This is the most common Webflow schema pitfall. If any of your CMS text fields contain double quotes (e.g., an article title like The "Best" Tools for SEO), those quotes will break the JSON inside your Embed block and produce malformed schema.

Webflow doesn't automatically escape field values for JSON context. Your options:

Train your content team to avoid double quotes in titles and descriptions, using single quotes or em dashes instead.
Use a separate "Schema Headline" field that your editors fill in without special characters — a clean, quote-free version of the title used only for schema output.

Option 2 is safer for sites with multiple contributors. It's a small overhead but eliminates an entire class of validation errors.

Step 7: Validate the output

Publish your Webflow site, then open a published collection item URL. View the page source and confirm the <script type="application/ld+json"> block appears with your CMS values filled in (not the raw {{wf ...}} template syntax).

Then run the URL through the Google Rich Results Test. It will show you which rich results your page is eligible for and flag any missing required fields.

You can also use RankCrab's schema generator to build a reference example of a valid BlogPosting block before you start — helpful for double-checking your field bindings against a known-good output.

Free tool

Schema markup generator

Generate valid JSON-LD in 60 seconds — no signup.

Try it

Common Webflow schema issues

Schema appears on homepage instead of collection pages — You added the Embed to the wrong place. Make sure you're editing the Collection Page template, not the static Blog index page or the homepage.

CMS fields show raw {{wf ...}} text in page source — The Embed was added to a static page, not a collection template, so Webflow has no item context to resolve the bindings.

datePublished output is wrong format — Missing or incorrect format key. Add "format":"YYYY-MM-DD" to the Date binding.

Rich Results Test shows "missing field: image" — Your featured-image field is empty on that collection item. The field binding resolves to an empty string, which fails validation. Make sure all collection items have a featured image, or add a fallback URL.

Once your Webflow schema is validated, the same principles apply if you're building on other platforms. See how to add schema markup to a Next.js App Router site for a typed TypeScript approach, or how to add BlogPosting schema to a Shopify blog article if you're running a hybrid setup.

For a full overview of schema types and validation, start with the schema markup guide. If your Rich Results Test is throwing errors after implementation, the validation errors guide covers the most common failures.