Schema Flow

Webflow builds fast, accessible pages, but it does not generate structured data for every schema type your pages need to earn rich results. You can paste JSON-LD into custom code, though that breaks the moment your content changes. Once the code and the live content no longer match, Google can disable your rich snippets and flag the site for misleading content.

Schema Flow closes that gap. It runs as a no-code app installed directly from the Webflow Marketplace and generates JSON-LD structured data through form-based inputs. Map Webflow CMS collection fields to schema properties once, and the markup updates automatically each time you edit a CMS item. No manual copy-paste, no stale code conflicts.

This integration fits Webflow agencies and independent or internal site teams that want structured data without hand-writing JSON-LD. Site owners use it to make CMS-driven pages eligible for rich results without managing JSON-LD by hand.

How to integrate Schema Flow with Webflow

What is Schema Flow? Schema Flow is a no-code structured data app built specifically for Webflow sites. It generates and manages JSON-LD markup for 45+ schema types defined by schema.org. It maps Webflow CMS collection fields to schema properties and publishes the output automatically, so structured data stays current as content changes.

Teams reach for Schema Flow when a Webflow site relies on the CMS and manual schema management stops scaling. A blog with hundreds of posts or a catalog with dozens of products needs schema on every template page, and hand-editing JSON-LD for each one is not practical. Schema Flow binds schema to CMS fields once and keeps it accurate across every item.

The Schema Flow-Webflow integration supports two approaches:

• The Schema Flow app generates and publishes JSON-LD through no-code forms, with CMS field mapping and AI-assisted schema selection.
• The Webflow Data API gives developers full control over custom code injection and CMS data for building a schema pipeline from scratch, but requires server-side development.

Most implementations use the app, since Schema Flow has no public API of its own. The API path is only relevant for teams building a custom structured data pipeline.

Install the Schema Flow app

The Schema Flow app is the primary way to add structured data to a Webflow site. It handles JSON-LD generation and publishing entirely inside Webflow, so you never touch a custom code field. The app is approved by Webflow and supports additional security features. The free Starter plan covers up to 10 schemas. After that, you move to the Pro plan. There is no Webflow paid plan requirement to use Schema Flow itself.

The app covers the full schema workflow without code:

• AI scan analyzes your site and suggests which schema types to implement
• Pre-built forms cover common types such as Article and FAQPage. Product forms are available too
• Collection mapping binds Webflow CMS fields to schema properties
• Paste from clipboard turns existing JSON-LD into an editable form

To set up the integration:

1. Go to the Webflow Marketplace and search for Schema Flow, then follow the installation instructions.
2. Connect Schema Flow to your Webflow project and open the app inside the project.
3. Open the page list, click Add for the target page, then complete the schema form manually or click Prefill with AI and review.
4. Save the schema. Schema Flow creates and publishes the JSON-LD automatically.

After setup, schema persists through site transfers between accounts, so agencies handing off a project keep the structured data intact. Validate any output with validator.schema.org or Google's Rich Results Test to confirm the markup is correct.

Add schema manually with Code Embed and custom code fields

Some teams prefer to manage schema by hand rather than through the app, especially for a single static page that rarely changes. Webflow gives you several native paths to inject JSON-LD into a page. Each path accepts up to 50,000 characters and does not run server-side languages like PHP or Python. This approach works, but manual JSON-LD breaks when content changes, so reserve it for pages you do not expect to edit often.

Page settings schema markup field

Webflow includes a native Schema markup field in Page settings for basic, AI-assisted schema on individual pages. The field also works on Collection pages. Schema added here appears in the <head> of your published page; schema added to the "Before </body> tag" section appears in the <footer>.

To add schema this way:

1. Open Page settings for the target page.
2. Add your JSON-LD to the Schema markup field, or generate it with Webflow AI, then save and publish the page.

Supported CMS field types for binding include Plain text, Image, Video link, Link, Email, Phone, Number, Date/Time, Switch, Color, Option, and File. Reference, Multi-reference, and Multi-image fields are not supported, and deleting a bound field breaks the connection. See Add schema markup in Webflow for the full field reference.

Code Embed and site-wide custom code

For schema that lives outside the native field, use a Code Embed element on the canvas or the site-level custom code fields. Site-wide markup like Organization schema fits well in the head of your site.

To add schema through custom code:

1. Drag a Code Embed element onto the canvas, or open Site settings > Custom code.
2. Paste your <script type="application/ld+json"> block into the field. For a site-wide approach, use the Head code section as described in Custom code in head and body tags, then save changes and publish.

Do not add the same schema in both the Page settings field and a custom code section, since duplicate structured data creates conflicts. Existing custom-code schema keeps working, so there is no need to migrate it if it already validates.

Build with the Webflow Data API

Schema Flow has no public API, so a fully custom or automated structured data pipeline runs entirely on the Webflow Data API v2. This path suits developers replicating what the app does programmatically, and it requires server-side development. You read CMS data and use it to generate JSON-LD before injecting the markup through the custom code endpoints.

For a custom pipeline, use Webflow's CMS collection items API to read live and staged Webflow CMS items for schema values, Webflow's custom code API to inject JSON-LD into pages and sites, and Webflow webhooks to trigger schema regeneration when CMS content changes.

Custom code endpoints require a Webflow Data Client App authorized via OAuth Code Grant Flow with custom_code:read and custom_code:write scopes. Site API tokens do not grant access to these endpoints.

Sync schema on CMS updates via webhook

To keep programmatically generated schema current, subscribe to CMS webhook events and regenerate JSON-LD when items change. This mirrors the automatic behavior of the app in a custom stack.

To implement this:

1. Register a webhook with POST /v2/sites/{site_id}/webhooks using the collection_item_changed or collection_item_published trigger type. Each trigger type allows up to 75 registrations per site.
2. On each webhook event, read the updated item with GET /v2/collections/{collection_id}/items/live, build the JSON-LD from its fieldData, then push the markup to the page with PUT /v2/pages/{page_id}/custom_code.

This gives you the same content-synced schema the app provides, with full control over generation logic. For most teams, the app removes the need to build and maintain this pipeline.

What can you build with the Schema Flow Webflow integration?

Integrating Schema Flow with Webflow lets you publish content-synced structured data across an entire CMS without hand-writing JSON-LD for every page.

• Blog and article rich results: Map a CMS collection's rich text body directly into Article schema on the template page. Every post gets valid structured data that updates when you edit the content.
• Product listings for e-commerce: Bind Product schema to a products collection so CMS product fields flow into the markup. New products become eligible for rich snippets as soon as they publish.
• Local business visibility: Add LocalBusiness schema to a location page so search engines resolve business details such as address and hours for local results.
• Organization schema for AI visibility: Apply Organization schema with SameAs identifiers at the site level to help AI Overviews and language models resolve your brand as a single trusted entity.

If you need more control over how schema is generated and injected, the API integration path covers those cases with full flexibility.