Webflow’s Missing 301 Redirect Feature (And How to Hack It)

Look, I love Webflow. It’s like that friend who’s amazing at everything… except that ONE thing that drives you absolutely bonkers. Today, we’re talking about that thing: bulk 301 redirects.

The Problem With Webflow’s Redirect Management

If you’re migrating a site to Webflow, you’re probably thinking, “Surely there’s a simple way to import my 301 redirects?”

Record scratch

Nope. In 2024, we’re still manually adding redirects one… by… one. It’s like copying your friend’s phone book by hand. (Remember phone books? No? Just me? Cool.)

The Quick Fix: Console Command to the Rescue

After migrating countless websites over the years, I’ve developed a workaround that saves hours of mind-numbing clicking. Here’s how to bulk import your 301 redirects in Webflow:

1. Navigate to your site settings
2. Click on the “Publishing” tab (This is crucial – more on why below)
3. Open your browser’s console (F12 for most browsers)
4. Paste this code:

var hostingContainer = document.getElementsByClassName('publishing-tab')[0];
var hostingController = angular.element(hostingContainer);
var scope = hostingController.scope();

// Update your redirects here
var redirects = [
  {source: '/old-url-1', target: '/new-url-1'},
  {source: '/old-url-2', target: '/new-url-2'}
];

redirects.forEach(function (rule) {
  scope.redirectPath = rule.source;
  scope.redirectTarget = rule.target;
  scope.addRedirect();
});

Troubleshooting: The Classic “Undefined” Error

If you’re seeing this error:

Uncaught TypeError: Cannot set properties of undefined (setting 'redirectPath')

Don’t panic! This usually means one of two things:

1. You’re not on the Publishing tab (The most common issue)
2. The page hasn’t fully loaded yet

Pro Tip: Always wait a few seconds after the page loads before running the script. Webflow’s angular components need time to initialize.

Why This Matters for SEO

Getting your 301 redirects right is crucial for:

• Preserving SEO juice from your old URLs
• Maintaining user experience during migration
• Keeping Google happy (and we all want that)

The Bigger Picture

While this hack works, it highlights a bigger issue in the web development world: sometimes we need to get creative with our solutions. At Bang Digital, we’ve learned that the difference between a good developer and a great one isn’t just knowing the perfect solution – it’s finding workarounds when the perfect solution doesn’t exist.

What’s Next?

Keep an eye on our blog for more technical marketing insights and web development tips. We’re always sharing solutions to real problems we encounter while building and optimising websites for our Perth clients.

Need help with your website migration or technical SEO? Drop me a line. We’ve handled countless Webflow migrations for Australian businesses, and we’d love to help with yours.

---

Brad Farleigh is the CTO at Bang Digital, Perth’s leading digital marketing agency. When he’s not finding creative solutions to web development challenges, he’s probably debugging someone else’s creative solutions. Follow him for more web development tips and occasional dad jokes about JavaScript.