What you’re trying to do is not supported in Webflow natively. The link @webdev gave is the closest you can get, but it requires fixed folders rather than the dynamic main-category
and sub-category
etc that you’re showing here.
Ask yourself why you want this because the effort required to create it is huge, and is probably not work any tiny SEO benefit you might get. I’d focus on the content and H1’s instead, and use JSON+LD Breadcrumbs if that’s your primary goal.
That said, you can hack this kind of URL-driven filtering, sort of…
- Have a base path, like
/article
, you’ll need this to differentiate these filter-paths from other static pages like /about
.
- Create your CMS collections for
category
, sub-category
, topic
. I’ll leave keyword off since it sounds like raw filtertext rather than a pre-selected item from a list.
Design each of your collection pages using Finsweet’s CMS Filter, with URL support. Each page would show its relevant information, filtered by its relevant filters.
So for example, the sub-category
collection page would have a collection list of all sub categories, filtered by the category
. The category would be passed in on the URL querystring.
Setup a 301 wildcard redirect to do the mapping.
For example, the sub-category mapping would be something like;
/article/(.*)/(.*)
→ /sub-category/%2?category=%1
You’d repeat variations of this design pattern for category
and topic
as well.
All of these are grouping pages, in the breadcrumbs path you’re creating.
For your fully-filtered page where cat, sub-cat, topic and keyword are all specified, you’d do the exact same thing. In the Finsweet CMS filter setup, I’d have cat, sub-cat, and topic probably as option selects, and keyword probably as a textbox, and populate all of them from the URL in the same way as the other pages.
IMPORTANT LIMITATIONS
- First, this will redirect. Your URL will work, but the resulting page will show the actual Webflow URL. This can be hacked also, using javascript to change the browser history state- users will see your URL after a “url flicker” during the redirect process.
- Second, your filter path is meaningless to Webflow, which means all of your internal links to pages in that filter path will have to be manually constructed, or hand-typed. A real pain.
If you really want it to be seamless ( no redirect URL flicker ), you’d need to use a reverse-proxy rather than a redirect, but the mapping approach would be identical.