How to Create Dynamic Pages for Services + Service Areas in Webflow CMS?

[Rendivus (Marcio Cunha)]

Hey everyone,

I’m working on a Webflow project and could really use some help! I’ve got two CMS Collections set up:

1. Service Areas (e.g., Alpine, Brooklyn, etc.)
2. Services (e.g., Interior Painting, Exterior Painting, Kitchen Cabinet Painting)

What I want to do is generate a unique page for every combination of these, like:

• “Interior Painting in Alpine”
• “Exterior Painting in Alpine”
• “Kitchen Cabinet Painting in Alpine”
• “Interior Painting in Brooklyn”
  …and so on for every service-area combo.

I’ve looked into multi-reference fields and dynamic templates, but I can’t seem to figure out a way to make Webflow automatically create pages for these combinations without manually doing it. Is there a way to make this work? Maybe I’m missing something obvious, or there’s a workaround I haven’t thought of.

Would love to hear if anyone’s tackled something similar or has ideas for how to approach this! Thanks in advance for the help.

---

Here is my public share link: Webflow - Jordan Painting

[memetican (Michael Wells)]

Hi Marcio,

In Webflow, collection page templates render collection items, so that item must exist.

I’d rename Service Areas to Areas, and then create an Area Services collection which has a single-ref to both Areas and Services.

You could build automations to populate that collection, e.g. add a Service, so the automation creates a new Area Service for each Area- but it would be a fair bit of work, and probably become fragile as your data scales.

Otherwise you could generate those pages automatically using a reverse proxy and special path formations, e.g. /area/service, so that it could lookup and aggregate the content you need. A lot of custom code but it sidesteps your page-creation issue as long as the page is created only from content in Areas and Services.

[whalesync (Matthew Busel)]

Hi Marcio!

What you’re describing is “programmatic SEO”. It’s a great way to generate many useful pages that can rank on Google.

While Webflow doesn’t have a way to automatically generate unique pages for programmatic SEO combos (like “Interior Painting in Alpine”), Webflow is fantastic at pSEO when you add a few other tools.

Here are the basic steps:

1) Set up your Webflow collections for pSEO
The first step is to set up your CMS collections. You probably want three of them:

1. Areas (e.g. Alpine, Brooklyn, etc.)
2. Services (e.g. Interior Painting, Exterior Painting, etc.)
3. Area Services (e.g. “Interior Painting in Alpine”, “Inter Painting in Brooklyn”)

The Area Services collection should include two references fields:

1. Reference to Area
2. Reference to Services

2) Set up a spreadsheet with the same collections
Once you have those Webflow collections, you can create the pages by hand, but this would take a very long time.

If you connect these collections to a spreadsheet, you can use formulas and bulk editing to create hundreds of pages instantly.

I recommend Airtable but you could just as easily use Notion.

In your spreadsheet create the same 3 tables with corresponding fields as above:

1. Areas (e.g. Alpine, Brooklyn, etc.)
2. Services (e.g. Interior Painting, Exterior Painting, etc.)
3. Area Services (e.g. “Interior Painting in Alpine”, “Inter Painting in Brooklyn”)

It will look something like this:

By putting this into a spreadsheet I can use formulas to generate headings and text like this one:

3) Sync your spreadsheet with Webflow
There are a couple of tools that do this, but I’m biased and think you should use Whalesync :)

But either way, once you’ve connected Airtable with Webflow, you’ll be able to create and edit thousands of these pages easily.

We have a whole guide on how to do this here and you can always shoot me a note if you have any questions (matthew [at] whalesync).