How To Set Up 301 Redirects Using Framer

Introduction

301 redirects in Framer are simple in theory. You take an old URL and redirect users and search engines to a new one. What’s difficult about that?

However, implementing them (and doing it right) can be harder than it sounds, especially for more nuanced situations.

And that’s why I’m creating this article. To help you better understand how 301 redirects work and how you can successfully implement them in Framer.

More specifically, here’s what I’ll cover:

✅ How to redirect a page in Framer

✅ How to redirect a page in Framer

✅ How to redirect an entire folder in Framer

✅ The problem with Framer redirects

✅ Framer automatic redirects

✅ Troubleshooting

Interested? Let’s get started!

Note: Setting up redirects in Framer will require you to have a Pro plan.

Glossary

Even though I’ve tried to keep the article as simple as possible, I still had to use some technical words for completeness. If you find a term you’re not familiar with, here’s a quick glossary you can reference:

• 301 Redirect

  → A permanent redirect indicating that the requested URL has been permanently moved to a new location.

  
  

• 302 Redirect

  → A temporary redirect indicating that the requested resource is temporarily unavailable at the original URL but has been moved to a new location (URL) for now.

  
  

• 308 Redirect

  → A 308 permanent redirect is similar to a 301 redirect, but it specifically restricts the redirect to the same method (such as POST).

  
  

• Wildcard

  → A special character used in redirect rules to replace one or more characters.

Brief Introduction To 301 Redirects

A 301 redirect is a permanent redirect from one URL to another.

It’s widely used when you want to delete a page, change the URL, migrate an entire domain, etc.

For example, my collection of 404 pages was previously located at this URL:

https://www.dacorte.dev/404-pages

However, when I started adding more and more resources, I decided to move it to this subdirectory:

https://www.dacorte.dev/resources/404-pages

By using a 301 redirect, I’ve basically told browsers and search engines that this new URL permanently replaces the old one.

Now that we’ve covered the essential theory let’s look at how to implement them using Framer.

How To Redirect A Page In Framer

Let’s start from the basics: redirecting users and search engines from an old URL to a new one.

Here’s how you can do it in Framer:

1. Go to your site settings > “Redirects” > “Create Redirect”.

2. Type the old URL in the ”Old URL” field (e.g., /product-name).

3. Enter the new URL in the ”New URL” field (e.g., /category-name/product-name).

4. Click on the check button.

5. Publish your changes.

   
   

When filling in the inputs, Framer provides a dropdown menu to help you choose between the pages you have.

That doesn’t mean you can’t enter a deleted URL in the list. The redirect will still work even if the old URL has been completely deleted or never existed in the first place.

How To Redirect An Entire Folder In Framer

The process used here is the same as described in the previous section. However, you’ll have to use a wildcard to create the redirect rule.

If you’re unfamiliar with the term, wildcards are special characters that replace one or more characters.

Framer currently supports three different wildcards:

• ‘*’

  → Used in a “from” URL to match anything.

  
  

• ‘:slug’

  → Used to match something between slashes. It can be used in “from” and “to” URLs.

  
  

• ‘:n’

  → Used in a “to” URL to match the corresponding ‘*’ wildcard in the “from” URL.

  
  

Framer allows you to use multiple wildcards within the same rule; you just have to match the “from” wildcards with the “to” wildcards.

Let’s look at a couple of examples to understand this concept better.

‘*’ Wildcard

Suppose I want to move all my blog articles from this URL “blog/article-name” to “resources/blog/article-name”.

In that case, I would want to have a rule with a wildcard (AKA, a special character) that allows me to select every article under the /blog directory.

Intuitively, most people would write something like this:

/blog/* -> /resources/blog/*

This rule seems, right but it’s not.

Why? As I mentioned earlier, the ’*’ wildcard is only supported in “from” URLs. That means you have to match the ’*’ wildcard used in the “from” URL with a ‘:n’ wildcard in the “to” URL.

So, the right rule would be:

/blog/* -> /resources/blog/:1

Let’s now look at an example with multiple ’*’ wildcards.

Suppose I have a massive blog divided into years, and each year is divided into categories. The URL would look like this: “/blog/year/category-name/article-name“.

If I wanted to change the name of one category, here’s the rule I’d have to write:

/blog/*/category-name/* -> /blog/:1/new-category-name/:2

In this case, using two different wildcards allows me to select all the articles within a category, regardless of the year.

‘:slug’ Wildcard

The other wildcard supported by Framer is the ‘:slug’ wildcard. Basically, it selects anything between two slashes.

Let’s say I have an online store where the articles are organised like this: “/articles/category/product-id”, and I want to merge the category and the product ID to simplify my website architecture. The end result would be something like this: “articles/category-product-id”.

Here’s how I would have to write the rule:

/articles/:category/:id -> /articles/:category-:id

By using these two ‘:slug’ wildcards, I was able to create new URLs without losing any data.

The Problem With Framer Redirects

Redirects in Framer are a powerful tool. Even more powerful than the Framer designer.

Some examples I brought you are complex redirects. However, Framer currently doesn’t allow you to create any website structure resembling those used in the examples (and in the official documentation).

Take this URL, for example: “/blog/2022/07/article-name”. Organising your blog based on the publishing date could be an exciting feature. However, it is currently not possible in Framer.

That’s because the CMS feature currently doesn’t allow you to create dynamic URLs based on multiple path variables, and the slug field cannot contain any slash “/”.

What does this mean practically?

It means that the only wildcard you have to worry about is the one presented in the first example (the one that allows you to move an entire sub-directory).

All the other ones currently lack a practical implementation. Whenever that changes, I’ll update this guide accordingly.

Framer Automatic Redirects

A remarkable feature of Framer is that it automatically sets up three redirects to have a canonical URL for your homepage.

What does this mean? It means that users can type in the search bar 4 different URLs and will still end up on the same page.

When you connect your custom domain in Framer, you can decide whether you want your www or non-www version to be canonical.

In other words, you can decide between these two versions:

• https://www.domain.com

• https://domain.com

  
  

And the other one will automatically be redirected to the one you chose.

For the sake of this example, I’ll use the www version as the canonical one. But keep in mind that the same principle works the other way around.

So, the canonical version of my portfolio's homepage is this one: https://www.dacorte.dev

However, you can still access it through the following URLs:

• https://dacorte.dev

  → A 308 redirect will immediately bring you to the canonical homepage.

  
  

• http://www.dacorte.dev

  → Same as the previous one.

  
  

• http://dacorte.dev

  → This one is slightly different as it will first redirect you to https://dacorte.dev. Then, the other redirect will bring you to the canonical homepage. This phenomenon is also known as a “redirect chain”.

  
  

Here’s a graphical representation of what’s happening:

If I had set https://dacorte.dev as the canonical homepage, here’s how it would look like:

Troubleshooting

Redirect Doesn’t Work When Using Navigation

If the redirect you set up works when you try to access the URL directly but doesn’t work when using internal navigation, here’s how you can fix it.

Select all the internal links pointing to it and, instead of just typing the last part of the URL (e.g., /blog), type the entire URL (e.g., https://www.dacorte.dev/blog).

This issue happens because the navigation is rendered client-side while the redirects are handled server-side. The full URL will force a new server request, allowing the redirect to work correctly.

Connecting Multiple Domains To The Same Framer Website

As of February 2024, Framer doesn’t allow you to connect multiple domains to the same website.

Conclusion

Correctly setting up 301 redirects in Framer is easier said than done.

By following the guidelines in this article, you should be equipped with everything you need to know to get them to work.

If you find a bug or something isn’t working as expected, you can always post your issue in the Framer community, where somebody from the team will look into it.

Thanks for reading the article!

- Luca