Webflow Fluid Paths

Want dynamic, fluid paths on your Webflow-hosted site? Here's how we build this for clients.

This Webflow-enhancement is now part of a rapidly-evolving service collection we call Hyperflow.

Do you need Webflow's CMS paths to be more fluid?

Whether you're an SEO expert, or just trying to craft a logical organization for you website content, semantic paths are a central part of your site's design.

What are Semantic Paths?

Semantic paths are paths that convey meaning and context to your pages by their location.

Examples:

  • /usa/california/los-angeles/little-tokyo makes more sense to users and search engines than /loc/little-tokyo does.
  • /menu/dinner/salads is more meaningful than /category/salads
  • /psych/evolutionary-psych/level-201/introduction makes is far clearer than /lesson/e201/introduction.

Unfortunately, Webflow's CMS has very rigid path rules, which effectively prevent you from building CMS-driven content hierarchies the way you want.

We can fix that.

In fact, this is one of the most-requested features we build for clients.

How We Solve This

The way is to do this on a Webflow-hosted site is to design a reverse proxy that can resolve your desired paths to Webflow's collection page paths.

We custom build these to your requirements, and allow you to map your desired paths to the correct page content, any way you like.

We call this technique remapping.

Key features

There are four parts to remapping your site for top-quality SEO;

  • We respond directly with the correct page content on any desired path, with no redirects - crucial for SEO.
  • We automatically redirect the old Webflow /collection-slug/item-slug URLs to your new paths, so that your current SERPs, navigation, and links, are all fully supported.
  • We automatically correct your in-page canonical URLs to your newly remapped paths.
  • We automatically update your Sitemap with these canonical paths.

Using these 4 techniques together works beautifully with Webflow hosting.

The core Webflow architecture remains unchanged, and everything continues to work as designed - all of your original paths and redirects are fully functional.

And, this can be done on a live site with no disruption to your existing SEO investments. Slick, eh? We think so too.

How Path Maps Work

There are several components to this solution but the most complex part of this build is typically the path map.

We can design yours specific to your needs, to keep your paths as flexible as you want, and your administration as convenient as possible.

Here are some of our key approaches, loosely ordered from simplest to most complex.

  1. Static map. Hardcoded, good for simple maps, on sites that never changes. The from and to paths are both known in advance.
  2. Static patterned map. Hardcoded, good for predictable maps that always follow the same pattern. The from and to paths are both easy to determine in advance, based on their path structure.
  3. Static algorithmic map. A patterned map with more complex pattern rules. The from and to paths are both possible to determine in advance, based on their path structure.
  4. Dynamic structured map. If you have strongly structured content such as an online course, you might need to present your paths as e.g. /course/(course-slug)/(chapter-slug)/(lesson-slug) and have them come from 3 different CMS collections. The from path is deterministic, but the to path is variable and requires CMS data to formulate.  
  5. Dynamic unstructured map. If you have a lot of URL variations and you need them to be dynamically defined in the CMS, you can maintain that map in the CMS. Here we build a special dynamically generated map that republishes as your CMS is updated. Both the from and to paths are variable and require CMS data to formulate. They can also "overlay" the site such that any path, anywhere, can be remapped.
In general, approach #5 is most popular with SEO experts who want the flexibility to map paths arbitrarily, however it's also the most complex build. In most cases that's not needed.

Multi-level maps

We also support multi-level maps, which describes situations in which different levels of your path should be remapped differently, e.g.

/course/(course-slug) maps to a course page
/course/(course-slug)/(chapter-slug) maps to a chapter page
/course/(course-slug)/(chapter-slug)/(lesson-slug) maps to a lesson page

Contact us

Do you need this feature on your site?

We love working with great clients, and building great systems. Give us a shout.

Your submission has been received!
We'll reply as soon as we can.
Oops! Something went wrong while submitting the form.

Frequently Asked Questions (FAQs)