Diagram placement guide

For each diagram: which section it belongs to in the Webflow article and the Framer article.

Main diagram (B)
What is programmatic SEO — the full pipeline
Webflow article
Add below the introduction (after the first 3 paragraphs, before section 1 — "Plan your Webflow programmatic SEO pages before you build")
Framer article
Add below the introduction (after the first 3 paragraphs, before section 1 — "Plan your Framer programmatic SEO pages before you build")
Data spreadsheet CMS collection Import or sync Template renders pages Pages indexed by Google Each page targets a unique search query "CRM for startups" "CRM for agencies" "CRM for real estate" ...
Diagram 1C
Conditional sections make each page unique
Webflow article
Section 2 — Structure your data and build your Webflow CMS template
Subsection: Use conditional visibility in Webflow to make each programmatic page unique
Framer article
Section 2 — Structure your data and build your Framer CMS template
Subsection: Use conditional design in Framer to make each programmatic page unique
Without conditionals All pages identical With conditionals Each page genuinely different Sections only render when CMS data exists
Diagram 2A
Hub-and-spoke internal linking
Webflow article
Section 3 — Build internal linking in Webflow for programmatic page discovery
Subsections: Create Webflow hub pages that link to programmatic pages + Add related-page modules in Webflow templates using reference fields
Framer article
Section 3 — Build internal linking in Framer for programmatic page discovery
Subsections: Create Framer hub pages that link to programmatic pages + Add related content modules on Framer CMS detail pages
Hub page /integrations/ Salesforce /salesforce HubSpot /hubspot Slack /slack Stripe /stripe Collection list links "Related items" cross-links Footer: Sitemap link
Diagram 3A
Spreadsheet to CMS to published pages
Webflow article
Section 2 — Structure your data and build your Webflow CMS template
Subsections: Define your fields and prepare your spreadsheet for Webflow programmatic SEO + Build your Webflow CMS Collection and import a test batch
Framer article
Section 2 — Structure your data and build your Framer CMS template
Subsections: Define your fields and prepare your spreadsheet for Framer programmatic SEO + Build your Framer CMS Collection and sync a test batch with plugins
Spreadsheet 200 rows import CMS Name (title) Slug Summary Rich text... Collection fields mapped render 200 pages each unique Every row becomes a unique page
Diagram 6B
URL structure: fixed vs. dynamic segments
Webflow article
Section 1 — Plan your Webflow programmatic SEO pages before you build
Subsection: Understand Webflow CMS plan limits and URL constraints for programmatic SEO
Framer article
Section 1 — Plan your Framer programmatic SEO pages before you build
Subsection: Know Framer plan limits and URL structure for programmatic SEO
Works natively /integrations/{item-slug} /content/blog/{item-slug} static folder + slug /services/web-design/projects/{item-slug} Does not work natively /services/{category}/{item} two dynamic segments Two dynamic segments require a reverse proxy
Diagram 7B
Gradual publishing: 3-phase rollout
Webflow article
Section 5 — Publish, monitor, and scale Webflow programmatic pages
Subsection: Publish Webflow programmatic pages gradually and monitor indexation
Framer article
Section 5 — Publish, monitor, and scale Framer programmatic pages
Subsection: Publish Framer programmatic pages gradually and track indexation
1 2 3 Week 1 Publish 10-50 seed pages Weeks 2-4 Monitor indexing + GSC data Month 2-3 Scale to 100% if metrics good Publish in phases, monitor, then scale
Diagram 11B
Single vs multi-dimension: 3-collection entity relationship
Webflow article
Section 2 — Structure your data and build your Webflow CMS template
Subsection: Add combo Webflow CMS Collections only if you need multi-dimension pages
Framer article
Section 2 — Structure your data and build your Framer CMS template
Subsection: Add combo Framer CMS Collections only if you need multi-dimension pages
Services Web design SEO Development Areas New York Miami Chicago + Combo pages SEO in New York Web design in Miami ... 3 x 3 = 9 combo pages
Diagram 12A
Canonical tag configuration: correct vs incorrect
Webflow article
Section 4 — Set canonical tags and manage localization in Webflow
Subsection: Set canonical tags in Webflow to prevent duplicate issues
Framer article
Section 4 — Set canonical tags and manage localization in Framer
Subsection: Set canonical URLs in Framer correctly (especially with proxies and rewrites)
Incorrect site.com/crm-tools canonical: proxy.webflow.io/crm-tools Correct site.com/crm-tools canonical: site.com/crm-tools Canonical must point to the real public URL
Diagram 13C
CMS fields mapped to template sections
Webflow article
Section 2 — Structure your data and build your Webflow CMS template
Subsections: Define your fields and prepare your spreadsheet for Webflow programmatic SEO + Set dynamic SEO titles, meta descriptions, and FAQPage Schema on your Webflow template
Framer article
Section 2 — Structure your data and build your Framer CMS template
Subsections: Define your fields and prepare your spreadsheet for Framer programmatic SEO + Set dynamic SEO titles, meta descriptions, and FAQPage Schema on your Framer template
Template {title} {image} {body} {faq} + CMS item "HubSpot" Best CRM for... = Published page Best CRM for... FAQ section Template + data = unique page
Diagram 14B
Hreflang and localization: URL routing with locale prefixes
Webflow article
Section 4 — Set canonical tags and manage localization in Webflow
Subsection: Handle Webflow localization hreflang and sitemaps for programmatic pages
Framer article
Section 4 — Set canonical tags and manage localization in Framer
Subsection: Use Framer localization to expand programmatic SEO to new markets
site.com/ /en/ /es/ /fr/ /en/crm-tools /en/email-tools /en/chat-apps /es/crm-tools /es/email-tools /es/chat-apps /fr/crm-tools /fr/email-tools /fr/chat-apps Locale prefixes create parallel URL trees