The Ultimate Guide to Converting HTML Sites to WordPress in 2021

In less than an hour from now, you could be looking at a modern, CMS-powered website where your old HTML website used to be…without sacrificing your website’s SEO rankings or content.

tl;dr: Are you stuck with a bare-bones HTML website from the nineties? Does it take you too long or cost you too much to update your website or post new content? This guide will walk you through the perfect solution: converting your static HTML website into a dynamic, CMS-based website.

A CMS — content management system — makes it easy, fast, and cheap to frequently update your website, e.g., to regularly post new content, which improves your website’s SEO ranking.

The most popular CMS today — with over 64% market share — is WordPress, and for good reasons:

  • Widest array of pre-built designs (i.e. themes) and tools (i.e. plugins).
  • Most user-friendly interface.
  • Lowest costs of setup and maintenance.

How to Convert an HTML Site To WordPress

In this step-by-step guide, you will learn not one, but three ways of converting HTML sites to WordPress in 2021.

Depending on the lengths you’re willing to go to keep your old design, there’s an easy way, an easier way, and the easiest way to convert your HTML site into a WordPress site:

  1. Create a New Theme (easy)
  2. Create a Child Theme (easier)
  3. Use an Existing Theme (easiest)

Converting HTML Sites to WordPress by Creating a New Theme

The advantage of converting HTML sites to WordPress this way is that you’ll get to keep your old HTML site’s design intact.

The disadvantage is that you won’t be able to use some WordPress features such as Widgets…not without forking out a lot of dough or sweat down the line.

Hakuna Matata (it means “no worries”): you don’t need to learn one iota of code, just to endure the boredom of an hour of copying and pasting stuff around.

Here’s an overview of what we’ll be covering in this method for reference:

Pre-requisite Tools for Converting HTML Sites to WordPress

Converting HTML sites to WordPress is a delicate operation, and as such, it requires professional tools.

Just as you wouldn’t perform surgery with your kitchen utensils (would you?), you wouldn’t convert your old HTML site to WordPress with a plain notepad.

No worries: I prepared a professional toolbox for you below. Not only are they all industry standard, but they are also all free to use.

Converting HTML Sites to WordPress - WPMU DEV WordPress Hosting
WPMU web also offers hosting optimized for WordPress

If your host supports CPanel, you can install WordPress with the click of a button. You’ll usually find that button under your CPanel’s Softaculous tab.

Pro Tip: For hosts that provide an upgrade from CPanel, the WordPress installation process allows for more personalization. For example, here’s how to create a new site with WPMU DEV:

From the Hub 2.0 site overview screen > click the Add a website (+) icon > click the Create site button under the Create new module.

Choose your temporary destination and click the blue arrow button to continue.

Enter secure admin credentials on the Create WordPress Administration Account screen and click the blue arrow button to continue.

Choose your server’s location based on that of your target audience to ensure the fastest page load speeds for your site’s visitors.

 

Converting HTML sites to WordPress - Local By Flywheel Dev Environment
You can get as frisky as you like with WordPress in the privacy of your Local place

Just as a plant needs an environment with light, water, and soil to live, so WordPress needs an environment with PHP, Apache, and MySQL to work.

Local provides such an environment on your local computer.

To migrate your WordPress site from Local to your host, you’ll be using the Shipper plugin as taught in step nine.

If your computer does not support Local, use older software such as XAMPP.

Converting HTML sites to WordPress - Visual Studio Code Editor
Time to stop and think: over 50% of developers use Visual Studio Code

You can keep reading this guide while simultaneously working in your editor by re-sizing each window to half-screen and then putting them side by side.

If your OS is Windows, you can get an even smoother result by pressing and holding the Windows key and then pressing the left or right arrow key.

Of course, an actual dual-monitor setup works smoother-than-smoothie.

Before we start using VS Code, here are a couple of tips to save you some real headaches:

  • Always save your files once you’re done editing them. Ctrl+K, S is the keyboard shortcut to save all files at once in VS Code. After having pressed the Ctrl + K combination, release both the Ctrl and K keys and then press the S key by itself.
  • Copy-paste the code into a regular word editor first, and only then copy-paste it from there into your code editor. Otherwise, when pasting, the code editor may automatically change ‘regular’ quotes to ‘apostrophes’ or ‘fancy quotes’. WordPress cares, so you had better care too!
Converting HTML sites to WordPress - FileZilla SFTP Client
Transfer data securely between your computer and your host with Filezilla SFTP

If you no longer have (S)FTP access to your old site, you can use software such as wget or a program like SiteSucker to download the folder.

  • An Hour of Your Time

…During which you’ll get a concentrated dose of sympathy for your developer’s prematurely graying hair.

1. Create a WordPress Website in Local

You’re best off converting your HTML site to WordPress through Local for two main reasons:

  • Better protection against typos and bugs that could corrupt your online WordPress website.
  • Better control when creating the files on your local computer instead of on your host server.

To create a WordPress website in Local:

Right-click the Local app > click Open as Administrator > Add Local Site > name it as your old site > Continue. With the Preferred options selected by default, hit Continue.

Create WordPress Site in Local
For your new WordPress site in Local, use a secure username and password and a real email

Choose and commit to paper memory a secure WordPress username and password and a real email address. You’ll be using these to log in to your WordPress website both locally and once hosted. Hit Add Site.

If you didn’t open Local as administrator, it will request access to the command line. Click Yes to proceed. This is safe software, trusted by thousands of developers the world over.

How to Open a WordPress Site From Local
Once you create your WordPress site in Local, click open site to view it in your default browser

Next, click Start Site in the top right corner > Open Site right below it.

Voila! – a WordPress power armor, ready to be inhabited by your theme and content.

From Local > Admin > Log In to your WordPress Dashboard with the username and password you created.

This Dashboard is your command center, your CEO office in your very own WordPress company. We’ll come back to install a comfy chair and a big desk for you here in step seven.

2. Create a Theme Folder and Theme Files

Converting HTML sites to WordPress - Theme Files
In order to create a WordPress theme, you need to create four PHP files and a style.css file

You need to create these files in the specific folder where your WordPress website actually resides on your computer.

Go to C > Users > (your) User (name) > Local Sites (or Local if your OS is Mac) > Your-Site-Name > app > public > wp-content > themes > create a New Folder > Rename it after your old site > right-click Your-Theme-Name > open with Code > click the File tab in the upper-left corner of VS Code > New File > right-click the Untitled file in the upper-left sidebar > Rename > Save.

Create and save five files in total, naming them precisely so (including the termination):

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Keep an open editor; the torture fun has only just begun.

3. Transfer Your Old CSS Code to the WordPress Style Sheet

When converting HTML sites to WordPress, you can be proud to take one small step for a site, one giant leap for sitekind by transferring your old CSS code to the WordPress style sheet.

In an HTML site, a CSS file has only one responsibility: to tell the browser what the website should look like.

In a WordPress site, however, the style.css file has an additional responsibility: to give WordPress a bit of information about the theme, such as its name and author.

Here’s how you give it this information:

Converting HTML sites to WordPress - Theme Stylesheet Header
As in this example stylesheet header, insert your own theme’s values after the colon marks

First, open the style.css file you created in the editor, copy-paste the following code into it, then substitute the values (after the colon: mark) of the keys (before the colon: mark) with your own (no worries, the taxman won’t come for you if you misplace a digit or two on this form):

/*

Theme Name: your-website-name (e.g.Landing Page)

Author: your-name (e.g. Start Bootstrap)

Author URI: your-profile-link (e.g. https://github.com/StartBootstrap/startbootstrap-landing-page)

Description: your-website-theme-description (e.g. “The best damned page on the Internet.”)

Version: 1.0

License: The MIT License (MIT)

License URI: https://github.com/StartBootstrap/startbootstrap-landing-page/blob/master/LICENSE

*/

Don’t forget to wrap the code inside comments by including the /* and */, which tells WordPress that this text is not an actual part of the styling code, but a theme stylesheet header.

Right after this code, copy-paste the actual CSS code from your old site’s CSS file by opening the latter with your code editor and then using the Ctrl+A command to copy all code inside it.

4. Split the HTML File Into PHP Files

Think of it as digestion: your body breaks down nutrients to re-build food into itself, and WordPress breaks down code to re-build HTML into itself.

Ready to win bragging rights for the phrase “I eat code for breakfast”?

Perfectamundo; let’s splice and dice the HTML file into pieces for the header, sidebar, footer, and main content.

You’ll copy-paste each piece into its own PHP file to help WordPress take it apart, and then add a bit of PHP code to help WordPress put it back together (I feel you: shouldn’t WordPress be able to digest its food on its own?).

Here’s a breakdown of the PHP files you need to convert HTML to WordPress:

Header.php

Converting HTML sites to WordPress - Header.php File
Here you can see the PHP code you need to copy-paste into the header.php file — and where

Everything from the beginning of your old HTML code up to the main content goes into this file. You can detect where the main content starts by looking for <main> or <div class="main"> or <section class="main">after the closing header tag (</header> — note the /).

Before the closing head tag (</head> — note the /  and also that this is head, not header), copy-paste the following code to add WordPress functionality:

<?php wp_head();?>

Footer.php

Converting HTML sites to WordPress - Footer.php File
Here you can see the PHP code you need to copy-paste into the footer.php file — and where

Copy-paste the code after the <footer> or <div="footer"> tag (including the <footer> tag itself) here.

Right before the closing body tag (</body> — note the /), copy-paste this code into the footer.php file:

<?php wp_footer();?>

Sidebar.php

If there is any, you can copy-paste into the sidebar.php file the code within the <aside></aside> tags (including the tags).

Index.php

Converting HTML sites to WordPress - Index.php File
Here you can see the PHP code you need to copy-paste into the index.php file — and where

At the very top of the index.php file, copy-paste the following lines of code:

<?php get_header(); ?>

 

<?php get_sidebar(); ?>

<?php wp_footer(); ?>

The space between the header and the sidebar is there on purpose; that is where you will add a piece of PHP code called The Loop.

The Loop is the very heart and soul of WordPress; it is what enables you to dynamically add content to your site:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else : ?>

    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>

<?php endif; ?>

Copy-paste the code within your HTML file’smaintag (or class, or id) — everything that does not belong in the footer, header, or sidebar — right after this last line of code:

<?php wp_footer(); ?>

5. Format the Style Sheet Link for WordPress

Converting HTML sites to WordPress - Header.php File Style Sheet Code
PHP code to copy-paste into the header.php file to enable WordPress to read the style.css file

Find the link tag with a rel attribute value of  “stylesheet” inside the <head></head> section in the header.php file.

Here’s an example link; this one’s mine, you can’t have it — go find your own site’s similar code instead:

<link rel="stylesheet" type="text/css" href="Resources/css/style.css">

Now within the “href” attribute, replace the link path leading up to the file’s name with this piece of code, stopping right before the slash following it:

<?php echo get_template_directory_uri(); ?>

Here’s an example replacement:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

The file must be called exactly style.css in WordPress. If it is called differently in your old site’s code (e.g. styles.css), you must change its name to style.css in the link above.

If your old website has multiple style.css files, you can copy-paste their content one after another into the WordPress style.css file, according to their import order in the HTML file (the higher-ups go before the lower-downs…unlike in Japan).

Phew — got a towel? I’m all sweated up; not from the effort, but the boredom: it seeps out through all of my pores.

How about you? All good? Great; you can now save and close all files, give yourself a pat on the back, and get ready for the next round.

6. Add an Image for Your Theme

All WordPress themes have their own preview image to visually identify them in the WP Dashboard.

If you don’t want your theme to be left out, you can add a nice image for it as well in four easy steps: take a screenshot of your old website > paste it into a graphics editing software such as Paint, cropping it to be 1200px wide by 900px tall > save it, naming it screenshot.png (as mentioned, the exact name matters to WordPress) > put it in your new theme’s root folder, alongside style.css.

7. Activate Your New WordPress Theme

Let’s have a look at your cool new WordPress theme.

From your WordPress Dashboard, go to Appearances > Themes > Activate Now your theme > open the site through Local once again and admire your handiwork.

If you need a break lest you have a mental breakdown, go grab yourself a cookie and a cup of milk, or tea, or whatever your cup of coffee is before proceeding.

8. Import Your Old HTML Site’s Posts and Pages to WordPress

Once you’re done with all of the above, you also have to import all of your existing blog content post by post, plus any other pages on your old website.

If you only have a few posts and pages, it might actually be easier for you to do so manually:

Go to the WordPress Dashboard > click Posts > Add New > title your new post as your old post > click the three-dots icon in the upper-right of the post > switch from the default Visual Editor to the Code Editor by clicking the latter > copy-paste here the HTML code inside your old post’s main tag (from below the header tag to above the footer tag).

The same goes for pages, except you’d go to Pages > Add New instead.

It’s important to copy-paste the actual code into the WordPress code editor and not just the text into the visual editor. This enables you to continue to take advantage of any inline styling, semantic and SEO optimizations your developer and SEO professional may have performed for your posts’ and pages’ code.

If your old site has a lot of content, it might be easier to import it into your newly-created theme by using a plugin instead. Check out the third method in this guide to do so, and don’t forget to come back here after that to learn how to migrate your WordPress site from your local computer to your host server.

9. Migrate WordPress From Local to Your Host Via Shipper Pro

If you’re converting your HTML site to WordPress through Local as recommended, you now need to migrate your WordPress site from Local to your web host.

Shipper Pro is here to help you to do just that.

No worries; you won’t need to pay a dime to use this premium WordPress migration plugin: you can try it free for 7 days, and cancel your trial at any time (preferably not before you’re done with the migration, though). Using the method in this guide, you won’t need to install any other plugin to migrate WordPress.

Here are the three main steps to migrating your WordPress website with Shipper Pro:

Create a Migration Package From Local WordPress With Shipper Pro

Migrating WordPress Websites - Shipper Pro Plugin
Shipper Pro is here to help you migrate WordPress from your Local environment to your host

First, go to Plugins > Add New > Upload Plugin > Choose File > navigate to and click the Shipper Pro archive > Open > Install Now > Activate Plugin.

Next, go to Shipper > Package Migration > Create Package > Build Package > Download the Package Archive and the Installer.

If the package building (or, later on, installing) throws an error, try it again, but this time, enable Safe Mode when prompted to do so in the Package Migration step.

Migrating WordPress Websites - Shipper Plugin Instructions
Shipper’s usage instructions are simple: build the package, upload it to your host, and install it

Upload the Migration Package to Your WordPress Host With FileZilla

If you haven’t done so already:

Converting HTML sites to WordPress - FileZilla SFTP Protocol
When transferring files with FileZilla, make sure to select SFTP: Secure File Transfer Protocol

Once you have those two things, upload both the Package Archive zip file and the Installer PHP file to the root directory of your website on your host’s server. This directory would be either in the “public” folder or in a folder named after the website you set up with your host.

Install the Migration Package on Your Hosted WordPress Website

Open your browser, type in your hosted website’s domain name in the address bar, and add “installer.php” (without the quotes) at the end, e.g. https://example.com/installer.php.

Follow the instructions on the installer wizard to complete the migration. If you want to overwrite the website (you likely do), turn on Fetch database credentials from the config file, then add your site’s name after the “wp_” table prefix, e.g. “wp_example”.

10. Redirect Your Old Posts’ and Pages’ URLs

This guide’s SEO section will walk you through all you need to do to keep your rankings once you’re done converting your HTML site to WordPress.

Feel like punching down the walls and screaming out your roof already? Ah, the joy of being a developer. 😉

Fortunately, there’s an easier — and better — way to do this.

Converting HTML Sites to WordPress Through a Child Theme

The advantages of converting HTML sites to WordPress this way are that:

  • It’s a lot faster than coding your own theme from scratch.
  • It gives you access to the full range of WordPress features such as widgets and comments.

The disadvantage is that, unless you also followed method one first, you’ll be discarding your old site’s design.

Now, you may be thinking: why not simply take an existing theme, and customize that with your old website’s code?

Well, you could do that…but in the theme’s next update, it will throw off your custom code (along with any hackers’ code, thank WordPress divine).

A child theme allows you to borrow the design and functionality of its parent theme, import your old site’s content into it, and keep it for the long term.

You could follow the first method with a few variations to create a child theme manually.

But since that would get really tedious, real fast, we’ll skip the developer’s romance and take advantage of WordPress’s functionality by using the aptly-named Childify Me plugin instead.

Here’s the quick route to our WordPress hospital if you’re having an emergency theme birth:

1. Pick a Theme, Any Theme

Converting HTML Sites to WordPress - GeneratePress Theme
GeneratePress: one of the most performant, easily customizable, well-coded WordPress themes

Let’s get down to business….a business-worthy WordPress theme, that is.

Premium themes tend to be more responsive, faster, and more versatile than free themes, and you should seriously consider investing in one for your business.

If you’re willing to fiddle around with your site’s design, freemium GeneratePress is one of the most lightweight, easily customizable, and well-coded themes there are.

GeneratePress enables you to quickly and easily build your site from the ground up using the freemium Elementor visual site builder plugin.

You can also find a huge number of free themes to install in your WordPress Dashboard, under Appearance > Themes > Add New.

Once you’ve made your choice, Install > Activate the theme.

You can then customize it from Appearance > Customize.

2. Install Rocco Aliberti’s Childify Me Plugin

Converting HTML Sites to WordPress - Childify Me Plugin
Rocco Aliberti’s Childify Me plugin lets you create a child theme with the click of a button

You know the drill already:

From Plugins > Add New > type Childify Me in the search bar > Install > Activate.

What this plugin does is create two files:

  • Style.css, with a WordPress stylesheet header, as we create in method one, but adding the “template” tag to signal its parent theme.
  • Functions.php, which can do a lot of things; in this instance, it tells WordPress to use the parent theme’s styles for the child theme as well.

3. Birth the Baby

Go to Appearance > Customize > Childify Me > name the newborn theme after its parent theme > hit the Create button > Activate.

You can now cradle in your arms this wonder child of WordPress innovation.

If you want to keep your old site’s design as well, here are the cliff notes on WordPress genetic engineering:

Follow the first method to WordPressify your old site, then go to your new theme’s style.css file to add the template tag generated by the plugin to the stylesheet header. While at it, make sure your old site’s CSS code is still there. Finally, remove the code in functions.php that points to the parent theme’s style.css.

4. Import the Content

Once you’re done adjusting the design to your liking, import your old site’s content into your child theme by either:

  • Copying and pasting your old site’s pages’ and posts’ HTML code into the text editor (not the visual editor) of their corresponding WordPress pages and posts. You can create these from the WordPress Dashboard > Posts > Add New and Pages > Add New.
  • Following the method below, which can be a lot quicker if your old HTML site has a lot of content.

Converting HTML Sites to WordPress by Importing Your HTML Into an Existing Theme

The advantages of converting HTML sites to WordPress this way are that:

  • You’ll import a lot of content with awesome speed.
  • You’ll get a brand new design while at it.

The disadvantages are that:

  • You’ll get a brand new design while at it (unless you previously WordPressified your old site, as shown in method one).
  • You may need to do a lot of styling and functionality adjustments to get your content to look and behave as it did on your old website.

This is what we’ll be covering in this method to help you find a specific step:

1. Install and Activate Your Chosen WordPress Theme

Getting a brand new design for your website can be a good thing since most WordPress themes come with a modern, state-of-the-art design.

If you’re hell-bent on keeping your old site’s design, nothing stops you from picking a theme that resembles it and then customizing it to further worship its semblance.

If performance is your top concern, check out the lightweight, highly customizable GeneratePress theme, and the Elementor plugin that fits into it like ink into an inkwell.

2. Install and Activate Stephanie Leary’s HTML Import 2 Plugin

Converting HTML sites to WordPress - HTML Import 2 Plugin
Stephanie Leary’s HTML Import 2 plugin lets you quickly import your content into WordPress

No worries, even though the message on the download page states that this plugin “hasn’t been tested with the latest 3 major releases of WordPress”, I have now (2021) tested the plugin for you with the current release (5.7.1) of WordPress.

This old plugin might need a new coat of oil for its rustier gears, but it still does today what it was built to do more than half a decade ago: import your old HTML site’s content into WordPress.

You can download it from this link, then install it from Plugins > Add New > Upload Plugin > Choose File > import-html-pages.2.6.zip > Install Now > Activate Plugin.

3. Get Your Old Site’s Folder Within Range of the Plugin

The plugin’s docs’ first commandment is this:

“The files thou art importing shalt be on the same server as thy WordPress installation.”

You can obey it in one of two ways:

  • Use a local dev environment such as Local by FlyWheel to copy-paste your old site’s folder into C > Local Sites (Local on Mac) > Site-Name > App > Public. You may also need to use the second way below to download your old site folder from your old host first.
  • Use an SFTP client such as FileZilla to upload your old site’s folder to your WordPress installation directory on the server. That directory will be called either “Public” or as you named it when you set up the website with your host.

From the WordPress Dashboard > hover over Settings > click HTML Import.

4. Configure the HTML Import 2 Plugin

Now’s time for some mind-boggling wiggling-around of files and tags.

From the WordPress Dashboard, hover over Settings > click on HTML Import.

Overwhelmed? No worries, the trusty “Docs” umbrella is ever at hand to help you weather any storm. 😉

Here’s “a very brief history of the docs” to spare you some eyestrain:

Converting HTML Sites to WordPress - HTML Import 2 Plugin Settings
You must carefully configure the HTML Import 2 plugin’s settings according to your situation

Files

Directory to import is the most critical field; you must enter here the correct path to your site’s folder. The absolute path to your WordPress installation’s root folder is already selected by the plugin; all you need to do is replace html-files-to-import with your folder’s name.

The Old site URL field is where you insert your old website’s URL so that the plugin can perform accurate .htaccess redirects. This does not spare you the need to do your own SEO redirects for your old site’s visitors — human and (search engine) bot alike — as you’ll learn later on in this guide.

Content

Select content by lets you specify the tag or class or id that the content to be imported begins with. To import it all properly, ensure this is the same for all your old site’s HTML pages.

More content options:

  • Check import linked images and import linked documents if you want to also import your old site’s media library and linked documents (such as PDF files).
  • Check update internal links to make sure your old site’s links from one page or post to another still work correctly on your WordPress site.

Title & Metadata

Here you can control how to display your imported posts’ and pages’ titles and other data, such as publish date and author name.

Phrase to remove from page title allows you to remove potential duplicate content from your page titles “such as the site name, which most themes will print automatically”.

Custom Fields

Custom fields allow you to customize WordPress, which you likely don’t need to do at this point.

Categories and Tags

Categories and tags help you group your imported content so that your visitors can easily find related content. You may need to create them in WordPress first, from Posts > Categories and Posts > Tags. You can also assign them to each post individually after the import.

In addition, you can separate your old website’s content into different folders, copy-paste or upload those to your WordPress installation folder, and import them one by one to assign to each group its own categories and tags.

Tools

The plugins listed here can help get your site looking and working even closer to the original after the import. You can use them to look for and fix broken links and to manage .htaccess redirects.

Congrats; the HTML Import 2 plugin is now primed for converting HTML sites to WordPress. Prepare for the launch sequence: 5…4…3…2…1…

5. Import Your Old Site’s HTML Content Into WordPress

…This is the moment you’ve been waiting for.

Once you’ve configured the plugin, click Save Settings > the Ready To Import? notification.

To see your old site’s homepage when you go to your new site’s domain, you must first let WordPress know which of the imported pages is the homepage.

Converting HTML sites to WordPress - Home and Blog Pages
Choose your old site’s home page to display on your new site…and a blog page while you’re at it

Let’s do it; go to Settings > Reading > from the Your Homepage Displays drop-down menu, pick A Static Page > your old site’s home page.

If your old site had no blog page, you will need to create one from Pages > Add New > come back to Reading > set it as your blog page.

Running into trouble? Relax; take a deep breath, and call your theme’s support: some themes’ home and blog pages need to be chosen from a different location in your WordPress Dashboard.

If you checked import linked images under the plugin’s content tab, all of your old website’s images will now be in your media library. Since your design didn’t carry over though (unless you carried it over using method one), you may need to adjust your media content’s placement and styling on each page and post.

We’ve successfully converted your HTML site to WordPress; let’s break out the champagne!

But behold! — in the distance, an oncoming storm is gathering, ready to rain down the frowny faces of your old site’s visitors and Google’s bots alike!

How can we stop this SEO and traffic disaster in its tracks before it wrecks your party?

How to Keep Your SEO Rankings When Converting HTML Sites to WordPress

WordPress is powerful, but with great power comes great responsibility. When converting HTML sites to WordPress, there are a few matters on which you need to exercise this responsibility regarding SEO:

1. Preserve Your Old Site’s URL Structure

How would you feel if you were going to an old friend’s party, only to see a barren field where their home used to be?

Confused? Betrayed? As if…it would have been awful nice if somebody had told you where the bloody hell it is today?!

That’s exactly how your old site’s loyal visitors — human and bot alike — will feel when they’re greeted by a “404” error at your former site’s doorstep.

…Unless you do them a favor and get these things done before they arrive:

First, use a spreadsheet document to keep track of all of your old site’s posts’ and pages’ URLs, and another spreadsheet for your new site’s corresponding posts’ and pages’ URLs.

Second, redirect each of the old URLs to the new URLs via 301 redirects, which tell Google that their address changed permanently.

Finally, update the new sitemap and submit it via GSC (the Google Search Console). That’s sure to keep those crawlers’ smiley faces on.

Use an SEO Plugin Such As SmartCrawl for URL Redirection and Sitemap Regeneration

Optimizing WordPress SEO - SmartCrawl Pro Plugin
SmartCrawl is here to boost your website’s rankings — checking, analyzing, and optimizing metatags, keywords, sitemap, and everything else SEO.

Earlier, we noted that one of the main concerns with moving an HTML site to WordPress is the fear of losing your site’s existing SEO and rankings.

SmartCrawl can help to preserve your old site’s SEO when migrating to WordPress, redirect your old URLs, regenerate your XML sitemap, and more – with ease! – and it’s free to try out. Check out the docs.

Here’s how to keep your site’s SEO intact with SmartCrawl and boost your rankings:

First, install and activate SmartCrawl by going to your WordPress Dashboard > Plugins > Add New.

Next, Get Started with the quick setup and wait for it to run a full automatic SEO checkup.

After that, go to Advanced Tools > URL Redirection > Add Redirect.

In the Old URL field, insert your post’s or page’s old URL from your first spreadsheet, and in the New URL field, insert its new URL from your second spreadsheet.

Change the Redirect Type to Permanent and then Apply Redirect.

Do this for each page and post, then Save Settings.

Now go to Sitemap > Settings > switch Auto-Notify Search Engines to default > Save Settings.

Finally, finish configuring all of the plugin’s settings and options to optimize your new site’s SEO.

There; nice an’ easy!

2. Preserve Your Old Site’s Speed

If your website was built using HTML 4.01 Transitional and CSS – the fastest, most stable, and most secure website building languages – then you may be in for a surprise when converting your website to WordPress…of the kind best avoided.

Compared to (well-coded) HTML websites, WordPress websites tend to load slower, which will impact your site’s SEO ranking and visitor bounce rate. With an average page load speed of over 3 seconds, a WordPress website without optimization can bounce away over 22% of your visitors.

Fortunately, there is a way to have your cake and eat it too: use caching and other performance-optimizing plugins such as Hummingbird and Smush to shave full seconds off your loading time, more than halving your visitor bounce rate.

Optimizing WordPress Images - Smush Pro
Smush is here to lazy load, compress, resize, optimize, and in all ways sharpen up your website’s images.
Optimizing WordPress Speed - Hummingbird Pro
Hummingbird is here to cache your website, minify and defer its CSS and JS, and get it humming along with awesome speed.

3. Preserve Your Old Site’s Security

WordPress websites account for over 90% of all hacked websites (no surprise there, given that they also make up over 33% of all websites). This is mostly due to poor maintenance on the user’s end, and not due to WordPress Core itself. So to keep your WordPress website secure, make sure to keep WordPress, your themes, and your plugins up to date at all times.

Cleaning up a hacked WordPress website can be a nightmare, although it doesn’t have to be. Your host may suspend your site and even Google may penalize it until you get it cleaned. And downtime losses may be the least of your concerns.

Some hosts provide periodic backups to restore your site in case it gets hacked, but relying on that is like thinking you don’t need to get a lock for your door because “it comes with a free replacement if thieves break into your house through it!”.

So what can you rely on?

A dedicated security plugin such as Defender to prevent it from getting hacked in the first place. As Erasmus foretold:

“To prevent is better than to cure.”

Optimizing WordPress Security - Defender Pro
Defender is here to clean up malware like the trash it is and firewall your website like the impregnable fortress it should be.

As you can see, using the right WordPress plugins can make a world of difference to your site’s performance, security, and SEO, effectively super-powering your online business platform.

Say GoodBye To Your Static HTML Site And Hello To WordPress

There you have it!

If you have been postponing your decision to convert your old static HTML site into an easier-to-use, more secure, and more scalable website because you were concerned about losing your content, dropping SEO rankings, or overall costs, I’ve just given you three methods that will help you make the transition to WordPress easier.

As these methods show, converting HTML sites to WordPress in 2021 can be easy, thrifty, and worthwhile. From now on, you’ll be working with a user-friendly, highly versatile content management system that will let you more easily update and scale your website.

Kudos to your business for pushing through this grueling, gut-wrenching, spine-cracking process…twice the kudos if you exercised your “management skills” and had a plugin or two do it for you. 😉