← Back to all Resources

Using wildcards to reduce total number of redirect rules

SEO
Custom code

Use wildcard redirects

After reviewing the redirects in the project (https://www.domain.com.au/manifest.json) I noticed that we could potentially cut down on the large number of redirects if there’s flexibility with the params on the Catalogue Item page.

Some examples:

// new suggested redirect
"/news/archive/(.*)": "/news%-archive/%1"

// current redirect structure
"/news/archive/april-2018": "/news-archive/april-2018"

You can see that currently you have your URLs all listed out individually, but with redirects we can cut down on how many rules need to be in place. 

In the example above this text (.*)captures everything after that slash. In fact, we can use multiple capture groups with each URL which we’ll show in later examples. 

Then, in the redirect URL, the %1 pulls the capture group through. If we had multiple capture groups we could pass those along with %2, %3, etc. Now instead of needing 50 or so redirects to capture the news archive structure, we only need one.

Here’s another example:

// new suggested redirect
"/centenary/standards-heros/standards-heroes-home/(.*)": "/standards-heroes/$1"
  
// current redirect structure
"/centenary/standards-heroes/standards-heroes-home/jim-docherty": "/standards-heroes/jim-docherty"

And here’s an example with multiple capture groups:

//new suggested redirect
"news/blog/(.*)/(.*)/(.*)": "/blog/%3"
  
// current redirect structure
"/news/blog/2021/march/every-drop-counts": "/blog/every-drop-counts"

You can see in this redirect we capture the year (2021), the month (march), and the slug (every-drop-counts). Then we drop the first two groups and only use that third capture (the slug) since that’s all your redirect needs. We can also take this approach to the larger swaths of your redirect URLs if you’re ok with your original slugs. 

Let’s take this URL as an example:

/standards-catalogue/others/sa-slash-snz/as-slash-nzs--1260-colon-2009

It looks like in your current redirects that now becomes:

/standards-catalogue/standard-details?designation=as-nzs-1260-2009

So as-slash-nzs–1260-colon-2009 became as-nzs-1260-2009. I can see why that approach was taken since it’s much cleaner. But, if we could use the old structure and redirect to:

/standards-catalogue/standard-details?designation=as-slash-nzs--1260-colon-2009

If that is acceptable, we could remove a lot of redirects and rely on wildcards. For this URL set we could use something like:

// suggested redirect structure
"/standards-catalogue/other/sa/(.*)": "/standards-catalogue/standard-details?designation=%1"

// current redirect structure
"/standards-catalogue/others/sa-slash-snz/as-slash-nzs--1260-colon-2009": "/standards-catalogue/standard-details?designation=as-nzs-1260-2009"

I know on the Catalogue Item page you’re making an API call to Xano to get the item and this would break that call. But, you can use some JavaScript to clean up that param on the client side to keep things working as expected. Here’s some sample code: 

// how you're currently getting the param that's used in the call
const myParam = thisUrl.searchParams.get("designation") || 0;
  
// suggested change to clean up params
const originalParam = thisUrl.searchParams.get("designation") || 0;
const myParam = originalParam
  .replace(/--/g, "-") // removes double dashes
  .replace(/-slash/g, "") // removes "-slash"
  .replace(/-colon/g, ""); // removes "-colon"

With the code above, this allows you to have this URL:

/standards-catalogue/standard-details?designation=as-slash-nzs--1260-colon-2009

And to pass this string into your Xano API call:

as-nzs-1260-2009

This keeps your current functionality in tact and can aid in drastically reducing the number of redirects the team is using.

Licensing

All code shared in this document is licensed under the MIT License

Permission is hereby granted, free of charge, to any person obtaining acopy of this software and associated documentation files (the "Software"),to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge,publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDINGBUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE ANDNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Related resources

Retrieving UTM Parameters and Adding Hidden Inputs to Forms

Captures UTM parameters as hidden form inputs for campaign tracking via form submissions.
Developer
Video
Custom code
Forms
Marketing

Saving and Retrieving User Input with Local Storage

How to save and retrieve user input on a form from/to local storage and show it on a thank you page.
Developer
Video
Custom code
Forms
Marketing

Managing a sitemap with a reverse proxy

Ways to create a custom sitemap when there is a reverse proxy set up in front of your Webflow site
Developer
Article
SEO
Reverse proxy
Sitemap

Using an iframe on the page

Performance and accessibility considerations when using iframes
Developer
Article
Accessibility
Performance
Custom code
Security

Splitting your Webflow site into multiple projects

Considerations when splitting or separating a single Webflow site into two projects
Designer
Article
DNS
Hosting
Migration
SEO
Security

Domain migration

Safeguard the user experience, functionality, and security of your website during a domain migation.
Developer
Article
DNS
Hosting
Migration
SEO
Security

Creating your own middleware

A guide to creating middleware to protect your API keys when making front-end calls in Webflow
Developer
Github
Custom code
API

Canonical tags

Set your site's canonical tag to tell search engines the primary or preferred domain for your site
Marketer
Article
SEO

Dialog element for modals and popups

Build more accessible pop up elements by using the dialog element with custom elements in Webflow
Developer
Nugget
Accessibility
Custom code

Custom code workflows

Methods for working with custom code in Webflow
Developer
Article
Custom code