Webflow Redirects

Webflow RedirectsWebflow Redirects
table of content

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.

Visual explanation to help a user understand the parts of a URL (link), shown in a search bar
Parts of a URL

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.

Link paths example of a single page to a single page redirect
Single page to a single page redirect

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.

Folder to folder redirect
Folder to folder redirect

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”.

Image showing a user how a folder to a single page redirect should be done
Folder to a single page redirect

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).

A relevant example from a 2023 blog for multiple pages to multiple pages redirect
Multiple pages to multiple pages redirect

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).

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.

Crafting Digital Masterpieces

Start your yourney

Eager to transform your digital presence? Get in touch with us and let's discuss how we can bring your project to life with finesse and expertise that Tunel Studio is known for.

FAQ about Webflow Redirects

01

Is there a limit to the number of 301 redirects you can create in Webflow?

Webflow doesn't set a strict limit on redirects, but for better website performance and SEO, it's recommended to stay below 1,000. Adding more redirects mean bloating your manifest.json file with additional code, potentially slowing down site loading times.

02

Is It Possible to Undo a 301 Redirect in Webflow?

Yes, you can undo a redirect in Webflow. Simply go to the '301 redirects' section in your site settings and delete or modify the redirect as needed.

03

How Do Redirects Affect My Webflow Site's SEO?

Properly implemented 301 redirects in Webflow can preserve your Google ranking by transferring link equity from the old URL to the new one.

04

Can I Set Up Temporary (302) Redirects in Webflow?

No, Webflow primarily supports 301 (permanent) redirects. For temporary redirects, consider other methods like using Cloudflare.

05

What Happens to Old URLs After Setting Up Redirects in Webflow?

After setting up redirects in Webflow, the old URLs no longer directly access their original content; instead, they lead users to the new destination URLs.