How to migrate from Wordpress to Webflow [+ Checklist]

Are you thinking about migrating your Wordpress site over to Webflow? Is everyone telling you how amazing Webflow is? Or have you already used it before on another project?

Then this article is for you.

We will take a closer look on how to decide if a Wordpress to Webflow migration makes sense and then walk you through it step by step.

Over the last 15 years we have built hundreds of websites on both Wordpress and Webflow and for most websites, a migration makes total sense - but there are also some things to know before you take the leap.

If you prefer to watch a video instead of this article you can watch this one we created:

What we will cover

The basics

The comparison that we are about to do is a David vs. Goliath. Wordpress is used by 42% of websites worldwide. In comparison to that of Webflow, which is used by only 0.7% of websites.

That means you will find way more content covering each aspect of the Wordpress software and at least 10x more people who have built plugins or templates for Wordpress.

And just to be clear, You can build great websites on both platforms.

Nevertheless, Webflow is on the rise and every website we have built since 2020 has been on Webflow.

About Wordpress

The first version of Wordpress was released in 2003 by Matt Mullenweg and Mike Little. It is an open-source content management system (CMS) and has for sure revolutionized the way websites are created and managed.

Initially Wordpress started as simple blogging platform but over time more and more aspects were added that made it the most popular CMS in the world. Wordpress is known for its customizability and is used by small blogs to large corporates alike.

The core of Wordpress are the features that allow you to create and publish content. Over the last 20 years hundreds of thousands of developers and designers have built plugins and themes for Wordpress that can easily be installed.

Wordpress can be installed on your own servers or run through a managed hosting provider (e.g. Wordpress themselves or literally any other hosting service).

About Webflow

Webflow was founded in 2013 with the goal to build the best website builder in the market. The idea was to focus on designers, that could use Webflow as a SaaS tool to build custom websites without the need for extensive coding knowledge.

Webflow gained popularity quickly for its ability to emphasize on visual design coupled with powerful functionality (e.g. through their visual editor). While designers use the tool, Webflow automatically generates HTML, CSS and Javascript.

Similarities between Wordpress & Webflow

The reason you are reading this article is because you need a tool to build a tool to run your website. Sure, you could also code it yourself but there are tons of reasons why you shouldn’t do it.

The most common similarity between Webflow and Wordpress is the content management system (CMS). Both let you input, and store content in an easy way (so that even people without tech knowledge can do it) and showcase it in a visually appealing way.

At the same time both tools offer visual design capabilities. WordPress, with its classic editor and page builders like Elementor and WPBakery, allows users to design sites without coding. Similarly, Webflow provides a visual editor that lets designers create responsive websites using a drag-and-drop interface. Both platforms can be used by non-techies as well as professionals.

Wordpress and Webflow can both be extended through plugins and extensions. Especially with Wordpress there is a huge repository of plugins that range from SEO optimization, social media integration to even turning your Wordpress website into a full blown eCommerce shop. Webflow doesn’t have such a wide range of extensions but through custom code the basic functionality can be extended. In conclusion, both platforms can be tailored to meet the specific needs of your project.

Last but not least, both WordPress and Webflow benefit from active communities. WordPress has a massive global community with countless forums, tutorials, and third-party resources. Webflow, while newer, has rapidly built their own community, including an extensive online university, forums, and community events.

Differences between Wordpress & Webflow

One of the main differences between the platforms is the hosting environment. Webflow is a fully managed, hosted solution. This means that Webflow takes care of everything that relates to security, backups, updates and also the hosting itself. It serves as a normal SaaS (software as a service) solution. In comparison to that of Wordpress which can be self-hosted, giving you the full flexibility but also responsibility of your site. This means you can customize literally everything but at the same time it requires more technical management (Side Note: There are also providers who offer a managed Wordpress service).

Getting started is probably easier with Wordpress because there are way more themes, plugins and tutorials. WordPress is often recommended for beginners and those who prioritize ease of content management over design flexibility. Webflow in comparison is built with the professional designer in mind. It requires a good understanding of web technology and design principles. The interface can therefore be a bit overwhelming at first.

Another big difference is the pricing structure. Wordpress is an open source software, that is free to use. If you’re running it yourself, there will obviously be costs like hosting, plugins and premium themes that you are buying. Most of the time it is still seen as more cost-effective for basic sites. Webflow is operating on a subscription model where you pay a monthly or yearly fee, which includes hosting and the use of the platform. The features however will differ depending on the plan you choose.

While both platforms offer a lot of customization options, they differ in type. WordPress offers deep customization especially in the area of functionality through thousands of plugins and themes, both free and paid. It has a massive ecosystem that allows users to extend functionality almost indefinitely. Webflow mainly focuses on robust design customization tools directly in the browser. There are few third-party extensions that will extend the functionality.

Another big difference is the level of technical knowledge that is needed. Webflow is generally less reliant on coding, though knowledge of HTML, CSS, and JavaScript can enhance a user's ability to customize sites. WordPress, while user-friendly at the basic level, allows and often requires deeper development skills, especially for custom theme and plugin development. WordPress's use of PHP as a backend language also opens up more possibilities for integrating complex server-side processes.

Should I migrate from Wordpress to Webflow?

This is probably the main question running through your head. And I promise there will be an answer at the end of this article. But let’s start our journey with some thoughts about why it makes sense to migrate from Wordpress to Webflow in the first place.

And there must be good reasons in the long term as the whole migration process will take time, effort and in most case money.

Reasons to go from Wordpress to Webflow

1. Better Design Flexibility: The visual builder of Webflow offers a superior design control allowing for more creative and sophisticated designs without extra coding knowledge. There are also page builders for Wordpress but most of them don’t offer the same level of flexibility. Furthermore it will be much easier to use animations on your website.
2. Easier User Interface: Webflow’s whole interface is more intuitive to use - no matter if you are a designer, developer or end user.
3. Responsive Design from the start: Webflow provides easy to use tools to build a responsive design that works for all screen sizes so that you can make sure your website looks great on every device from mobile to desktop.
4. No need for Plugins: The one thing I dislike most about Wordpress is that you need tons of plugins for additional functionality. Every plugin comes with not only a security risk (because they are often developed by a third party) but also makes the website slower and over time harder to manage.
5. No Plugin hassle: Imagine you have >20 plugins installed that need to be updated on a regular basis and also be checked if they work with the newest Wordpress installations.
6. Better Performance: It’s pretty easy for your Wordpress website to end up quite clunky. Most of the Webflow websites are the opposite as Webflow generates clean code and there are no third party plugins. Furthermore the team at Webflow takes care of a lot of optimization work when it comes to things such as servers and website speed.
7. Better SEO: Webflow has a huge range of SEO tools included that make it easy for you to optimize your websites for search engines - and ultimately bring over more users to your page. In Wordpress most sites would probably rely on Yoast SEO for that.
8. Enhanced Security and No Need for Regular Updates: All Webflow websites are hosted by Webflow - which means they take care of almost all security measures in comparison to you doing it yourself in your Wordpress installation.
9. More Security: Furthermore WordPress requires regular updates for themes, plugins, and Wordpress core system. That can be time-consuming and if not managed properly end up in a security risk. Webflow manages these updates automatically in the background.
10. CMS that can be used by everyone: Webflow’s CMS is highly customizable, still very easy to use, has different roles and offers a more streamlined experience compared to WordPress's more complex CMS.
11. Save Money: Most people would say Webflow is more expensive than a Wordpress website but I encourage you to also take into account the costs in the long run for Wordpress plugins, maintenance work and the additional developer hours.

As you can see there are ton’s of reasons to pick Webflow over Wordpress.

Reasons to stay on Wordpress

But as always in life there are also a couple of reasons that are in favor of staying with Wordpress.

1. 100% Ownership of your data: Wordpress is open source and can be hosted on your servers. That means that you have full ownership about every process that happens and every piece of data that is stored.
2. Flexibility of Dynamic Applications: Webflow is built to create “content” websites and basic dynamic functionalities (like Forms, FIlters etc.). It is not the best choice if you think about creating larger applications (however you can build them also with Webflow and tools like Wized). Initially Wordpress was the same - it started as a blog CMS.  But with over 20 years of history people started to build all sorts of crazy stuff with Wordpress. From eCommerce shops to communities and apps.
3. Huge Community: If you have a Wordpress issue or idea there is almost a 100% chance that someone has already found a solution for it. The community is huge and there a endless themes, plugins and tutorials. With Webflow there is also a community but it is still way smaller.

Making your plan - The areas of migration

You made the decision to move your website over. Great! So let’s get started.

Backup your current Wordpress Website

As a very important first step you should backup your full Wordpress website. In case anything goes wrong it allows us to move quickly back to a time when the website worked without loosing to much time in pulling the data back together.

1. There are couple of ways to backup your Wordpress website. For the sake of ease we are going with the UpdraftPlus plugin here.

2. Click backup

3. Save the backup to your computer

Benchmark your current Website

Another important step is to benchmark how your current website is doing. Our main focus here are the SEO rankings (= so on which position in the search results is your website shown on a specific keyword). You want to make sure you are not loosing too much of your organic traffic through your migration.

‍

The SEO side of your website migration is one of the most important ones as this is often the main source of problems. But despite all the risks there are also tons of upsides and you will even have advantages through an increased performance.

SEO Performance in SEO Tool

One way to benchmark your current website is to use any of the well known SEO tools like Semrush or Ahrefs. In the tool itself you can do the following things.

1. Run a site audit to see how your website is doing as a whole
2. Export the keywords your website ranks for (just simply export a .csv or .xls file and store it)
3. Enable a position tracking (You can upload a list of important keywords that you want to track and the tool notifies you if there are significant changes in the position of this keyword e.g. if a link is broken Google will drop the position of your keyword and the SEO tools points you to the potential issue)

Search Console & Google

The second tool we can use to benchmark our current SEO performance is Google’s very own Search Console. In the search console I suggest you do two things.

A) You can screenshot the overall performance over the last 30-60-90 days to get a sense on how many impression and clicks you are getting out of the search engine.

B) You can go to Search results and then export the queries as a .csv file. With this file you can easily see for which keywords you website is ranking, how many impressions you get and how many people end up on your website, because they click on the search result.

Migrate your Web Design from Wordpress to Webflow

The first big area of preparation is your web design. There are basically only two options around this and we will briefly mention them and not go too much into detail because this can be an article on it’s own.

1) Keeping your current design

If you have decided to keep your current design you need to re-develop the design you have in Wordpress in Webflow. Depending on the type of design this can be quite some work, because it is almost as if you’re developing it from scratch. And if you are not too familiar on how to do this I recommend talking to a Webflow developer that can help you.

2) New Design

If you decide to give your brand a revamp in design you can either start fresh and develop each element one by one or you can go with a template from the Webflow template market place. Be aware that the more elements you change the higher the complexity the project will become.

Meaning - if you just transfer the website from Wordpress to Webflow with the same design it is quite straight forward but if you go from Wordpress to Webflow while changing all the design at the same time there are many more things that can go wrong.

Preparing your Wordpress Content for the migration

The most important part of your migration will be the content. We want to make sure that everything that exists in the old site will also be there on the new site.

In general content can be divided into two groups:

1) Static Pages

Most of the pages on your website are probably static pages. These are pages you fill with content once and then it won’t change often. Most of those static pages will differ in the layout depending on the specifics of the page.

Examples of Static Pages:

• Home Page
• About Us Page
• Privacy Policy

All of these pages need to be moved over by you manually - “Yes. That means you need to touch every piece of content 1 by 1”.

2) Dynamic Pages & Dynamic Collections

Besides these static pages there are some pages and elements that will be more dynamic. In Wordpress these dynamic items are often called posts - in Webflow we would call them collection lists. These dynamic items are very similar in terms of their structure (e.g. blog article, team member).

Examples:

• Blog Articles
• Team Members
• Case Studies

Luckily we can save ourselves a ton of time by exporting them from Wordpress and Importing them into Webflow (”No one wants to copy over 200 blog articles”).

As mentioned before, in Webflow these items will be stored in the CMS collections. An example CMS collection would be the Blog and the CMS item itself would be the individual content piece “How to migrate to Webflow”.

When preparing the CMS collections for Webflow it is a good idea to also think about where collections would make sense. So, for example, you could have all of your team members on a static page right now. But they change often and you might want to show them on more than one page. Then it makes more sense to move them over to a Webflow collection.

When does it make sense to use a CMS collection?

• Content that is edited a lot
• Content that will have new elements regularly (e.g. events)
• Content that is used on different sub pages (e.g. case studies)
• Content of similar structure (e.g. blog articles)
• Content that is edited by different people (you can invite up to XYZ content editors on your Webflow plan)

‍

Preparing a page list

To get an overview of all of the static and dynamic content pieces we just talked about, we want to setup a Google Sheet with all the pages inside.

Our goal is to use this sheet throughout the migration as our one source of truth. Our concrete Steps will be to:

A) List out all the pages we have on the website right now

B) Mark which of them are static & which are dynamic

C) Mark which pages will be migrated and which will not (sometimes a migration gives you a nice chance of cleaning up your website)

D) Mark the pages that will undergo a URL change and thus needs a redirect

E) Add the current meta descriptions & titles to the page

Get your page list through your Sitemap:

The easiest way to get the list of all pages on your website is the sitemap. In general a sitemap is a list of all the pages on your website that the google crawler will use to understand the structure of your website and index all the pages. In most cases the sitemap is automatically generated by the content management system - in our case Wordpress.

Note 1: In Wordpress most of the time the SEO plugin is generating the Sitemap (e.g. Yoast, All-in-One SEO) so they can look a bit different from the outside.

Note 2: Sitemaps have an XML format and can include sub-sitemaps. In this example all blog posts are a separate sitemap as well as all static pages.

Note 3: In 99% of the cases you can open up the main sitemap of your website by adding “sitemap.xml” to the URL (e.g. https://magicdesign.io/sitemap.xml)

‍

We can quickly move over all of this information from the XML file to our Google Sheet by “Copy + Past” or any XML to CSV Converter.

Find the ranking pages through “Google SERP”

Another life hack I wanted to mention is the GOOGLE SERP site search. With this search you can find all the individual pages of your website that are currently in the Google index by using the command site:”YOURDOMAIN.COM”. In our example 24 pages are indexed. This information is really helpful as these are the pages we want to make sure to redirect, so that no user tries to go to a page and lands on a 404 error page (a 404 page comes up if any user tries to access a website that doesn’t exist).

Adding the Meta Descriptions & Titles

One content piece that a lot of people forget are the Meta Titles & Descriptions. Both of them help the Search Engine to understand what your website is about and guide visitors looking for your website because they are shown in the search results.

We want to copy over the current Titles + Meta Descriptions for each page to our page sheet so that we can add them to our new website easily later on.

If your Wordpress SEO plugin doesn’t have the ability to export all of them I highly recommend “Screaming Frog”. Just type in the URL of the website and the software will give you all of the right information back in a cleaned up format.

Find images that are relevant for the migration

In general Wordpress stores your images in the media library - in comparison to that in Webflow they are stored in the assets panel.

From a visual standpoint you will move over most of the images during the process of creating your design in Webflow, importing the static content manually or by importing the dynamic content through the import feature we will talk about later on.

But one aspect that is often missed in migrations are the sources that are pointing to your images.

For examples Google often shows images in the SERPS (Search Engine Results Pages) to improve the user experience. So let’s imagine you have written an article about the competition slide in a pitch deck and have created some cool examples slides. Google will link to these images as shown in the image above and there might also be other websites that link to your image.

That means that in an ideal scenario you would make sure that for the relevant images you tell Google that you moved the image over to your new website.

One way to find the relevant images is to use the Search Console. If you go to search results in the left navigation you can then use the “Search Type Filter: Image” on the top and the results show that our images get some significant impression and a decent amount of clicks.

Side Note: Obviously the bigger the website and higher the reach the higher the numbers will be in here.

From the “Pages” tab you can then find the articles the images are on and decide if you want to redirect them.

Side Note 2: Obviously in an ideal world you would redirect every single image but this is not very “easy to do” manually. So if you have one of these pages make sure to reach out to us for additional information on how to automatically do it with a script.

It is a good idea to put all of the image URLs that you want to redirect in your Google Sheet to keep track of them and then later on initiate the redirects. Setting up 301 redirects from your old image URLs to their new URLs enables you to leverage the SEO value that the images accumulated over time.

Side Note 3: In this article we will not cover how to find out if your images also have backlinks from other websites. You can use tools like Ahrefs for that and handling these image redirects with the same care will also help you avoid losing their value by mistake.

Files

Something similar we have seen often are files that were uploaded on Wordpress and linked to your website (or even newsletter). These can often be .pdfs that will be lost once the Wordpress website goes offline.

To find these files you need to go to the Wordpress media library and search by filetype. Then you can manually go through the list and mark the files that need attention (Side Note: all of these files were already downloaded in the backup step of this guide). Add them to your Google Sheet to remind yourself of setting the redirect whenever you setup the Webflow site.

Functionality (e.g. Forms)

Another important step when migrating your website is to pay attention to dynamic functionalities, scripts and forms.

Forms

Let’s start with the forms. First, you need to make a list of all the forms on your website (in our Google Sheet). Write down where the form is located, how the form is built (e.g. embed through a third party provider like Mailchimp), and what happens with the submission.

Example:

• Contact Form: The WP Forms plugin is used to create a form in which the visitor of the website can leave a message that will be sent to the owner of the website via email.
• Demo Booking Form: A calendly embed is used to make it possible to book a demo for the visitor.
• Newsletter Signup: A form from the email newsletter tool (e.g. Mailchimp) is embedded and every submission is forwarded to the newsletter tool.

In Webflow you can either A) build these form natively or B) also embed the scripts from the third party tools.

The advantages for Webflow native forms are that you have unlimited styling options, quicker loading times and reduce the amount of external code on your website. On the downside you need to handle the form submission yourself.

The advantages for embedded forms are that the third party is handling the form submissions and uses them directly in their tool. On the downside the styling options are limited and it makes your website slower.

Tracking Functionality / Scripts

To have a proper migration we also need to take a look at all the tracking that is setup. Mostly we talk about Tracking Pixels like Meta, Google, etc.. You either have them set up through your Google Tag Manager Account or directly in Wordpress (or any third party plugin).

The most common scripts that you will find on a website are probably google analytics, cookie banners and every kind of Social Media Tracking (for Meta ads).

A classic example is the tracking of a form submission so that you know if a lead was coming through a social ad or not.

Besides the tracking pixels most websites have some external scripts included. This can be things like Google Analytics or a Cookie Banner.

Write down all the scripts and trackings that you have in your Google Sheet so that you don’t miss them in the migration process.

Other Functionalities

On many websites there are also other kind of dynamic elements. These can be lists, embedded reviews, calculators, etc. Go through your website and list all of them in your Google Sheet so that you can keep track and think about solutions to transfer them later on.

It is also a good idea to check the list of plugins in Wordpress to see if you are missing anything (because most of the time this dynamic functionality is added through plugins in Wordpress).

Technical SEO (301 Redirects)

In the previous paragraphs we were talking a lot about redirects to make sure that both your website visitors as well as the Google crawlers end up on the expected pages.

Redirects are probably the most important thing to understand while doing a full website migration. That’s why I want to spend some time explaining them in detail.

Each page on your website has a specific URL (e.g. https://yourdomain.com/blog-article-1) that consists out of two things. 1) your Top Level Domain (TLD) (https://yourdomain.com) and 2) the URL slug (”blog-article-1”).

Important Side Note 1: A bit hard to understand for most non-technical people but an important thing to know is that yourdomain.com and www.yourdomain.com are not the same thing. In 99% of the domain setups there is one default domain and the other one redirects to it all the time (e.g. www → non-www). Important because Google only want’s to see the main version.

Why is this important for us?

While migrating two things can happen. In the first case your domain (with or without www) stays the same or in the second case the default domain is changing (most of the time this depends on your domain provider and how they play together with the Webflow settings.

Looking at the slug of the URL we try to keep them the same in the new website (e.g. on Wordpress the URL was https://yourdomain.com/blog-article-1 and on Webflow it stays https://yourdomain.com/blog-article-1) as on the old one. But there’s a chance that out of technical reasons that’s not always possible.

Example: Instead of https://yourdomain.com/blog-article-1 the new URL will be https://yourdomain.com/blog/blog-article-1. If that’s the case we want to make sure we tell Google and any visitor about the change. And we can do that by using 301 URL redirects.

What do they do?

Whenever someone tries to access https://yourdomain.com/blog-article-1 we are sending them to https://yourdomain.com/blog/blog-article-1 with the additional information that the domain is permanently moved.

What can go wrong

As you already see moving from Wordpress to Webflow is not the easiest thing to do and there are tons of things you need to take into consideration. Especially the bigger the site the more can go wrong.

Here are the top 5 things that we screwed up on previous migrations that you can learn from:

1. SEO breaks and Visitors land in no-mans land

Our number one priority in the migration is to make sure that all of the visitors that want to come to our website land in the right spot. What do I mean by that? If someone has a specific blog article from your website bookmarked we want them to end up on the same blog article after the migration. Same goes with another website that is linking to a resources on your website.

And most importantly Google as the biggest search engine and traffic driver. Let’s imagine a user is searching for a specific keyword and one of your articles is ranking up high in the SERPs. If the URL stays the same everything will be good because they will see the identical content on your new site.

But chances are high that some of your URL structure will change in the migration and so we need to tell Google where to find the new article (e.g. yourdomain.com/article-1 → yourdomain.com/category/article-1).

If we are not doing our job properly on this you might loose a lot (or even all) of your traffic from Google, because your users could end up on a page that does not exist and get an error. Google will see this as a sign to drop your website out of the search results.

2. Missing Content or different content structure

Another issue that comes up regularly when migrating a website is content that goes missing without you realizing it. This can be blog articles, certain sections of the website or full pages. That’s why it is very important to have a full list of things that need to be migrated before and checking afterwords if everything worked out.

It is also a good idea to monitor potential errors in the Google search console to see if users end up on a page that is not existing anymore.

3.  Missing Functionality

I am sure you will at some point come across a functionality you had before that won’t exist in Webflow. This could be something simple as internal linking in your blog posts (you can do that also with Webflow but not as easy) or having the opportunity to install a plugin to do something real quick.

If you encounter a moment like this always keep in mind that A) this can also have benefits for you in the long term (instead of just installing a plugin that bloats your whole website) you might need to think of a cleaner way to do it and B) there are tons of workarounds to come up with the same result.

Just be aware that there will never be a 1:1 functionality in both CMS.

4. Issues with user adoption

Looking at the pure technical setup of the website is one thing - do we have all pages, images and are all the forms and scripts working. But changing the CMS also means changing the interface on how to use a website from the editor view. You might have people on your team that were used to work in Wordpress for a long time.

And from one day to the other they should use a totally different tool. Make sure to have a proper training of your team to make them not only understand on how to do their job in the new CRM but also understand the basic similarities, differences and principles of Webflow and Wordpress.

5. Not everything working 100%

I imagine that your previous website was running for months or years before you decided to migrate. That means that thousands if not hundreds of thousands of visitors were using it. Including those trying to fix potential issues and bugs.

For sure you will also be doing some functional testing with your new site to ensure it functions as intended and check the responsive design to make sure everything looks good across all devices. But it is still a new site and not everything will be perfect from the start.

So keep your eyes open also after the migration to make sure to fix any issue over time.

The Migration from Wordpress to Webflow

After we have done a lot of the preparation work we are finally ready for the actual migration. Make sure to download our Migration Checklist that will guide you along the way.

Export the content from Wordpress

As mentioned before, we can’t transfer all the content automatically. Most static pages need to be transferred one by one. But luckily we can export some of the dynamic content (like posts) in a CSV file.

To do that we need a plugin called WP All Export.

You can customize your exports in the plugin as you like and also include data that other plugins are adding to the database (e.g. Meta Descriptions).

But for the easiest export you can simply choose “Post” and then click the “Migrate Posts” button as all relevant information will be included.

Setting up the CMS structure

As a next step we need to setup all the CMS collections we need in Webflow. For that you need to know which collection lists you need and the properties for each one.

Let’s go through the example of the blog article. Each of our blog articles should have the following information

• Name
• Slug (/blog/)
• Short Description or Summary
• Author
• Creation Date
• Content
• Main Image

In Webflow you can easily create these properties in the CMS and pick the respective fields. If you want to learn more about how to setup your CMS collections we have created a video here.

As another example we can have the list of our team members with the following properties:

• Name
• Title
• Image
• Description
• LinkedIn URL
• Email Address

As you can see, this is a quite manual step but there is no way around it.

Upload the CMS Content (Mapping)

In the next step we want to import all the posts that we exported before from Wordpress into Webflow. To do that you go to the Webflow CMS and click Import on the top right. Then you drop in the .csv file and a new user interface comes up.

Your task is to match the columns / fields from the old structure to the new one.

So for example:

• Slug ⇒ Slug
• Content ⇒ Post Body
• Date ⇒ Date
• ….

In most cases you will probably only map some of the fields and not all because there is a lot of useless information in the export.

‍

Adding the content / images etc.

After you migrate the CMS content it’s time to migrate your other content from the website. As I mentioned before you need to do a 1:1 rebuild in the Webflow designer. Most likely you will already have done that during the design phase of the website design.

On Page SEO (Meta …)

Another thing you should do in the next step is to add your Meta Descriptions and Page Titles to Webflow. You can use the Google Sheet we prepared for that and simply paste them into the respective fields in Webflow.

If you have some spare time you can also take the opportunity to improve them.

Webflow Best Practices

After the launch there are a couple of things you can do to optimize the website.

Favicon

Make sure to go to the Webflow settings to upload the favicon for your websites. It’s the small icon that is in the navbar and Bookmarks bar of every browser. You can easily do that in the Webflow project settings.

Sitemap

In the process of the migration we came across the sitemap a couple of times. For our new Webflow site we want to make sure to also have one and ultimately make it easy for Google to understand the structure of our website.

You can setup the auto generation of your sitemap in the Webflow settings. It will not only list all the pages, blog articles, CMS collection items on your website but also update whenever you add something new.

You will find the sitemap on the following url (yoururl.com/sitemap.xml) and after you finished the migration it makes a lot of sense to submit the sitemap to Google Search Console to let Google know the migration has happened.

Image Compress

First of all, you can compress your images if you have not done that during the design process. The size of your images matter if you want to provide a great user experience driven by fast loading times.

Especially on mobile devices huge file sizes can slow down your website drastically and even negatively influence your rankings on Google.

Rich Snippets / Structured Data

Another cool thing you can do is to add structured data to your website. Structured data and rich snippets are concepts used primarily in the context of search engines and SEO (Search Engine Optimization). They will enhance the way web content is presented in search results.

So whenever you see the search results in Google like the one above it’s very likely that the website used rich snippets. The most commonly used ones are.

• Reviews: Displays star ratings and review counts.
• Events: Includes information about upcoming events, such as dates, locations, and ticket availability.
• Products: Provides data on price, availability, and product ratings.
• Breadcrumbs: Displays a navigation path for the webpage.

If you want to learn more about it please check out our YouTube video here.

Minify CSS & JS

One other small hack to improve the loading times of your website is to minify the HTML, CSS and Javascript. Webflow has a feature to do that automatically and you can simply use it by going to the Settings > Publishing tab.

Prevent Webflow Subdomain from being indexed

In the next step, you should also disable indexing for your staging domain in the settings. The staging domain is a separate domain in Webflow that is used for testing and development purposes. You can push your website live there before deploying it to the main domain to do all of your tests.

But obviously you don’t want to have this domain appear on Google so that’s why you disable the indexing for the domain.

Add external scripts

The next thing to migrate are your external scripts. As you have them all in one place (your Google Sheet) it’s quite easy to go to the Webflow settings and just paste them in there.

Side Note: You can either paste your scripts directly or use Google Tag Manager. Tag Manager let’s you manage your external scripts and create one unified code that you can embed in Webflow. Both ways are fine, however, the Google Tag Manager is best practice.

Tracking

As part of the scripts you will surely think about tracking. There are things that are set up automatically by implementing the scripts (e.g. page view tracking) but you might have had other events firing on your Wordpress website before. For Webflow you need to manually set them up again.

How to do that would go beyond the scope of this article but keep it in mind.

Migrating the domain

As already mentioned a couple of times the number one thing that can go wrong on any migration is messing up the domain migration.

But since we prepared well the process should be smooth for us.

In the first step we want to add all potential redirects to the Webflow project. To do that go to the Publishing tab of the projects settings.

As we have already prepared the redirects in our Google Sheet we can simply paste in the old and new path one by one.

So, for example, if the old URL was (https://yoururl.com/old-blog) and the new one is (https://yoururl.com/new-blog) we would paste in on the old url (”/old-blog”) and new one (”/new-blog”).

The final step is to now connect the domain from your domain provider. As the domain is currently pointing towards the Wordpress server we need to first unlink it.

1. Take a screenshot of your old records as backup.
2. Set the nameservers of your domain to use the default nameservers of your registrar or DNS host if they are set to custom. For support, contact your registrar’s helpdesk or see their help documentation on nameservers.
3. Remove all A records on the root domain (host @ or yourdomain.com)
4. Remove all CNAME records on the full domain (host www or www. Or www.yourdomain.com)
5. Remove all CNAME records on any subdomain you want to point to Webflow (ex. Host blog or blog. Or blog.yourdomain.com)

Afterwords you can now point the domain to the Webflow website.

1. Go to publishing and click the button “Add a custom domain”
2. Set the A records and CNAMEs to the right values that are now shown
3. Set the default domain (either with or without .www) ⇒ Important: use the same version as before
4. Publish you Webflow website

Side Note: It can take a couple of minutes (or in theory even up to 24h) for the domain change to show.

Now you are done and you can find your Webflow website under the real domain. You can also try any redirects that you included by just typing in the old URL and seeing if it redirects you to the new one.

Check for potential issues

If everything went right to this point your website is now shining in Webflow. Nevertheless we want to make sure to catch any potential issues that we didn’t see before.

404 Issues

Our first hint are 404 error messages. A 404 error, also known as "404 Not Found," is an HTTP status code indicating that the server could not find a requested resource. This typically means that the webpage a user is trying to access does not exist on the server.

You can see the 404 errors of your website in your Google Search console. As a small side note,  a 404 error can also be shown if a user typed in the wrong URL. So make sure to check if there is really an error (for example a missing redirect) or not.

Check URLs

Another very simple but effective way to see if any redirects don’t work is to just open up the Google Sheet with all the URLs you had on the website before and click through them one by one to see if you end up on the correct page.

The full Wordpress to Webflow Migration

I hope you enjoyed this article and can avoid making some mistakes I made over the years. If you are ready to migrate your own website you can download our full Wordpress to Webflow Migration checklist below.