Jul 3, 2022
Migrating To Webflow — What You Need To Know
What is Webflow?
Webflow is a no-code, browser-based design tool that allows you to tackle every stage of a website’s design and build. The key idea behind it is that it’s an all-in-one platform where you can design, build and then launch your website — without the need for additional tools or a team of coders.
Webflow is different from many other popular CMS, Content Management Systems, in that it does not separate visual design from the code it is built on. Instead, it has a powerful visual editor that is driven by HTML, CSS, and Javascript. Also, because Webflow is a dedicated platform all hosting of a Webflow site is done with them so you just link up your domain name and away you go.
Why Migrate to Webflow
Webflow outperforms other CMS systems in a number of ways and it’s rapidly being adopted by companies that want to define their online image, build it out quickly, and reap the benefits of a site built to support their future.
One of the key principles behind Webflow is that it gives users more control. It strips away the need for high-level technical ability and replaces it with an intuitive visual platform that anyone can work with. Think about it — not only can you maintain your own site, quickly and easily, you don’t have to pay someone else to do it. That means no more time spent liaising with contractors or waiting for changes and signoff. You have all the power.
That increased control is paired with top-level speed. Webflow websites are hosted and backed by AWS so you’re pretty much guaranteed to have the best loading speeds in any region. In case you didn’t know, Webflow includes CDN, Cloud Distribution Network, as standard and Webflow’s uptime is also 99.99% and because it’s serverless there’s never any downtime for server updates — that’s a bonus.
Unlike other platforms such as WordPress, Webflow comes with everything you need to design and build your site just the way you want. No premium plugins that add to your overheads and slow your site down — everything is there for you from day one.
Finally, security is taken care of with enterprise-level controls such as Two-factor authentication and role-based permissions. As the cherry on top, every site hosted on Webflow comes with a free SSL certificate which also helps with your search rankings.
Wanna know why we prefer Webflow over WordPress? Click here.
How To Migrate to Webflow
Now for the main course — your go-to guide on how to migrate your website to Webflow. We’re going to cover key things that you need to do no matter whether you want to migrate from WordPress, Squarespace, Drupal, or any CMS platform out there. Ready to get started?
Benchmarking Your Current Site
A really key part of making any migration is to do so with a purpose. Maybe you want to update your image, improve your ranking or site traction. Whatever the reason, to understand if you’ve achieved your goal you have to first understand how your website currently performs.
The metrics you should be looking to understand before migration are things like the website’s current rankings for different keywords, relative ‘health’ of the website using tools like Ahrefs, and perhaps most importantly your current visitor traffic. Those visitor traffic statistics should include everything from traffic per page, to churn and bounce — your most important numbers.
After migration, it is not uncommon to see a dip in traffic but you don’t need to worry. Providing you follow this guide you should be back up to speed and even overtaking your previous pace within 60 days of migration.
Sitemap
Beyond just the stats you hold on your site, understanding the pages that make up your site is hugely important. There are plenty of sitemap tools that you can find with a quick google search but both SEOwl and Convertcsv have simple interfaces that will help you get your sitemap in no time at all.
Use Google Search Console to find out which of your pages are indexed. This is important because when you migrate you may wish to rename some/all of your pages. Knowing what Google already has indexed means you can focus your attention here first during the renaming process.
It’s also important to know what backlinks you have throughout your content and on all your pages. Ahrefs Free Backlink Checker is an easy way of doing this and you can take this list and keep it safe to make sure you set up your redirects correctly.
Once you have migrated, renamed pages, checked backlinks, and completed the indexing, you can get a new sitemap and resubmit that to Google Search Console. You’re making good progress already.
301 redirects
No web owner ever wants a visitor to come across a dead page and that’s where 301 redirects come into play. If you’ve got quality content that refers internally to your work, you want those backlinks to still keep people engaged on your domain.
Luckily, Webflow has 301 redirect support built-in and you can set up redirects for standalone pages as well as a whole folder — for instance, all of your blogs. Simply head to the Project settings on Webflow and fill in the following fields: “Old Path” and “Redirect to Page”, followed by the “ Add Redirect path” button. It really is that simple.
SEO — Meta Titles and Descriptions
If you didn’t already know, SEO is a big deal. If you neglect your Search Engine Optimization then you’re doing your website a disservice because you’re giving your target customer less chance of discovering your excellent products and services.
For every page on your website, you have the opportunity to set meta titles, descriptions, and tags to better reference your content. In short, meta tags are elements of an HTML and XHTML that provide additional information on the content of the page. Google uses this to understand what your pages, posts, in fact, every piece of content on your site is for.
Make sure as you’re migrating your site, and possibly renaming pages, that you are updating the meta tags, titles, and descriptions. It only takes a few minutes but makes a big difference. If you need help check out this meta description generator from Dashword.
Robots.txt
This unsung hero of SEO doesn’t get the credit that a sitemap does but it is useful to get your website ranking just the way you want. A robots.txt file shows search engine crawlers which URLs can be accessed on your site. You might think that you want every page to be found but what if you have a subdomain that you host client-specific content on — you don’t want that to be spotted.
Particularly during the migration process, you might be doing an overhaul of your visuals or site structure. During this time you don’t want google finding out about specific pages while they are being built. Setup your robots.txt file and have it sit at the root of your host. Handily, Webflow deals with robots.txt natively.
Update DNS Records
About the only thing that Webflow doesn’t currently do is help you with domain registrar support. That means you can’t transfer your current domain over to Webflow for them to take care of it all. But not to worry you can still point your domain to the Webflow servers using the DNS records of your current domain registrar.
As long as the Webflow platform does not provide domain registrar services, you cannot transfer your previously hosted domain to it. However, you can still link it to Webflow by pointing that domain to the platform servers using the DNS records.
To update your DNS records you need to login to your domain registrar, and there’s a good chance that it’s the same company as the one hosting your website — as packages for domain names and hosting are often sold together.
Webflow gives you both the A records and the CNAME records so all you have to do is update them with your registrar or domain host. The second that’s done — your site is ready to publish.
We can’t list all the different methods for updating DNS records on every registrar but if you login to your provider they will have complete documentation on how to do it, or alternatively, you can reach out to the support teams — they’re good people. Updates can take up to 24 hours typically so prepare to leave it a day before following up with your registrar.
Webflow CSV Importing
Webflow really is packed with handy features and tools to make your life easier. That includes the CSV importer which is built to make your WordPress migration much simpler. With so many websites being built in WordPress, the smart cookies over at Webflow decided to create something to make the WordPress migration particularly easy.
If you are running WordPress you’ll need to install a plugin like WP CSV which will allow you to export your site’s data like posts, pages, tags, categories, users, comments, images — basically everything you need.
Once you have that CSV exported it’s a case of using the Webflow importer to bring your previous data into your new setup. Webflow has even put together a complete guide on the WordPress migration process.
All you need to do is map your existing content in the Webflow CMS to the new Webflow fields, click import and you’re done. It quickly and seamlessly pulls everything together and then you just need to go into each piece and do a quick tidy up. It’s always worth checking spacing and your heading tags before you go live.
Webflow Pre-Launch Checklist
We know there is a lot to think about before you take your site live. It can be a bit nerve-racking because you want all your hard work to pay off. To give you a bit of additional support we’ve put together a pre-launch checklist to cover all the important stuff. Some of it is related to post-migration points of order but a lot is just general things that can be easily missed.
- Spell check EVERYTHING
- Test all of your links and buttons
- Set up 301 Redirects
- Create a custom 404 error page
- Test site on different browsers and devices to make sure it looks good EVERYWHERE
- Connect contact forms to your chosen email address or platform
- Optimize your images (tinypng is a good place to start)
- Make sure all pages have proper meta tags, titles, and descriptions and don’t forget the open graph image!
- Set your site’s language
- Remove Webflow branding
- Add company branding to Editor (this is a nicety)
- Setup analytics (e.g. Google Analytics)
- Setup additional admin logins for your team or contractors
Don’t Just Take Our Word For It
“Moving to Webflow lets us spend less time managing the technical elements, and more time sharing our vision in creative ways through the medium of the web.” — Jeremy Roberts, Director of Technology at HFL
“The Khula team understands the back-end, front-end, and everything in between. They also make sure that you know *exactly* what they’re doing, what you’ll be getting, and how to use everything yourself afterwards.” — Dave Barton, Founder & Copy Chief at tbc.wtf
What’s Next?
The beauty of Webflow is that you don’t have to have an expert on hand to get the job done. Hopefully, this guide goes a long way in helping you migrate your own site.
But what if you’ve still got questions or are nervous you might take your website down if you try and do it all yourself. Well, that’s easy — speak to an expert.
As one of a handful of Webflow Professional Partners in Canada, Khula Design Studio can give your website a clean and complete overhaul, handing it back to you as a valuable and manageable asset, not an engineering nightmare. And what we provide you with is determined by your actual needs, not what we think you need. Contact Khula today.
Originally posted on www.khula.studio
