A redirect is a way to automatically send users from one URL to another. There are several types of redirects, but the most important and most used one is the 301 (permanent) redirect. You don't need to know how to code, Webflow gives you the ability to easily use 301 redirects natively.
To access this feature, from your Webflow dashboard select your desired ‘Site Settings’, on the left side click on the ‘Publishing’ section, scroll down and you will find the ‘301 redirects’ section.
In the ‘Old path’ field you enter your old URL path, in the ‘Redirect to path’ field enter your new URL path, click ‘Add redirect path’ and publish the changes.
Learn in detail the five most common 301 redirect use cases:
- Single page to single page
- Folder to folder
- Folder to single page
- Multiple pages to multiple pages
- Entire domain
How to redirect a single page to a single page?
Lets say your current URL is:
https://www.tunel.studio/oldportfoliopage
You want to redirect it to a new URL that goes like this:
https://www.tunel.studio/newportfoliopage
To make the change in this case, you only enter the paths of the URLs like in the following example:
Old path: “/oldportfoliopage”
Redirect to path: “/newportfoliopage”
Don’t forget to click ‘Add redirect path’ and publish the changes.
How to redirect folder to folder?
To redirect multiple pages of your website (e.g. the CMS pages of your blog), you will need to specify which ones by using so-called “regular expressions,” a method to define and capture the pages for the redirect.
Regular expressions are a set of symbols and characters used to find patterns in text, commonly used across different programming languages.
Lets say your current structure is the following:
https://www.tunel.studio/portfoliofolder/item1
https://www.tunel.studio/portfoliofolder/item2 ...and so on.
You want to change the structure to:
https://www.tunel.studio/ourwork/item1
https://www.tunel.studio/ourwork/item2 ...and so on.
To make the change, you first need to specify the contents of your current folder. For this you would use a regular expression, a so-called capture group “(.*)”. The capture group can search for all paths that the "/portfoliofolder" folder contains.
Old path: “/portfoliofolder/(.*)”
Redirect to path: “/ourwork/%1”
In the redirect “%1” (so-called backreference) represents the specific portion of the URL captured by the capture group “(.*)”, allowing you to use it in creating the new URL path.
If you have a completely different structure with multiple slashes “/” in the path, you have to put the whole path in the ‘Redirect to path’ section:
Old path: “/portfoliofolder/(.*)”
Redirect to path: “/company/about/ourwork/%1”
How to redirect a folder to a single page?
Sometimes, you may want to consolidate multiple pages (usually CMS pages) within a folder to a single destination URL. This is common during a website redesign or when simplifying your site's structure.
Use the pattern (.*) to capture the entire contents of the old folder again.
Old path: “/portfoliofolder/(.*)”
Instead of using a capture group in the new path, you simply provide the path to the single destination page.
Redirect to path: “/ourworksinglepage”
In this scenario “%1” is not utilized since the captured portions of the current URLs are not required to construct the new URL paths, instead, they will be uniformly redirected to “/ourworksinglepage”.
Escape Characters
Maybe you have noticed that all of the above examples didn’t include any URLs with special symbols, e.g. “-”, “&”, “=”, etc. Certain characters in URLs need a special treatment because they have specific meanings. To handle them correctly, you add a "%" before these special characters. This is called "escaping". For example to make…
https://www.tunel.studio/portofolio-folder?category=branding&item=apple
…look like this…
https://www.tunel.studio/portofolio/branding/apple
…the paths would need to be:
Old Path: “/portofolio%-folder%?category%=branding%&item%=apple”
Redirect to path: “/portfolio-folder/branding/apple”
You only need to escape characters in the Old Path. The new path doesn’t require ‘escaping’.
You need to escape the following characters:
- -
- ?
- &
- %
- _
- *
- +
- (
- )
How to redirect multiple pages to multiple pages?
Let’s say you need to redirect multiple URLs with variable filters or query parameters…
https://www.tunel.studio/portfolio-folder?category=branding&item=apple
https://www.tunel.studio/portfolio-folder?category=branding&item=bmw
https://www.tunel.studio/portfolio-folder?category=design&item=coca-cola
https://www.tunel.studio/portfolio-folder?category=development&item=dhl
…into more streamlined URLs…
https://www.tunel.studio/portfolio-folder/branding/apple
https://www.tunel.studio/portfolio-folder/branding/bmw
https://www.tunel.studio/portfolio-folder/design/coca-cola
https://www.tunel.studio/portfolio-folder/development/dhl
…you would need to enter the following:
Old path: “/portfolio%-folder%?category%=(.)%&item%=(.)”
Redirect to path: “/portfolio-folder/%1/%2”
In this setup, we have captured two sets of variables with capture groups “(.*)”.
“%1” represents the first capture group (branding, design, development).
“%2” represents the second capture group (apple, bmw, coca-cola, dhl).
How to redirect an entire domain?
To redirect an entire domain, simply connect both, the to be redirected domain and the domain you want to use, to Webflow. Then set the one you want to use as the default. Remember, you can connect as many domains and subdomains to your site as you need (without paying for additional hosting).
How to redirect to the Homepage?
There may be instances where you want to direct traffic from obsolete pages directly to your homepage. Depending on if you want to redirect a specific page or a set of pages directly to your homepage, you use any of the above methods for the old path. You only need to put a "/" in the Redirect to path section.
Old path: “/obsoletepage”
Redirect to path: “/”
Common mistakes and best practices
A frequent error a user can experience comes from incorrect path usage, e.g. typos, wrong paths or not ‘escaping’ special characters as shown in the above templates. Another oversight is neglecting the use of wildcard redirects.
To ensure a smooth transition, it's essential to plan before implementing any changes, mapping out both current and new URL structures. Using wildcard patterns strategically can significantly streamline the process, especially for bulk redirects.
Finally, thorough testing of redirects on your website, is the most important part to confirm they direct users as intended, without leading to errors like 404 pages.
There are many available resources to test out if the redirect is working correctly. You can visit Redirect Checker, or use a Chrome extension like Redirect Path. Alternatively, if you have more technical knowledge you can also use your browser’s developer tools. To test out in bulk if a large amount of pages are redirecting to where they should, you can use crawling tools. One of the best choices is Screaming Frog.
Conclusion
- Find the '301 redirects' section in 'Site Settings' under the 'Publishing' tab in your Webflow dashboard.
- Use the 'Old path' and 'Redirect to path' fields to efficiently map your current URLs to new destinations.
- Use regular expressions, especially capture groups "(.*)", to handle larger amounts of redirects, as well as backreferences "%1" to map them to the new URLs
Need help with setting up redirects on your website? We're here to help. Feel free to reach out for any assistance or clarification you need.
