Migrating Sites to Webflow

301 Redirects for a Site Merge

Overview
Converting HTML to Webflow
101
Converting WordPress to Webflow
102
301 Redirects
Redirecting Your Paths to Maintain SEO
150
301 Redirects for a Site Merge
151
Re-Templating a Site
Approaches to Re-Templating
200
No items found.
Published
October 11, 2024
Updated
in lightbox

When you are merging two or more sites into a single Webflow-hosted site, the 301 redirects can be a challenge.

In general, it's just a lot of spreadsheet work, but it's possible to encounter conflicting paths which Webflow's relative-path redirects does not support. I'll explain how we solve this below.

The Basic Process

Prepare for a lot of copy-paste work.

STEP 1 - Acquire your map data

  • Create a spreadsheet. We like Google Sheets.
  • For each site you're merging, create a column, the last column should be your new, combined site.
  • For each site, download the sitemap.xml file, and extract the full list of URLs that you need to redirect. We like this tool.
  • Copy-paste that to a text editor, and search replace all of the origins, that's the https://www.oldsite.com part. You want your list to contain only the paths, like /about.
  • Copy-paste that list of paths into the correct column of your spreadsheet, for that site.

STEP 2 - Organize your map

Once you've completed this for every site, you begin arranging your map. You want to line up each row so that you clearly identify which pages from your old sites are redirecting to which pages on your new combined site.

Remember your goal here is to determine the complete set of redirects you need. If the old site had a path of /contact and the new site has a path of /contact for that same page, you do not need a redirect.

This is where you learn everything.

A row might look like;

  • Old site 1 - /about
  • Old site 2 - /about-us
  • New site - /about

In which case you do not need a redirect for Old site 1, and you do need a redirect from /about-us -> /about to support Old site 2.

In this process you're looking for clarity, and conflicts.

An example of a conflict- let's assume you have two dentists offices, and they're merging into a single site for the practice. Since they're two locations, the new site might have two different contact pages.

  • Old site 1 - /contact
  • Old site 2 - /contact ( same path, but different page content, which needs to be preserved )
  • New site - Has two pages;
    • /contact/avondale The Avondale branch
    • /contact/smallville The Smallville branch

This is a conflicting redirect. Webflow only supports relative paths, so only can only redirect /contact to one location, and you will not have the benefit of knowing the origin that the user is redirecting from.

STEP 3 - Create your CSV and import your redirects

The final step is to create Webflow's 301 redirects CSV file and import it.

IMPORTANT: Currently, Webflow will overwrite any existing redirects when you do a CSV import. If you have already established any redirects in your new site, make certain they're included as part of your new CSV.

Conflicting Paths

The "easy, crude" way to handle this kind of conflict is to just not handle it.

You'd create a /contact page on new new site, which in our example won't need a redirect since the path matches. On that page you'd list both clinics and make the user click a link to get to the specific branch contact page.

Or, you re-engineer the site so that the contact us page is combined to sidestep this problem entirely.

Origin-aware redirects

This is a way to distinctly detect and redirect those URLs separately, e.g.;

  • https://www.avondale.com/contact can be redirected to /contact/avondale
  • https://www.smallville.com/contact can be redirected to /contact/smallville

However this must happen before the request reaches Webflow.

The way we do this is to use Cloudflare's DNS and redirects in order to process the redirection earlier.

There are complexities to setting this up, both in Cloudflare's redirects syntax, and in the proxy switch setup in Cloudflare which necessitates a special Webflow DNS setup.

If you want to do this, research Webflow reverse proxy DNS setups on Cloudflare to find a solution you like, and then you'll have full ability to redirect requests to your Webflow-hosted site.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.