Introduction
Lack of design freedom in Wordpress
Dependency on third-party hostingMaintaining your siteSetting up your websiteUpdating your site’s contentSite speed
Content migration algorithm
Exporting Wordpress contentImporting content to WebflowImportant note
Pay attention to images
If you are allowed to manage DNS settingsIf you aren’t allowed to manage DNS settings
SEO tips
Setting up 301 redirects Meta titles and descriptionsAlt tagsRobots.txt and sitemapGoogle Analytics and Google Tag ManagerOpen Graph images
DNS settings
If you are allowed to manage DNS settingsIf you aren’t allowed to manage DNS settings
More things to consider “just in case”
Summary

Introduction

According to independent researchers, Wordpress is the most popular CMS on the web - its market share is 64%. In addition, 39% of all the websites in the world are powered by Wordpress. Sounds quite impressive, right?

However, despite Wordpress being the number one choice for many site owners, a certain number of them decide to move their projects to Webflow some day. Why is that? Let’s outline the common reasons.

Lack of design freedom in Wordpress

If you want to customize the look and feel of a certain section of your Wordpress site, it may turn out that the theme you use doesn’t allow you to make the edits you want. If you have some PHP and/or CSS knowledge, then you have a leg up here. If you don’t, you will need to look for an alternative theme most likely.
With Webflow’s Drag-and-Drop editor, customization of a certain website section will take you just a few minutes.

Dependency on third-party hosting

Wordpress doesn’t provide integrated hosting services, which means that your website is going to be stored on third-party hosts.
Contrary to that, Webflow provides the best hosting in the industry using Amazon Web Servers. They are the fastest on the market and provide a 99,99% uptime guarantee.
Even better is that it’s very easy to setup the hosting (which is almost never the case with WordPress if you’ve ever done this before).

Maintaining your site

WordPress sites constantly need to be updated and taken care of on a monthly (if not weekly) basis. This includes making sure that both the WordPress system itself and any plugins you have are running the latest versions. The real tricky part about this is that sometimes when you make these updates, it will create errors in other parts of your site that aren’t compatible with these latest updates.
With Webflow, there is no such thing as updates. You’ll never have to worry about this.

Setting up your website

With Webflow, it takes a few button clicks and less than 1 minute to have your website setup and ready to build. The process to set-up a WordPress site is not as simple unfortunately and includes a bunch of back-end configurations and installations to get going.

Updating your site’s content

Once the website is built in WordPress, it’s not always intuitive for you to be able to make simple site updates such as: editing text, changing images, adding blog posts, etc.
Webflow makes these tasks extremely simple using it’s easy-to-use visual editor.

Updating your site’s content

Once the website is built in WordPress, it’s not always intuitive for you to be able to make simple site updates such as: editing text, changing images, adding blog posts, etc.
Webflow makes these tasks extremely simple using it’s easy-to-use visual editor.

Content migration algorithm

The common fear associated with the website migration is the fear of losing some parts of your content. We are going to show you the proven method of transferring data, so that no content is lost.

Exporting Wordpress content

The first step is to export the content you have on your Website and to save it. How to do this?
We recommend using WP CSV plugin which allows saving your website data as a CSV file. You can download it here. After you install the plugin, you can start configuring your export settings. In particular, you need to take the following steps:

STEP 01
Go to WP CSV settings;
STEP 02
Specify the content you want to exclude from the export (everything left unspecified will be exported);
STEP 03
Press the “Export” button and download the CSV file with your content

Great, export is done!

Importing content to Webflow

Now, let’s move to importing your content.

STEP 01

Go to the Collections Panel in your Webflow project (if you don’t have a project yet, then you will need to create it);

STEP 02

Create a new collection;

STEP 03

Import the CSV file that you exported previously;

STEP 04

Match the fields from your database with the fields in your Collection. You free to create your own fields if needed.

Important Note

File field, reference field, and multi reference fields cannot be mapped at the time of creating this guide.

Pay attention to images

The topic of images and how they work during import deserves special attention. The better you understand the process from the inside, the more seamless your website migration will be for you.
So, there are actually two ways to process images during the data transfer. Let’s look at each of them in more detail.

1) Images are mapped to the image fields in the CMS

As long as you have all the image fields in the Webflow CMS correctly mapped, the images upload will be implemented automatically. It’s a good way to save time and effort.

2) Images are mapped to rich text fields

Another scenario assumes that images are mapped to a CMS rich text field. In this case, they are imported by means of their source URLs. Obviously, to make the images display correctly on your new Webflow website, you will have to check whether the source URLs for those images are functional.
To avoid mistakes under this scenario, we recommend downloading the images from rich text fields and uploading them to CMS manually. Why? Because this way, even if the original site is down, nothing will break.

SEO tips

So, we have figured out the algorithm for migrating Wordpress site content to Webflow CMS.
Having this done, you might think: how do I prevent a drop in SEO performance and maintain the website position in SERP? These concerns can be strengthened by the fact that WordPress is considered the most SEO-optimized platform, and changing the CMS may negatively affect the SEO rankings.

We’ve got these SEO related questions covered as well.

Setting up 301 redirects

Why are 301 redirects important?

First, you obviously don’t want users to land on the broken pages.
Second, you don’t want to lose the existing back links.
Third, you don’t want to lose your SEO rankings. Sounds convincing enough to make sure that 301 redirects are at place, right?

Setting up 301 redirects is not difficult in Webflow. You can choose to set up redirects either for a single page or for an entire folder of pages.

To redirect a single page:

  • Go to the Project settings;
  • Fill in the fields “Old Path” and “Redirect to Page”;
  • Press the “Add Redirect Path” button.

To redirect an entire folder:

  • Go to the Project settings;
  • Add a capture group from the old URL structure in the “Old Path” field;
  • Add the target path for the new URL structure in the  “Add Redirect Path” field;
  • Press the “Add Redirect Path” button.

That’s it!
To make sure nothing is missed out, it may be worth creating a spreadsheet with the list of all the website pages. This will help you ensure that all the redirects are covered, but obviously, this method makes sense only if you have not so many web pages.

Meta titles and descriptions

Meta titles and descriptions are essential for a website optimization. They are used by search engines to determine the webpage ranking position. These meta tags are actually what a user sees when a site appears on a search engine results page (SERP). Neglecting these elements may cause a SEO performance drop, and this is totally not what you want.

You can edit the SEO settings for any page in your project from the Page settings.

To do this, go to the Pages panel → SEO settings and add your SEO meta title and description in the SEO Settings section.

Beside setting up meta tags for specific pages, you can define the patterns used by all the pages within a Collection for meta titles and descriptions. Having this defined, all the collection Items will automatically pull their SEO settings according to the pattern you have set up.

To do this:

  • Go to CMS Collection Pages → SEO settings;
  • Set up the collection fields you’d like to use in the meta titles and descriptions.
Alt tags

Alt tagging images in Wordpress is known to have certain issues. The most common one is that image alt text doesn’t show in the source code after adding it in the media library.

Webflow has taken care of it. To specify an Alt attribute for an image, go to the Settings panel and fill in the “Alt” field.

You can set a dynamic alt text to an image as well. To do this:

  • Go to the Settings panel;
  • Under Image properties, check Get alt text from;
  • Select the field that contains the alt text for your images.
Robots.txt and sitemap

The robots.txt and sitemap.xml files are the most important site files for SEO. They contain commands for search robots, and thanks to them, search engines “understand” which pages to index and which not. In Webflow, you can either enable the auto-generated sitemap or write your custom sitemap.

To set up an auto-generated sitemap, go to Project settings → SEO tab → Sitemap section and turn on “Auto-generate Sitemap ”toggle. Don’t forget to save the changes and publish your site.

To use a custom sitemap:

  • Turn off the auto-generated sitemap
  • Paste your custom sitemap.xml in the text area
  • Press “Save changes”.

Next, you need to tell Google about your sitemap. To do this without leaving your Webflow dashboard, type the path to your sitemap in yourrobots.txt file. It is located right above the sitemap settings under Project settings > SEO under the Indexing section.

There is an alternative way to submit your sitemap to Google:

  • Go to your Google Search Console;
  • Select the property (website) you want to submit the sitemap of;
  • Put “sitemap.xml” into the input field;
  • Press “submit”.
Important Note

As you are testing content on Webflow, it’s better to block search engines from crawling those pages. To do this, Webflow offers a toggle in settings to ‘noindex’ all the Webflow pages.

3. Go to the Project settings → Custom Code tab, paste the tracking code to the head code of your Webflow website, and press “Save Changes”;

5. Go to the Designer in your Webflow project, and add a custom code embed element (be sure to check that it's the first thing under the Body);

6. Go to Google Tag Manager again and copy the <body> code;

7. Open the HTML Embed Code Editor in Webflow and paste in the <body> code you copied from GTM;

1. Press “Save& Close”.

Having done this, you can now copy the HTML Embed element and add it to any page on your Webflow site that you’d like to use GTM.

Important Note

Planning to reuse the HTML Embed element in the future? A good idea is to turn it into a symbol. A symbol is way easier to add to any page than creating a new custom code embed and pasting in the GTM code all the time.

Now, how do you connect GA and GTM?

To do this, you will need to set up a new user-defined variable. In particular, you need to do the following:

1. Press “Save& Close”.

  • Enter your GA tracking ID. As to gaDomain, you can put it with a value of auto;
  • Press “Submit” to publish the workspace changes.

That’s it! What’s great ahead?

Having the GA variables set up, you can start adding tags that can be further embedded into your website. By a tag we mean a code fragment that sends information to a third party (say, Google Analytics service). To add a tag:

  • Click Tags → New;
  • Create a new tag via Classic Google Analytics;
  • Enter the Web Property ID using the existing gaProperty variable;
  • Select “Page View” as a track type in case you are going to track the pages your users visit.

Similarly, you can set up tracking for other events - say, a button click on a promotion.

Google Analytics and Google Tag Manager

Be sure to set up Google Analytics to collect statistics about your site visitors. How to do it in Webflow?

  • Open the dashboard and access the Google Analytics settings of your project;
  • Put your GA ID into the Google Analytics Tracking ID field;
  • Press “Save changes” and publish.

In addition, we recommend integrating your Google Analytics (GA) account with Google Tag Manager (GTM). If you haven’t used it already, you will definitely find Google Tag Manager useful as long a sit will help you a lot with tracking your analytics, optimizing user experience and increasing website conversions.

So, how do you handle it in Webflow?

  • Signup for a Google account (if you haven’t done it already;
  • Set up a new Container - enter the name(i.e. your website) and select web as a target platform;

3. Copy the <head> tracking code foryour container;

Open Graph images

The next aspect to take care of when migrating a site to Webflow is Open Graph technology. What is it and why is it important?

This is a protocol that allows you to manage the data that is formed in the post preview when someone shares a link to your website on social media. Actually, this is done by means of a few lines of metatags that need to be embedded into the code of your site. These tags allow you to form the desired look for the post on social networks.

Thus, you need to make sure you specify images, titles, and descriptions in Webflow (or select the setting to match your SEO settings). If you don’t, your website won’t display a preview image when sharing to social media.

To do this:

1. Press “Save & Close”.

2. Enter Open Graph Title - a page's title displayed when shared;

3. Open Graph Description - a text displayed under the title;

4. Open Graph Image - an image displayed above the title and description. To add an image, you can upload it to the Asset panel first, then grab its URL and use it as an Open Graph image.

In addition, you can choose to match your Open Graph title and description to your SEO title and meta description if it’s more convenient for you. To do this, click the checkboxes below each Open Graph field. 

At first glance, it may seem that there are too many nuances associated with SEO. However, as you can see, all these SEO related features are handled natively in the Webflow CMS. So, if everything is done correctly, you don’t need to worry about SEO performance drop. Moreover, successful migration cases even illustrate an increase in visitors count and decrease in bounce rate.

DNS settings

One more aspect we’d like to highlight in this guide is DNS settings.

As long as Webflow doesn’t provide domain registrar services, you won’t be able to transfer your previously hosted domain to it. Nevertheless, you can still link your domain to Webflow by pointing it to the platform servers using the DNS settings.

For this purpose, you will need to reset your DNS settings first. This will help you avoid the difficulties that might require troubleshooting your DNS records in the future.

Some domain registrars allow managing DNS records while others don’t. So, you will have to act a bit differently in these two cases. Let’s take a closer look at both scenarios.

If you are allowed to manage DNS settings
  • Prepare a backup of your old records (a screenshot will be good for this purpose);
  • If the nameservers of your domain are set to custom, be sure to set them to use the default nameservers of your registrar/DNS host;
  • Delete all the A records on the root domain;
  • Delete all the CNAME records on the full domain;
  • Delete all the CNAME records on any subdomain you want to point to Webflow;
  • Finally, point your domain to Webflow and connect it to your Webflow project.
If you aren’t allowed to manage DNS settings
  • Move your domain to a different registrar that provides DNS hosting;
  • Alternatively, point your domain’s nameservers to a different registrar that provides DNS hosting;
  • Having accomplished the steps in p.1 or p.2, you can connect your domain to Webflow from this second DNS host’s dashboard.

When resetting the DNS settings is done, you can start updating them. At this stage you should be aware that all the DNS hosts have their own ways of updating the records. Moreover, the dashboards interfaces are not always as  intuitive as we’d like them to be. Therefore, we recommend checking the help documentation of your DNS host. Also, don’t be shy to reach out to their support service if anything seems unclear.

Ready to get started?  👉 

More things to consider “just in case”

In addition to the detailed recommendations that we have provided above, we'd like to share some "just in case" tips from our industry peers.

First, a good idea is to hold the backup documentation and screenshots of your old website. They might be helpful in case your website SEO rankings drop. This way you will have a clear picture about which pages have changed, and in what way.

Second, prepare an awesome 404 page in case some pages are missing or can't be found.

Third, be sure to follow the common sense approach. That is, always test your website from the user perspective. Prevent anything that might be confusing in any way, so that the user journey won't be negatively affected. In addition, a good user experience is the foundation for good SEO - sacrificing it for a specific technical element won’t bring you great results in the long run. Remember: Google will rank highly those results that bring value to users when they perform their search.

Summary

The process of switching from WordPress to Webflow is not as complicated as it might seem at first sight. Nevertheless, understanding the migration process will help you significantly to make the whole process run seamlessly.

Obviously, it will take a certain time to implement migration of your website to Webflow in accordance with the recommendations stated above, but the results are totally worth the effort. That is, you will enjoy the amazing features Webflow provides: the advanced customization opportunities, fast page page loading, responsive design, reliable hosting, and many more.

We hope this guide to migrating from Wordpress to Webflow will be useful for you and you will avoid the mistakes that many website owners make while transferring their projects.

You Might Also Like

More Posts
See All Posts