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.
FAQs
Answers to frequently asked questions.