...

In-Depth HTTP to HTTPS Migration Guide for WordPress

in-depth-http-to-https-migration-guide-for-wordpress

As of July 24th, 2018, Google Chrome is now be marking all non-HTTPS sites as “Not Secure.” Regardless of whether they collect data or not. This is why HTTPS is more important than ever!

In today’s post we are going to dive deep into a HTTP to HTTPS migration and share applicable tips to hopefully make the transition for your WordPress site as smooth as possible. As some of you may know, Google has been working hard on their objective of moving everyone to a more secure web. For WordPress site owners it is always great if you can be proactive. Because of new protocols, SEO benefits, and even more accurate referral data, there has never been better time to migrate to HTTPS. Find out more of the why and how below.

What is HTTPS?

HTTPS (Hyper Text Transfer Protocol Secure) is a mechanism that allows your browser or web application to securely connect with a website. HTTPS is one of the measures to help keep your browsing safe and secure. This includes things like logging into your banking website, capturing credit card information, and even logging to the back-end of your WordPress site. HTTPS on your WordPress website requires that you have an SSL certificate for encryption. This ensures that no data is ever passed in plain text.

According to Builtwith, as of February 2018, 49.8% of the top 10,000 websites are using HTTPS. That is up from 5.68% back in September 2015.

Top websites HTTPS usage

As of February 2018, MozCast is reporting over 77% of search queries are over HTTPS, up from 26% in January 2016. That means there are a lot of sites migrating from HTTP to HTTPS.

Even Google themselves is pushing for that 100% encryption mark across all their products and services. As of January 2018 around 91% of traffic to Google is over HTTPS. That is up from 48% back in December 2013.

HTTPS traffic at Google

And according to Firefox telemetry data and Let’s Encrypt stats, over 66% of page loads are now HTTPS.

Why Should You Care About HTTPS?

There are actually quite a few reasons why WordPress website owners should care about HTTPS and think about migrating from HTTP to HTTPS now rather than later.

1. Security

Of course, the biggest reason for HTTPS is the added security. By migrating from HTTP to HTTPS you are now serving your website over an encrypted SSL/TLS connection. This means that data and information is no longer passed in plain text. For eCommerce sites that process credit card information, this is a must have. It is not technically required by law, but it is your responsibility as a business to protect your customer’s personal data.

Besides eCommerce, this can even be applicable to your WordPress login pages on blogs. Especially for those of you running multi-author WordPress websites, if you are running over HTTP, every time a person logs in, that information is being passed to the server in plain text. HTTPS is absolutely vital in maintaining a secure connection between a website and a browser. This way you can better prevent hackers and or a middle man from gaining access to your website.

2. SEO

Google has officially said that HTTPS is a ranking factor. While it is only a small ranking factor, most of you would probably take any advantage you can get in SERPs to beat your competitors. And because of Google’s push for everyone to migrate to HTTPS, you can bet that the weight of this ranking factor will most likely increase in the future. Here is a great article on the impact of TLS/SSL on rankings.

And just look at some of the other data surrounding SEO and HTTPS! Matthew Barby did an analysis of 1 million URLs and found that over 33% of all pages ranking 1, 2 or 3 in Google use HTTPS.

HTTPS usage vs Google ranking

3. Trust and Credibility

According to a survey from GlobalSign, 28.9% of visitors look for the green address bar in their browser. And 77% of them are worried about their data being intercepted or misused online.

HTTPS can help your business by building what we call SSL trust. By seeing that green padlock, customers will instantly have more peace of mind knowing that their data is more secure.

4. Referral Data

This reason is for all of you marketers out there. If you use Google analytics you are probably familiar with referral data. What a lot of people don’t realize is that HTTPS to HTTP referral data is blocked in Google Analytics. So what happens to the data? Well, most of it is just lumped together with the “direct traffic” section. If someone is going from HTTP to HTTPS the referrer is still passed.

This is also important because if your referral traffic has suddenly dropped but direct traffic has gone up it could mean one of your bigger referrers has recently migrated to HTTPS. The inverse is also true. Check out this more in-depth guide from Moz on direct traffic.

5. Chrome Warnings

As of July 24th, 2018, versions of Chrome 68 and higher are marking all non-HTTPS sites as “Not Secure.” Regardless of whether they collect data or not. This is why HTTPS is more important than ever!

Chrome 68 not secure

And with Chrome 70 coming October 2018, they will be marking all non-HTTPS sites as “not secure” with a big red warning (on pages where users enter data).  This is especially important if your website gets’s a majority of its traffic from Chrome. You can look in Google Analytics under the Audience section in Browser & OS so see the percentage of traffic your WordPress site gets from Google Chrome.

Chrome not secure red warning (Image source: Google)

Chrome holds over 56% of the browser market share, so this is going to impact a lot of your visitors. You can also check which browsers your visitors are using in Google Analytics under “Audience > Technology > Browser & OS.” As you can see in this example below over 63% of visitors to the site are using Google Chrome.

Chrome usage from visitors

Google is making it a lot more clear to visitors that your WordPress website might not be running on a secured connection. Here are some tips from Google on how to avoid the warning.

Firefox also followed suit and starting with the release of Firefox 51 back in late January, they too will show a gray padlock with a red line through it for non-secure sites that are collecting passwords. And of course, if you migrate your entire site to HTTPS, then you don’t have to worry about this.

Firefox not secure warning

You might also start getting the following warnings from Google Search Console if you haven’t migrated over to HTTPS yet.

To: owner of http://www.domain.com

The following URLs include input fields for passwords or credit card details that will trigger the new Chrome warning. Review these examples to see where these warnings will appear, and so you can take action to help protect users’ data. The list is not exhaustive.
http://www.domain.com

The new warning is the first stage of a long-term plan to mark all pages served over the non-encrypted HTTP protocol as “Not Secure”.

6. Performance

And last but not least, we have performance. Because of a new protocol called HTTP/2, a lot of times, those running properly optimized sites over HTTPS can even see speed improvements. HTTP/2 requires HTTPS because of browser support. The improvement is performance is due to a variety of reasons such as HTTP/2 being able to support better multiplexing, parallelism, HPACK compression with Huffman encoding, the ALPN extension, and server push. There used to be quite a bit of TLS overhead when it came to running over HTTPS, but that is now a lot less. TLS 1.3 which is coming out soon will speed up HTTPS connections even more!

It is also important to note that web performance optimizations such as domain sharding and concatenation can now actually harm your performance. These are obsolete and for the most part should no longer be used.

Everything on the web should be encrypted by default. –  Jeff Atwood, Co-founder of Stack Overflow

HTTP to HTTPS Migration Guide

Now it is time to get down to the fun part, migrating your WordPress site from HTTP to HTTPS. Lets first go over some of the basic requirements that you will need and some things to be aware of.

  • You will need an SSL certificate. We will go more into detail about this below.
  • Double check to ensure that your WordPress host and CDN provider supports HTTP/2. Kinsta has HTTP/2 support for all of our customers. This is not required, but you will want this for performance.
  • You will want to set aside a good block of time to do your HTTPS migration. This isn’t something that can be done in 5 minutes.
  • Double check to ensure that all external services and scripts you use have an HTTPS version available.
  • It is important to know that you will lose social share counts on all your posts and pages unless you use a plugin that supports share recovery. This is because your share counts are based on an API that was looking at the HTTP version, and you have no control over 3rd party social networks.
  • Depending upon the size of your site, it may take Google a while to re-crawl all of your new HTTPS pages and posts. During this period you could see variations in traffic or rankings.
  • Don’t forget about local citations.

We recommend turning off your CDN integration and disabling any caching plugins before beginning, as these can complicate matters.

1. Choosing an SSL Certificate

The very first thing you will need to do is purchase an SSL certificate if you don’t have one. Google recommends using a 2048-bit key certificate or higher. We recommend you buy certificates from vendors such as Comodo, DigiCert, GeoTrust, Thawte, Rapidssl or Trustwave. But there are also cheaper alternatives such as GoGetSSL, NameCheap, and GoDaddy. There are three primary types of certificates you can choose from:

  • Domain Validation: Single domain or subdomain, (email or DNS validation), issued within minutes. These can typically be bought for as low as $9 a year.
  • Business/Organization Validation: Single domain or subdomain, requires business verification which provides higher level of security/trust, issued within 1-3 days.
  • Extended Validation: Single domain or subdomain, requires business verification which provides higher level of security/trust, issued within 2-7 days. This enables the full green bar like you see on banking websites.

Let’s Encrypt

As of April 2016, Let’s Encrypt also created a way to get free SSL certificates. Check with your WordPress host and CDN provider to see if they have a Let’s Encrypt integration. You can also follow the Certbot guide on how to install them manually. Let’s Encrypt certificates expire every 90 days so it is important to have an automated system in place.

If you are Kinsta customer, we now have a Let’s Encrypt integration! This means installing an SSL certificate is as easy as 123. Login to your MyKinsta dashboard and click on “Manage” next to your WordPress site.

Manage WordPress site

Click into “Tools” and under Enable HTTPS select “Add Let’s Encrypt Certificate.”

Generate Free HTTPS certificate

You will then have an option to choose the domains on which you want an SSL certificate installed. If your site is http://domain.com and has a redirect from www to non-www, you will still want to select both for the HTTPS redirect. Click on “Generate.” (Note: You will need to add all of your domains prior to this from the MyKinsta dashboard, including any subdomains which require SSL)

HTTPS credentials

And that’s it! It will take a few seconds or so to install and your site should be all secured.

2. Installing a Custom SSL Certificate

If you have purchased an SSL certificate, you need to install the SSL certificate on your WordPress site. When going through the certificate setup with the vendor, you are asked to provide the server type. If you are a Kinsta customer, the type of our web servers is Nginx, if that option is not available, then “Other” will work as well.

A CSR code will be needed by the SSL provider to create/sign the certificate file. For generating a CSR code and RSA key, please complete the following form: https://www.ssl.com/online-csr-and-key-generator/.

We recommend filling out every field, but at a minimum, you should fill in the following as seen in the example below:

  • Common name (domain name)
  • Email Address
  • Organization
  • City / Locality
  • State / County / Region
  • Country

Note: For the common name field, if you are generating a wildcard certificate, you will need to input your domain name like *.domain.com.

Generate CSR form

The form will generate you the private key file and the CSR. Make sure to save both of those as the certificate will be unusable without them.

CSR and private key

Upload your CSR with your SSL provider to regenerate your SSL certificate (.cert).

You will then need to go to your WordPress host and give them the certificate and private key. If you are a Kinsta customer you can log in to the dashboard, click on a site, go to the Tools tab and under Enable HTTPS select “Add Custom HTTPS Credentials” to get started.

Install custom SSL certificate on WordPress

You’ll will then be able to add your private key and certificate right there.

Apply certificate

3. Verify Your SSL Certificate

So now you have your SSL certificate installed, you should verify it to ensure everything is setup correctly. A quick and easy way to do this is to use the free SSL check tool from Qualys SSL Labs. If everything is right, you should get an A letter grade in the test, as seen below.

Check SSL certificate grade

Check out our more in-depth tutorial on how to perform an SSL check.

4. Redirect HTTP to HTTPS

After you have verified your SSL certificate, the next thing you need to do is permanently redirect all the HTTP traffic to HTTPS. There are a couple different options you have when choosing to redirect HTTP to HTTPS in WordPress. One is to do it at the server level (recommended) or you can do it with a free WordPress plugin. Note: Our examples all include a 301 redirect directive which is the correct way to implement it in regards to SEO. Using a different type of redirect could harm your rankings. It is also important to be aware that 301 redirects might not pass 100% of the link juice, even though Google might say they do. Check out this post from Cyrus over at Moz regarding HTTPS migrations and 301 redirects.

Redirect HTTP to HTTPS in Nginx

If your web server is running Nginx, you can easily redirect all of your HTTP traffic to HTTPS by adding the following code to your Nginx config file. This is the recommended method for redirecting WordPress running on Nginx.

server { listen 80; server_name domain.com www.domain.com; return 301 https://domain.com$request_uri; }

We use Nginx for everyone here at Kinsta. The great news is that you don’t have to worry about this. If you need to add a redirect simply open up a quick support ticket and let us know which domain you need redirected. We then add it to the Nginx config for you.

Redirect HTTP to HTTPS in Apache

src: Apache Software Foundation

If your web server is running Apache, you can easily redirect all of your HTTP traffic to HTTPS by adding the following code to your .htaccess file. This is the recommended method for redirecting WordPress running on Apache.

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

None of Kinsta’s servers are running Apache.

Redirect HTTP to HTTPS with Really Simple SSL Plugin

The third option you have to redirect from HTTP to HTTPS is to use the free WordPress Really Simple SSL plugin. We don’t recommend this method as a permanent solution because 3rd party plugins can always introduce another layer of problems and compatibility issues. It is a good temporary solution, but you should really update your hard-coded HTTP links as we will show you in the next step.

Really Simple SSL plugin

Implement HSTS Header (optional)

HSTS (HTTP Strict Transport Security) is a security header which you add to your web server that forces the browser to use secure connections when a site is running over HTTPS. This can help prevent man-in-the-middle attacks (MitM) and cookie hijacking. You can use the above 301 redirects along with the HSTS header. Check out our in-depth article on how to add HSTS.

5. Check For Too Many Redirects

After you add a redirect from HTTP to HTTPS you should double check to ensure you don’t have too many redirects. This problem is quite common and can affect the speed of your WordPress site. You can use Patrick Sexton’s Redirect mapper tool to easily see how many redirects are happening on your site. Here is an example below of redirects that are not setup correctly which are easily spottable using the redirect mapper. You can see that there are duplicate HTTPS redirects happening on both the www and non-www versions.

Redirects not setup correctly

Here is an example of redirects setup correctly. As you can see there is only one redirect happening.

Redirects setup correctly

Check out our in-depth post on WordPress redirects and best practices for faster performance.

6. Update Hard-coded HTTP Links

Now that you have redirects in place it is time to fix all those hard-coded HTTP URLs. Generally, it is not recommended to hard-code URLS but most likely over time you probably have, we all do it. Below are a couple options you have for updating your HTTP links to HTTPS.

Option 1 – Kinsta Search and Replace Tool

If you’re a Kinsta client, we have an easy to use search and replace tool in our MyKinsta dashboard.

Kinsta search and replace tool

Here are simple steps to update from HTTP to HTTPS URLs:

  1. Enter in the search field the value you want to search for in the database, which in this case is our HTTP domain: http://wpdev.ink.
  2. Enter in the replace field the new value that should be used to replace the value that you are searching for. In this case it is our HTTPS domain, https://wpdev.ink.
  3. Ensure the “Dry Run” option is selected first, as this will count how many replacements will be made without actually making the replacements. Then click “Replace.”
  4. You can then run “Replace” again without Dry Run selected to make the changes in the database.

Confirmation on live search and replace

Check out our search and replace tutorial for additional details.

Option 2 – Better Search Replace Plugin

Another easy method you can use is a free plugin called Better Search Replace, by the awesome WordPress team over at Delicious Brains.

Better search replace options

Option 3 – interconnect/it Search Replace DB PHP Script

A third option you have for running a WordPress search and replace is to use a free PHP script from interconnect/it called Search Replace DB. This is one of our favorite tools to use with any HTTP to HTTPS migration.

Important! Using this script could break your WordPress website if you don’t know what you are doing. If you are not comfortable doing this, please check with a developer or your web host first.

To use the script, simply download the zip file, extract the folder called search-replace-db-master, and rename it to something secret of your choosing. In our example, we renamed it to update-db-1551. Then upload it via FTP, SFTP, or SCP to your web server’s public directory. This is typically the same directly that contains your /wp-content folder. Then navigate to your secret folder in your browser, such as https://domain.com/update-db-1551.

Interconnect search and replace script

The script will automatically attempt to find and populate the database field but you must check that the details are correct and that it is for the database you wish to carry out a search/replace operation on. You can click on “dry run” first to see what it will be updating/replacing. Then when you are ready click on “live run” which will perform the database updates and the WordPress search and replace.

And example for an HTTPS migration would be to replace “http://yourdomain.com” with “https://yourdomain.com.”

Search replace options

It is also very important due to security reasons that you delete this script after you are done! You can click the “delete me” button. It you don’t, it could leave your website open to attacks. It is also recommended to double check on your web server and confirm that the folder/script has been completely removed. Note: This script will update all of your entries in your database, including your WordPress Site URL, hardcoded links on pages and posts, etc.

If you hard-coded your home, site, or WP content areas in your wp-config.php file, ensure to update them to HTTPS.

define('WP_HOME', 'https://yourdomain.com');
define('WP_SITEURL', 'https://yourdomain.com');
define( 'WP_CONTENT_URL', 'https://yourdomain.com/wp-content' );

If you have a CDN and use a CNAME, such as cdn.domain.com, you will probably also want to run the script above a 2nd time to do a find for any hard-coded http://cdn.domain.com URLS and replace them with https://cdn.domain.com.

Option 4 – Search and Replace with WP-CLI

For you more tech-savvy folks and developers that don’t like to leave the command line, you can also update your links using WP-CLI. We recommend checking out this advanced search and replace WP-CLI guide.

7. Update Custom Scripts and External Libraries

Now that you have your old hard-coded URLs updated you will want to check any custom scripts or external libraries that you might have added in your header, footer, etc. This could be things like Google jquery, Font Awesome, CrazyEgg, AdRoll, Facebook, Hotjar, etc. An example for Google jquery, you would simply update it to point to the HTTPS version:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Pretty much every provider and or service should have an HTTPS version that you can switch to.

8. Migrate CDN From HTTP to HTTPS

Next, if you are using a CDN you will want to also migrate that to HTTPS otherwise you will run into mixed-content warning issues on your WordPress site. If you’re using Kinsta CDN you can skip this step as everything runs from our CDN over HTTPS by default.

But here are some useful links and tutorials on how to install and setup SSL for different third-party CDN providers. Note: Some of them even have a Let’s Encrypt integration, which means SSL is free. You can always check with your CDN provider to help with your HTTP to HTTPS migration if you have problems.

Once you have the CDN updated you will want to make sure and update that in whatever WordPress plugin you are using for integration. In this example below we are using CDN Enabler and we simply flip the URL over from HTTP to HTTPS, and enable the CDN HTTPS option at the bottom.

Change CDN to HTTPS

9. Check Your Website For Mixed Content Warnings

Next you will want to do a final check on your WordPress site to ensure you aren’t getting any mixed content warnings. These warnings appear when you are loading both HTTPS and HTTP scripts or content. You can’t load both. When you migrate to HTTPS, everything needs to be running over HTTPS. Wired documented their transition from HTTP to HTTPS and a snag they ran into:

“[…] one of the biggest challenges of moving to HTTPS is preparing all of our content to be delivered over secure connections. If a page is loaded over HTTPS, all other assets (like images and Javascript files) must also be loaded over HTTPS. We are seeing a high volume of reports of these “mixed content” issues, or events in which an insecure, HTTP asset is loaded in the context of a secure, HTTPS page. To do our rollout right, we need to ensure that we have fewer mixed content issues—that we are delivering as much of WIRED.com’s content as securely possible.”

Below are some examples of what happens in the browsers if you don’t fix these warnings.

Chrome Mixed Content Warning Example

Here is an example of what happens in Chrome when a mixed content warning fires.

Did you know that 83% of WordPress sites are vulnerable to hacker attacks?

WordPress sites hosted by Kinsta are automatically secured. We utilize firewalls, monitor sites uptime, and mitigate any attacks 24/7. If your site is hacked, we’ll fix it for free!

Chrome mixed content warning

Firefox Mixed Content Warning Example

Here is an example of what happens in Firefox when a mixed content warning fires.

Firefox mixed content warning

Internet Explorer Mixed Content Warning Example

Here is an example of what happens in Internet Explorer when a mixed content warning fires. As you can see, IE is probably one of the worst because it actually breaks the rendering of the page until the popup is clicked.

IE mixed content warning

There is a great free little tool called SSL Check from JitBit which you can run to easily scan your website or URL for non-secure content. The tool will crawl your HTTPS WordPress site and search for non-secure images, scripts and css-files that will trigger a warning message in browsers. The number of pages crawled is limited to 200 per website.

You can also use Chrome DevTools to do a quick check on any page by looking at the network requests panel. The security panel is also actually quite useful. You can immediately see any non-secure origins and then click into the requests to see what they are coming from.

Check HTTPs in Chrome Devtools

There is also desktop software called HTTPS Checker which you can install and scan your site. It can help you check for “not secure” warnings and content after big changes. It is available on Windows, Mac, and Ubuntu. The free plan allows you to check up to 100 pages.

HTTPS checker software

10. Update Google Search Console Profile

Now that you have your WordPress site up and running on HTTPS and hopefully no warnings, it is time to dive into some of the marketing side of things. Some of these are very important, so don’t skip these! The first thing you will want to do is create a new Google Search Console profile for the HTTPS version.

Add HTTPS property in GSC

After you have created the new HTTPS version you will want to re-submit your sitemap files, the now HTTPS versions.

HTTPS sitemap file

If you have a disavow file from bad backlinks or a penalty you will need to resubmit this. Not everyone will have one of these. This is very important! If you don’t do this you could permanently harm your site. Go to Google’s Disavow Tool and click into your original HTTP profile. Download the disavow file if it exists. Then go back to the tool again and submit your disavow file under the HTTPS version.

Note: After you have all this done you can safely delete the HTTP profile in Google Search Console.

11. Bing Webmaster Tools

Bing Webmaster Tools is a little different than Google Search Console. You don’t actually need to create a new HTTPS profile, instead just submit your newly created HTTPS sitemap.

Bing Webmaster Tools HTTPS

12. Google Analytics

Next you need to update your Google Analytics property and view. This won’t affect your analytics data it will simply help when linking your site to Google Search Console, etc. To update your property click into your domain property settings and under the default URL, change it to the HTTPS:// version.

Update Google Analytics property to HTTPS

To update your view click into your domain view settings and under the Website’s URL, change it to the HTTPS:// version.

Update Google Analytics view to HTTPS

You will also want to re-link your newly created Google Search Console profile that you created in Step 8 with your Google Analytics account. To do this click into your domain’s property settings, go down and click on “Adjust Search Console.” You can then link your new HTTPS GSC profile. By linking these together it enables search queries data to flow into your Google Analytics account.

Link Google Analytics to GSC

13. YouTube Channel

If you have a YouTube channel you will want to re-associate your website with your new HTTPS version in Google Search Console. Otherwise, you will get errors with annotations and other things in YouTube complaining about the HTTPS link being invalid. In your YouTube dashboard click into your Channel and then into “Advanced.” Then change your domain to the new HTTPS version and click Add. You might have to remove the old one and then re-add. You will have to then approve it by going into Google Search Console, clicking into your messages for that site and click on approve.

Update YouTube associated website to HTTPS

14. Miscellaneous

And that is about it as it pertains to your HTTP to HTTPS migration! Here are some more miscellaneous items you will want to update as well. Some of these may or may not be applicable for you depending on what you use.

  • Make sure to check that your robots.txt is accessible and working.
  • Ensure that any canonical tags point to the HTTPS version (this should have already been done if you followed Step 4 above).
  • If you are running a comment plugin such as Disqus, you will need to migrate your Disqus comments over from HTTP to HTTPS.
  • Update Your URLs in your Email Marketing software
  • Update PPC Ad URLs: AdWords, Bing Ads, AdRoll, Facebook Ads, etc.
  • Update Social Media Links (Facebook Page, Twitter Bio, Pinterest, Google+, etc.)

The Google search team also just recently published answers to 13 FAQs when it comes to HTTPS migrations.

Summary

As you can see there is probably a little more to an HTTP to HTTPS migration then you might have originally thought. However, it is all pretty easy and if you follow the steps above you should be good to go. If you are a Kinsta customer and have issues with your HTTPS migration as it pertains to your WordPress website, feel free to reach out to us. Did we miss any other important HTTP to HTTPS migration tips? If so, feel free to drop them in the comments below.

Discover more from WIREDGORILLA

Subscribe now to keep reading and get access to the full archive.

Continue reading