In 2016, Webflow added support for wildcard redirects into its 301 redirect capability.
This makes it much easier to migrate a site to Webflow, particularly when you rely on querystring values and complex URL patterns as part of your original site's navigation.
Need more advanced redirection for your Webflow-hosted site?
Contact us about our Hyperflow solutions.
The Basics
Webflow's wildcard redirects use a pseudo-regex syntax.
- /oldfolder/(.*) -> /entirely/new-url/structure/%1
- /blogs/(.*)/(.*) -> /articles/%1/%2
You can specify multiply (.*) capture groups in the matching string ( the old path ), and multiple %n group references in the replace string ( the redirect to path ).
NOTE: Unfortunately, though it smells like regex, it's not. It's an extremely limited subset of regex capability. For example, the (.*) matching matches path parts only, and will stop matching at the next path delimiter /.
To devs, this is super-weird, however most designers would find actual regex syntax very confronting. Webflow is clearly trying to walk that line, and this is very understandable.
When should I use this?
Webflow's wildcard redirects are useful anytime;
- You want to redirect a set of URLs that follow a well-defined pattern
- You need to redirect a URL that contains an unsupported redirect character such as a comma ( , )
Escaped Characters
When using URLs with wildcards and single paths, escape the following characters by using the % symbol before the character:
% - & * ( ) = _ + and ?
https://university.webflow.com/lesson/set-301-redirects-to-maintain-seo-ranking
When do I need use escaped characters?
My tests indicate that Webflow differentiates between static path processing and wildcard path processing, and applies slightly different syntax rules.
This is probably to make it easier for people who just want basic static redirects, vs. people who need pattern matching.
As an example, a redirect containing a hyphen ( - ) works fine, and is even shown in the docs;
/old-url -> /new-url
However, if you're using wildcards, you have to escape that hyphen;
/old%-url/(.*) -> /new-url/%1
Unfortunately, the docs are not clear on how Webflow differentiates between static paths and wildcard paths. We can probably assume that it is the (.*) sequence, however you may want to test URLs which contain ( or * to ensure they are redirected properly.
Redirecting Querystring Patterns
Wildcard pattern matching also appears to be designed to work with your path in parts. Based on the documentation, it appears that Webflow intends for you to apply the wildcard (.*) pattern to a specific path part, or a specific querystring param value, like this;
/old-url/(.*) -> /new-url/subdir/%1
Or;
/news?articleid=(.*) -> /blog/%1
This loosely means that the (.*) pattern matching will automatically stop matching characters when it encounters delimiters such as path parts /, query string ?, or query string params =, or &.
Matching optional querystrings
If your querystring is optional, use two separate patterns, one with the querystring, and one without.
- /old-url -> /new-url
- /old-url/(.*) -> /new-url/%1
Or, see the hack below.
Query string ordering
Because of the way patterns are matched, if you're matching querystrings, you will most likely need to know the order of the querystring params.
If you don't know the order, create all the variations in your redirects.
- /old-url?a=(.*)&b=foo -> /new-url/%1
- /old-url?b=foo&a=(.*) -> /new-url/%1
Wildcard redirect a full querystring
What if you need the whole querystring, and it's long and complex?
This is absolutely a hack, but if you need to redirect a full querystring, I've had some success by violating those intended pattern-matching rules, e.g.;
/old-url(.*) -> /new-url%1
This will redirect e.g.
/old-url?hey=yo&whats=up -> /new-url?hey=yo&whats=up
This is a hack. YMMV.
Redirecting to External Sites
Webflow's redirects can also handle redirection to external sites, e.g.;
/path ➔ https://somesite.com/path
However the wildcard redirection feature may not work with external sites.
Additional options
Script-based redirects;
References
- 301 redirects: what they are and how to use them - Webflow
- Set 301 redirects to maintain SEO ranking - Webflow
- Special character redirects support - Webflow
