Redirect HTTP to HTTPS : Tutorial for Beginners

Want to retain your search engine traffic while moving from HTTP to HTTPS? Adding redirect to HTTP to HTTPS is tedious and needs careful planning. This step-by-step tutorial for beginners will resolve all your doubts and make the task clear and simple for you.

Heard the buzz around SSL and HTTPS enabled websites? As an increasing number of websites are adopting HTTPS, it seems that HTTPS is the way ahead for all data transfers on the Web. Are you still contemplating on whether to make the switch from HTTP to HTTPS for your website? Have you already decided to redirect HTTP to HTTPS for your website? Are you wondering about how to go about this not-so-simple looking task of moving your website or blog to HTTPS?

Not to worry, we have recently upgraded the TemplateToaster  website builder software blog to HTTPS and have all the steps tried and tested. Read ahead, for a step-by-step tutorial for beginners to redirect HTTP to HTTPS.

Table of Contents

1. What is HTTPS?
2. Redirect HTTP to HTTPS: Steps to follow
3. Update all internal and external links to HTTPS
   • General Websites
   • WordPress websites
4. Set up 301 redirect HTTP to HTTPS
5. Add all variants of the website site in Google Console
6. HTTP Strict Transparent Security (HSTS)
7. How to setup HSTS in minutes
8. Challenges to Keep in Mind if You Redirect HTTP to HTTPS
9. How to verify HTTPS complete migration
10. Moving from HTTP to HTTPS: SEO considerations
    • Common Issues and Pitfalls
11. Redirect HTTP to HTTPS Checklist
12. Creating secure websites with TemplateToaster

What is HTTPS?

HTTPS, as we already know from our previous article on SSL, is the protocol over which data is exchanged between a website and a browser. It is the secure version of HTTP which uses the SSL connections for communication over HTTPS. In other words,

HTTPS = HTTP + SSL

We have also learnt that HTTPS protects data by encrypting it using an SSL (Secure Sockets Layer) Certificate. The way HTTPS works is that it establishes an SSL connection, wraps the data into SSL packets and uses these packets for data transfer.

Before we proceed it is important to consider the primary benefits of moving your site to HTTPS. We know that Google has already added “HTTPS” as an important SEO ranking signal. It means that HTTPS websites will be at a higher SEO ranking in the google search than the HTTP ones. Google also has started using Chrome to warn users of the security risks in visiting non-secure HTTP websites. From January this year, Google’s Chrome started using a “not secure” label, for HTTP pages containing password or credit card form fields. Starting in October, Chrome will start using this label for all pages whenever users type any data into HTTP enabled web pages. So HTTPS is a better choice as it provides increased security, increased referral data, and a potential boost in SEO rankings.

It is to be noted that migration has to be done carefully and efficiently. Otherwise, it can have a negative impact on your website’s rankings. You need to ensure that you plan and implement each stage of the migration.

We have recently moved the TemplateToaster blog to HTTPS and have learnt the process of migrating from HTTP to HTTPS. We think it would be worth sharing our experiences and findings with all of you. Here is a tutorial on the steps involved in redirecting HTTP to HTTPS.

How to Redirect HTTP to HTTPS

In brief, the generic steps to follow, if you want to redirect HTTP to HTTPS are listed below:

Steps to Redirect HTTP to HTTPS

Step 1: Purchase an SSL certificate: The first requirement for HTTPS is to purchase an SSL certificate for your website. There are many types of SSL certificates available. Select one based on your business needs.

Step 2: Install the SSL certificate: Once purchased, the SSL certificate is to be installed on your website. The process requires generating both public and private encryption keys and adding them using the Web hosting control panel.

Step 3: Update all internal and external links to HTTPS: Ensure all the internal and external links point to the new HTTPS URLs. Internal links include navigation/menu links, images, CSS references etc. If internally the website still references HTTP files, it will break. Make sure to change all external links and local directory listings to point to the new HTTPS website.

Step 4: Set up 301 redirects from HTTP to HTTPS Implement a permanent 301 redirect for every HTTP page to redirect to the HTTPS counterpart. This way the search engines are notified that the site’s addresses have changed. Also, any bookmarks to a page on your site are automatically redirected to the https address.

Step 5: Add all variants of the website site in Webmaster Tools: Add the HTTPS website as a new property in the webmaster tools account.

We have already discussed the first 2 steps in the article on How to Setup SSL. Now we will explain what you need to do once your SSL certificate is installed.

Update all internal and external links to HTTPS

General Websites

The first thing to do is to duplicate the content from the HTTP version to the location of the HTTPS version. In most cases, this can be done just by copying the content from the HTTP directory to the HTTPS directory on the same web server. Now we need to modify the HTTPS copy of the content using the following methods:

• Canonicals: Update all the canonicals to absolute HTTPS URLs for the HTTPS version.

  Old:
  
  <link href="http://www.example.com/deep/url" rel="canonical" />
  
  New:
  
  <link href="https://www.example.com/deep/url" rel="canonical" />

   

  It is recommended to not use relative URLs in canonicals. If you have a mobile version of the website, then you need yo update the canonicals on the mobile version too.

• Pagination: Update the pagination to use absolute HTTPS URLs.

  Old:
  
  <link href="http://www.example.com/deep/url?page=1" rel="prev" />
  
  <link href="http://www.example.com/deep/url?page=3" rel="next" />
  
  New:
  
  <link href="https://www.example.com/deep/url?page=1" rel="prev" />
  
  <link href="https://www.example.com/deep/url?page=3" rel="next" />

• Alternate Annotations: Update all alternate annotations on your website.
  • Hreflang – The website may use Hreflang annotations in the XML Sitemaps and the website. Updated these to the absolute HTTPS URLs.

    Old:
    
    <link rel="alternate" hreflang="x-default" href="http://www.example.com/" />
    
    <link rel="alternate" hreflang="es" href="http://www.example.com/es/" />
    
    <link rel="alternate" hreflang="fr" href="http://www.example.com/fr/" />
    
    New:
    
    <link rel="alternate" hreflang="x-default" href="https://www.example.com/" />
    
    <link rel="alternate" hreflang="es" href="https://www.example.com/es/" />
    
    <link rel="alternate" hreflang="fr" href="https://www.example.com/fr/" />

• • Mobile: If you have a separate mobile website, there would be mobile alternate annotations present on the website.

    Old:
    
    <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1">
    
    New:
    
    <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page-1">

• • Feeds: Update the alternate annotations to Atom or RSS or JSON feeds.

    Old:
    
    <link href="http://www.example.com/feed/rss/" rel="alternate" type="application/rss+xml" />
    
    <link href="http://www.example.com/feed/atom/" rel="alternate" type="application/atom+xml" />
    
    <link href="http://www.example.com/json.as" rel="alternate" type="application/activitystream+json" />
    
    New:
    
    <link href="https://www.example.com/feed/rss/" rel="alternate" type="application/rss+xml" />
    
    <link href="https://www.example.com/feed/atom/" rel="alternate" type="application/atom+xml" />
    
    <link href="https://www.example.com/json.as" rel="alternate" type="application/activitystream+json" />

• Internal Links: You need to update the internal links if the website does not use only relative internal links, including inside the Javascript and CSS files. If you use any custom or third-party scripts, update them to also point to the HTTPS versions. Look at the HTML source and find and update all internal links and references to internal links inside the assets. You can make the changes using the following options:
  1. Switch to using only relative URLs:

     Old:
     <a href="http://www.example.com/">home</a>
     New:
     <a href="/">home</a>

     Note that doing this option may conflict with internal links to assets. This happens especially when the links are defined in CSS and/or Javascript files. You can also define a base tag URL in the HEAD of the HTML source code which would be appended to the relative URLs.

  2. Update internal URLs from HTTP to HTTPS:

     Old:
     <a href="http://www.example.com/">home</a>
     New:
     <a href="https://www.example.com/">home</a>

  3. Remove the protocol from the internal URLs:

     Old:
     <a href="http://www.example.com/">home</a>
     New:
     <a href="//www.example.com/">home</a>

     The links will now be dependent on the protocol of the URL visited.

WordPress websites

In the case of WordPress websites, we need to follow these steps to update the internal and external links to HTTPS:

• Update WordPress URLs: Use the dashboard settings to update these URLs:

• Change all links to HTTPS: Use the following options to update all URLs to HTTPS:
  • Change the static URLs manually: Browse all the theme files and manually replace static occurrences of HTTP with HTTPS in theme files like header.php, footer.php etc.
  • Use the Find and Replace Plugin: The plugin will enable you to find all HTTP links in the WordPress Database and replace the occurrences with HTTPS.
  • Manually check the website’s pages: If you see the yellow padlock next to a URL, it means the page still loads with HTTP. Check if there is any HTTP link pointed to that page.

Set up 301 redirect HTTP to HTTPS:

It is essential to implement 301 redirects for HTTP pages to HTTPS to retain your search engine rankings and traffic. Google by itself will not update to index the new HTTPS website. Instead, you have to indicate that the URLs have changed. This has to be done through the use of 301 redirects.

• Edit .htaccess file: If your website is running on an Apache server, add this snippet of code to your .htaccess file.

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

• Using PHP for every page: Add the following PHP code as a function. Call this function in all the pages where you need the redirect http to https.

  < ?php function redirect_http_to_https() { if($_SERVER['HTTPS']!=”on”) { $redirect_url= “https://”.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];header(“Location:$redirect_url”); } } ?>

Note that we use the PHP server variable “HTTPS”. $_SERVER [‘HTTPS’] that returns “on” values to check if the site is already on SSL. If it is not already set then we update the header with the new location as per variable redirect_url.

• Redirect Plugins for WordPress: Use a Redirect Plugin for WordPress to safely add 301 redirections for your WordPress content
  • The Redirection plugin manages 301 redirections and tracks 404 errors. It automatically adds a 301 redirection when the URL of a post changes.
  • The Yoast SEO Premium plugin has a built-in Redirect manager that helps you redirect HTTP to HTTPS URL for a post, page etc. The plugin also comes with a .htaccess editor that you can use for directly editing the .htaccess file.
  • The Simple 301 Redirects plugin provides an easy method of redirecting requests using 301 redirections.
  • The Quick Page/Post Redirect Plugin provides an option meta box on the edit screen. In this meta box, you can specify the redirect location and type (301, 302 or meta).

Add all variants of the website site in Google Console

Go to the Google Search Console (Webmaster tools) and add information about the update. You need to add the HTTPS website as a new property in your webmaster tools account. You also need to submit Sitemaps accordingly. Google also requires the proper implementation of 301 redirects on your website to understand your new site structure.

A minimum of four variations of the website domain name should be present in Google Search Console.

• http://example.com
• http://www.example.com
• https://example.com
• https://www.example.com

HTTP Strict Transparent Security (HSTS)

Web servers are in most cases not connected directly with each other. Requests and responses pass through a series of network routers before they reach the destination. The routers, therefore have full access to requests sent over HTTP connections. The data is transferred unencrypted, which can lead to potential man-in-the-middle attacks.

HTTP Strict Transport Security is a security feature that informs a browser that the website should only be communicated using HTTPS. The browser automatically converts all HTTP requests to the site to HTTPS requests instead. The HSTS policy forces that all responses should pass through HTTPS connections instead of HTTP. This ensures that the entire communication channel is encrypted before any data is transmitted. This makes it impossible to read or modify the data in transit.

HSTS can also be used to significantly improve the performance of the site by avoiding redirects. With HSTS the browsers are not allowed to ignore certificate errors and browse the website anyway.

The configurable parameters for HSTS are:

• Enable HSTS (Strict-Transport-Security): On/Off.
• Max Age (max-age): This is a “time to live” field for the HSTS header. Web browsers cache and enforce HSTS policy for the duration of this value. A value of “0” disables HSTS.
• Apply HSTS Policy to subdomains (includeSubDomains): This field applies HSTS policy to every host in a domain.

Setting up HSTS is simple and can be easily accomplished. Let us see how it is done in Apache. Other web servers also provide this feature and you need to follow server specific steps to setup HSTS.

How to setup HSTS in minutes

After the website redirection to HTTPS is complete, then setting up HSTS is done by modifying the header. You need to add the Strict-Transport-Security HTTP header to the web server and also specify a length of time (max-age) for the policy to be enabled. In Apache this can be done with the following code:

Header always set Strict-Transport-Security "max-age=60; includeSubDomains;"

The browser caches the HSTS settings for the duration of max-age. In the above code, the HSTS policy is enabled for 60 seconds. It is recommended to keep the max-age to low values during testing and initial go-live. You can increase this value, once you have verified that the website is working perfectly.

 Redirect HTTP to HTTPS -Challenges to Keep in Mind

It is of primary importance to prepare a plan when you decide to migrate to HTTPS. It is to be noted that challenges will be there that you need to overcome with careful planning. Some of the issues that people see when they set up HTTP to HTTPS redirection as follows:

1. Mistakes happen and details may be left out: Adding HTTPS redirection to an entire site to HTTPS requires moving many parts. You might take care but still, overlook important details. Follow a checklist and ensure you have covered everything.
2. Speed issues – Website may slow down: HTTPS requires extra communication between servers. This might result in slowing down the websites. However, if you follow best practices the site should not see a performance impact.
3. Costs: SSL certificates are costly and may range from $100-200 a year. That can be too expensive for small websites. However, these days there are free options e.g Let’s Encrypt, to move to HTTPS.
4. Not everything is ready for HTTPS: Not all applications may work with HTTPS. Older web applications may not be able to handle HTTPS URLs.

How to verify HTTPS complete migration

Once you have completed the HTTP to HTTPS migration you need to make sure that everything is covered. Some of your pages might remain with insecure elements and the websites may not show the proper security lock. There are online tools available that you can use to verify that the migration was complete. The Why No Padlock tool is an online tool that you can use to check if there are any insecure items on your website. You can promptly check if there are any insecure links found within a URL. The tool helps to identify insecure images, CSS and JavaScript and also insecure images that are linked into CSS and JavaScript. If your website is completely secure the tool would show a message “All items called securely” otherwise it would list the insecure elements.

Moving from HTTP to HTTPS: SEO considerations

We have already mentioned above that using HTTPS can improve the SEO rankings of your websites. Though a lightweight ranking signal at present, HTTPS will be an important ranking signal in the future.

There are some guidelines from Google regarding secure websites. There are SEO aspects that you need to take into account when planning how to redirect HTTP to HTTPS. This would certainly help you in maintaining the current rankings of your website.With the Google search engine, changes in

With the Google search engine, changes in a website are bound to result in either short term or long term ranking drop or fluctuation. The extent of this could vary from a few days to weeks or even months.

Rectifying these issues can take time, considering Google’s re-crawl and re-indexation rates. Take care to choose a quiet period when you bring your site up after the migration since it is certain that there will be fluctuations in search rankings
Let us look in detail at all these points for SEO considerations for HTTP to HTTPS redirection.

Common Issues and Pitfalls in Redirect HTTP to HTTPS

These issues are seen if HTTPS migration in incomplete and you missed out on some critical points:

• Google is not able to crawl the HTTP version of the site, or other site crawls in general.
• Content duplication issues, as both HTTPS and HTTP versions of the pages, can be shown.
• The difference in the versions of the page showing on HTTP and HTTPS.

Going with what Google says, you should not worry about switching from HTTP to HTTPS in terms of SEO. Google has been recommending HTTPS for years now. Google lists the below best practices when switching to HTTPS:

• Decide if you need a single, multi-domain, or wildcard certificate.
• Use 2048-bit key certificates to generate a CSR on the web server.
• Use relative URLs for resources that are in the same secure domain
• Use protocol relative URLs for all other domains
• Don’t block your HTTPS site from crawling using robots.txt
• Allow indexing of your pages by search engines where possible. Avoid the no index robots Meta tag.
• Google has also updated Google Webmaster Tools to better handle HTTPS sites and the reporting on them.
• Track your HTTP to HTTPS migration carefully in your analytics software and within Google Webmaster Tools.

More importantly, it is up to you to ensure that your site traffic doesn’t suffer. You need to communicate to Google that your website has moved to redirect HTTP to HTTPS. You also need to follow the SEO checklist to preserve your rankings. This would help you to maximise site usability, search engine crawling, and indexing. Let us look at a few salient features from the SEO checklist.

• Google Search Console: You should tell Google about the change to HTTPS. Filling out the official form makes the transition easier and helps ensure that you don’t lose your SEO rankings. To do this, you need to go to the Search Console or the Webmaster Tools and make the changes as described earlier in this article.
• Submit a New Sitemap: You need to submit a sitemap for your new domain name with HTTPS.
• First, create an XML sitemap and then submit that sitemap to the Google Search Console.
• Update your robots.txt file: Add the new sitemaps to the file. Make sure your robots.txt does not block any important pages.
• Resubmit Your Disavow File: Since you must create a new Google search console profile with the HTTPS URL, you need to resubmit the disavow file under the new profile. Otherwise, in case of an algorithm update, Google will not detect your disavow file.
• Migrating social share counts: When migrating to HTTPS, you may want to preserve your social share counts that display in social share buttons. These counts probably don’t impact the SEO rankings, but they act as strong social proof. Look at this tutorial to understand how to alter your social buttons’ code to preserve the share counts.
• Update Your Google Analytics Profile URL: You need to update your Google Analytics Website’s URL. Go to your account, click on Admin and then your view settings. Modify the URL to the HTTPS version.
• Check the link-juice page ranking: It seems that setting up the 301 redirects would result in a certain percentage of PageRank getting lost through the redirect. Analyse the impact of 301s on your link-juice ranking and check how each search engine’s traffic is affected.
• Monitor the Google Search Console for any issues: Keep a check on the Google Search Console for any indexing issues Google runs into. Check for index count, crawl errors, and search queries, etc. Make sure your new site is getting indexed and crawled correctly. Google has a full list of everything to check.

Redirect HTTP to HTTPS Checklist

After the HTTPS migration is done you need to check whether you have taken care of all essential points. Pick up an “HTTP to HTTPS checklist” or create your own with extra points specific to your websites. Follow the checklist as you work with the migration. In the end, go over the checklist and check if you have marked all the points completed. Summarising all that we discussed above is the below checklist you can use to redirect HTTP to HTTPS.

1. Start with a test server.
2. Crawl the current website.
3. Read any documentation regarding your server or CDN for HTTPS.
4. Get a security certificate and install on the server.Update references in content.
5. Update references in content.
6. Update references in templates.Update canonical tags.
7. Update canonical tags.
8. Update hreflang tags.
9. Update any plugins/modules/add-ons.
10. Change any CMS-specific settings that may need to be changed.Crawl the site to make sure nothing is broken.
11. Crawl the site to make sure nothing is broken.
12. Make sure any used external scripts support HTTPS.
13. Force HTTPS with redirects.
14. Update old redirects currently in use.
15. Crawl the old URLs for any broken redirects or any redirect chains.Update sitemaps to use HTTPS versions of the URLs.
16. Update sitemaps to use HTTPS versions of the URLs.
17. Update your robots.txt file to include your new sitemap.
18. Enable HSTS.Enable OCSP stapling.
19. Enable OCSP stapling.
20. Add HTTP/2 support.
21. Add the HTTPS version of your site to all the search engine versions of webmaster tools.
22. Update your disavow file.
23. Update your URL parameter settings.
24. Go live!
25. Update the default URL in your analytics platform.
26. Update your social share counts.Update all paid media, email or marketing automation campaigns with the HTTPS versions of the URLs.
27. Update all paid media, email or marketing automation campaigns with the HTTPS versions of the URLs.
28. Update any other tools such as A/B testing software, heat maps and keyword tracking to use the HTTPS versions of the URLs.
29. Monitor everything during the migration and check several times to make sure everything is working properly.

Creating secure websites with TemplateToaster website maker

TemplateToaster is a WordPress website Builder responsible for developing websites across multiple CMS including Drupal, Joomla, Prestashop etc. Incorporating TemplateToaster  in your workflow will give you a range of securely implemented themes to work with. These themes can be used to modify a website with security added or build a new secure website.
[call_to_action color=”gray” button_icon=”download” button_icon_position=”left” button_text=”Download Now” button_url=”https://templatetoaster.com/download” button_color=”violet”]
Best Drag and Drop interface to Design stunning WordPress Themes
[/call_to_action]