Introduction
WordPress used to be the absolute king of content management systems. This free, open-source platform makes it easy to launch all kinds of websites that look great with little to no coding needed. It offers customizable themes, plugins and tools that integrate with the platform. All you need to do is pay for hosting and you're ready to get started.
But the traditional WordPress today is known for lack of security, limited customization options and website speed issues as a result of buggy code and outdated plugins. Also, bigger websites often get slower performance and messy code - which is not sustainable for businesses.
So all that considered, it's not surprising that so many website owners want to migrate from WordPress to Webflow.
This guide takes you through some of the most common reasons for website migration and all the necessary steps you need to take if you want to migrate your entire WordPress website to Webflow.
Use this guide as a reference to migrate your website safely.
The difference between WordPress and Webflow
Before you move on with your migration, let's take a look at the key differences between these two platforms for building websites.
What is WordPress?
WordPress is an open-source content management system (CMS), powering over 42% of all the websites on the internet. Its plugin architecture and template system make the learning curve relatively small. Designers control the design of their website with themes while adding new features with plugins. When using WordPress, website owners have to handle performance and security by themselves.
What is Webflow?
Webflow is a visual editor that gives you the power to build responsive websites without writing a single line of code. Designers get the power of CSS, HTML, and JavaScript in an easy-to-use visual canvas. With underlying code still accessible, Webflow allows total design freedom. And it goes one step further to handle hosting, security and website performance itself so website owners don't have to stress over it.
Why should you migrate from WordPress to Webflow?
64% market share is just another indicator of how popular WordPress is.
It provides a lot of plugins and templates that make the learning curve relatively small and it's easy to use. Website owners have full control of their designs through themes while adding new features with plugins.
So if WordPress is so popular, why would you even think of migrating your website to Webflow? Well, every platform has its cons, no matter how widespread and used it is. WordPress is no different.
Some of the most common reasons for website migration are:
- Lack of design freedom:
Webflow lets you tweak and design even the tiniest element on your website, while WordPress can be pretty restrictive. It doesn't allow you to implement certain designs, features and functionalities you'd want.
- Buggy code:
WordPress offers a huge library of beautiful themes that serve as the foundation of your website. However, using a WordPress theme can make the underlying code very buggy, slowing down your website.
- Never-ending updates:
WordPress and the plugins need constant updates to keep working. The thing is that plugins are just extensions, so combining the two in a single website is super fragile - risking malfunction or unwanted changes.
- Glued to using a theme:
If you don't know how to code, you will be most likely stuck to using one of the available themes that has some technical limitations. Learning how to code is the only way of building a custom website on WordPress.
Here are some of the main Webflow advantages:
- Less development time:
Webflow's editing features make it very easy for marketing teams to take full control of the website without bugging developers every single time.
- Design flexibility:
Webflow offers powerful design capabilities for building functional and highly responsive websites tailored to your brand style and preferences.
- Hosting and security:
Webflow provides an all-in-one hosting solution and frequent security updates needed for running a successful and reliable business.
- Performance and speed:
Webflow's optimized code and hosting infrastructure provide users with better performance and loading speed, no matter the size of your site.
- No unreliable plugins:
Unlike WordPress with plugins that pose a security risk, Webflow offers native features, interactions and apps that enhance its capabilities.
- SEO is a priority:
Webflow prioritizes SEO by writing semantic code and providing tools for creating meta titles, descriptions, adding sitemaps and 301 redirects.
Common issues to consider before migrating your site
No website migration is immune to some challenges that might happen in certain scenarios. Here are four most common issues that you should take into consideration before migrating from WordPress to Webflow:
- Learning curve:
It may take some time to adjust and learn the new platform. You will also have to most likely adjust your workflow. But if you hire an expert to do this, then you have nothing to worry about - they'll educate you about it.
- Integrations and functionality:
Webflow might not offer the same range of apps and integrations as WordPress. So if you rely heavily on specific WordPress plugins, you will have to ensure those functionalities can be replicated in Webflow.
- Content migration:
Migrating entire content from WordPress to Webflow, especially if you have a larger website, can be super complex. In this case it's suggested that you hire experienced Webflow experts to assist you to avoid trouble.
- SEO impact:
Migrating your website from WordPress to Webflow could affect your search engine rankings if not done with proper SEO guidelines. Ideally you should consider hiring Webflow SEO consultants to help you out.
How to use this guide
More and more website owners are deciding to switch to Webflow. It gives you the power to build and manage responsive websites without writing a single line of code. It's a feature many don't want to miss.
In this guide, we will introduce you to all the necessary steps you must take to migrate your existing WordPress website to Webflow.
Disclaimer: The guide serves as a cheat sheet you can use to migrate WordPress content to Webflow CMS. Although this guide follows every step in the migration process, it's not an official Webflow document or a replacement for such.
If you are still unsure about how to migrate your WordPress website to Webflow after reading this guide, we are happy to help you out.
Steps to take before starting with website migration
Before migrating your website, there are a few extra steps you must take to make sure everything goes as efficiently as possible.
Your old website may not be exactly what you want it to be, but it's home to valuable content that you don't want to lose. So before you start to work on your new Webflow website, it's important to back up what you have right now. That way, if something goes wrong during the process, you can restore the backup without losing anything.
While your website is still on WordPress, you should also:
- Export database.
- Perform a sitemap analysis.
- Identify page and meta tags.
- Create and set up a staging site.
Export WordPress content
Once you finish the pre-migration phase, you can move to the next phase - exporting WordPress content. By default, WordPress exports your content in XML format, but you can use multiple other solutions.
Another way (and an easier one) is to use one of the WordPress plugins that export specific content types and fields as CSV.
We're using the Export any WordPress data to XML/CSV plugin.
Install and activate the WordPress plugin
Once you download the plugin, you will find it in the left panel of your WordPress admin dashboard. When the plugin is installed, you will need to activate it on your site in order to export the content.
Configure export settings
Now that the WordPress plugin is active, you can configure your export settings. You can specify the content you want to exclude - everything left unspecified will be included in your exported CSV.
Download your CSV
Once your export settings are configured, click on "Migrate Posts". If you are ready to continue, confirm your decision and run export. When your dynamic WordPress website data is prepared, download the CSV file.
Import WordPress content to your new Webflow website
Now we are finally coming to the part where you import your WordPress data to Webflow.
Here are the quick steps how to do that:
- First, open your Webflow project or create a new one.
- Next, open the Collections panel and create a new Collection.
- Import the CSV from your original project.
When dealing with a huge number of items, you can also selectively update existing CMS items through CSV import. Map the field or create new ones to choose exactly what you want to import.
This was just a general overview to get your content into Webflow. Now we can go step-by-step and walk you through the process.
Number of items you can import
Your Webflow plan will determine the number of Collection items you can upload. To add more than 50 items, you will need to add either a CMS or a Business site plan to your website. The CMS site plan allows you to add 2.000 items and the Business site plan allows you to add 10.000.
Specify the header row
After dropping your CSV file into the Collection, you must determine the header row. The header row contains labels defining the type of content in each column.
Once you upload your file, you will see a preview of your CSV and be able to check if the first row is truly a header. Select "Yes" to exclude the header from the import, or select "No" to include it.
But don't worry, in the next step you can againr eview your choice and check or uncheck the "Header Row" box.
Pick the right import items
Your CSV file is now uploaded and finished with processing. Next, you will receive information if some of your newly uploaded items match or don’t match any current items in your Collection.
If you have matching items, you can choose to:
- Update matching items and replace the existing matching items.
- Import all items as new, and add matching items as new.
Uploading a CSV file can be an efficient way to update the existing items in your Collection. Updating matching items will overwrite the old ones and replace them with new content from your CSV file.
Disclaimer: Without choosing a header row in the previous step, you will not have the choice to update the matching items. By not determining the header row, Webflow will not recognize any matching items and will create all items as new.
Configure fields and preview items
The columns in your CSV file will be available as fields you can configure. To configure the shown fields, you must choose which columns to map and which to leave out.
In this step, you’ll configure the fields by choosing which columns to map and which to leave out. You can also create new fields for each column.
Disclaimer: If your CSV header names match existing field names, they will automatically map to eachother. Therefore, you can skip this step.
Import the mapped data
When you are done configuring your CMS fields and CSV data, click the import button to add data to the Collection.
If some items fail to import, you will see a list of them, including the cause for failed import and a link to download an error report summary.
Webflow insight: A pre-import version of your site is created, which you can restore in the backups tab from your site settings. In that case you have a backup if anything goes wrong.
Migrating the images
Transporting the images to a Webflow page is an essential step of the migration process. There are two different ways of image processing.
Option 1:
Images are mapped to the image fields in the CMS. Correctly mapped images in the CMS will all implement automatically to your new site.
Option 2:
Images are mapped to rich text fields instead of image fields. Therefore, images use their source URLs for mapping. To display them correctly on your site, you must inspect the source URLs for those images.
Inspecting URLs will give you a clear overview of whether they function correctly. There is a "fool-proof" strategy you can take in this second scenario. Download the images from rich text fields and upload them to your CMS manually.
Prevent a drop in your SEO performance
Migrating your site to another platform and losing all your hard-earned SEO juice would be the worst-case scenario. Luckily, taking a few extra steps will prevent you from this ever happening in Webflow.
Set up 301 redirect paths
When you build and develop your website, the existing pages are often no longer relevant and thus deleted. But sometimes they are not deleted and only change the location.
301 signals a permanent redirect from one URL to another, automatically redirecting users trying to access the old URL to the new one.
Webflow allows users to redirect a single page or an entire folder. Let's take an example to make our explanation a bit more clear:
A while ago, you published a blog post with the URL "/blog-post-2021". One year later you do a content update and change the URL of the same blog post to "/best-blog-post-2022". When users will search for a blog post with the "/blog-post-2021" URL, 301 redirects will automatically send them to the new URL. 301 redirects are responsible for informing Google engines where your content is.
Doing 301 redirects on Webflow is super easy:
- Open Site settings > Publishing tab > 301 redirects
- Enter the old URL in the Old path field
- Add the new URL in the Redirect to path field
- Publish your website
Optimize meta titles and descriptions
Meta titles and descriptions play a huge part in your Google ranking performance. Search engines use this information to determine the webpage ranking position. Neglecting these elements may cause an SEO performance drop.
You can see them appear when you browse your search query in Google. It's the text you see before entering the actual website. The meta title acts as a name tag in the HTML and helps Google understand the point and content of your page. A meta description is an HTML element that gives the user a summary of a web page.
To edit those elements:
Go to the Pages panel -> Page settings -> SEO settings
Here are some tips to create a strong meta title:
- Stick to a 55-character limit.
- Be specific but concise.
- Make the keyword obvious.
- Be engaging.
Here are some tips to create the best meta description:
- Keep it up to 155 characters.
- Use active voice and make it actionable.
- Include a call-to-action.
- Use your focus keyword.
- Show specifications where possible.
- Make sure it matches the content of the page.
- Make it unique, but don't overcomplicate.
Sitemap and robots.txt
Setting up a sitemap and robot.txt files is incredibly important for your SEO performance. They contain commands that allow search engine crawlers to access only the URLs of the pages you want them to see.
The sitemap helps you identify the pages that have been indexed as well as the backlinks on your website. Knowing these details enables you to decide which pages should be prioritized during the migration process.
Webflow allows you to auto-generate a sitemap or add a custom one.
How to auto-generate a sitemap:
- Open Site settings -> SEO tab -> Sitemap section
- Toggle Auto-generate sitemap to Yes
- Click Save changes
- Publish your website
How to write a custom sitemap:
- Open Site settings -> SEO tab -> Sitemap section
- Toggle Auto-generate sitemap to No
- Paste your custom sitemap in the Custom sitemap.xml field
- Click Save changes
- Publish your website
You can find your sitemap at: your-site.com/sitemap.xml
A robots.txt file communicates to search engines where they can go and where they can't go on your website - this prevents them from crawling pages containing sensitive or confidential information, or pages that are still under construction.
Robots.txt also helps you with:
- Locking up parts of your website from Google.
- Preventing the crawling of duplicate pages and content.
- Preventing the crawling of internal search results pages.
- Preventing server overload.
- Preventing Google from wasting crawl budget.
Webflow gives you easy access to your site’s robots.txt file via the SEO tab of your site settings.
How to create a robots.txt file:
- Open Site settings -> SEO tab -> Indexing section
- Add the robots.txt rules you want
- Click Save changes
- Publish your website
Set up your DNS settings
Before finishing the WordPress to Webflow migration, do not forget to link your previous domain to the new page.
Webflow doesn't have domain registrar services, meaning you won't be able to transfer your previous domain to it. But you can still link your previous domain to the new Webflow project.
Do this by pointing it to the platform servers using the DNS settings.
First, you need to reset the DNS settings to avoid difficulties that might require troubleshooting DNS records in the future. Next, you must know if your domain registrar allows managing DNS settings.
If you are allowed to manage DNS settings:
- Screenshot your old records for backup.
- Use the default name servers of your registrar/DNS host.
- Delete all the A records on the root domain.
- Delete all the CNAME records on the domain.
- Delete all the CNAME records on every subdomain.
- Point your domain to Webflow and connect it to your project.
If you are not allowed to manage DNS settings:
- Move your domain to a different registrar that provides DNS hosting.
- Point your domain’s name servers to a new registrar.
- Connect your domain to Webflow from the new DNS hosting.
Final thoughts
A website is a precious asset and often the first contact point between you and your next potential client. But a website is also a very fragile asset, meaning that performing the entire migration process without an expert in this field can hinder your performance. Doing the migration poorly can lead to broken design, 404 errors, and lost SEO efforts.
We created this WordPress to Webflow migration guide to help you through the entire process. Following it will help you do the migration properly, without losing all your efforts and search engine positions.
However, if you still feel overwhelmed or lack technical knowledge at your company, we strongly suggest delegating these tasks to experts.
