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 reverse proxy framework 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 in the URL itself.

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 gives more context than /lesson/e201/introduction.

Webflow's Path Limitations

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

We can fix that.

This is one of the most-requested features we build for clients.

How Hyperflow Solves This

The way is to resolve this limitation in a Webflow-hosted site is to design a reverse proxy that can rewrite Webflow's collection page paths to your own desired path structure.

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, and it is based on a central concept of a path map, detailed below.

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. Impressive, 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.

The path map describes the rules on exactly how each request URL should be handled, and what data should be displayed. It's effectively an intelligent lookup table that is built dynamically from your CMS data.

We design each client's path map specifically for your individual mapping needs. This not only solves your path, navigation and SEO issues, but it keeps your site administration simple and convenient.

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.

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

What do I need?

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.

For most sites map types #1 through #3 are more than sufficient to meet your design goals.

Contact us with your path requirements, and a read-only designer link so that we can see your CMS structure, and we can recommend the right approach for you.

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)