Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Web Design Tips to Avoid Traffic Loss When Your Website Is Facing Downtime

DZone 's Guide to

Web Design Tips to Avoid Traffic Loss When Your Website Is Facing Downtime

Nobody wants their website to go down, but sometimes it happens. Read on to get some good advice on how to make the best of this bad situation.

· Web Dev Zone ·
Free Resource

Downtime can happen to any online merchant at any time. Whether it is intentional, accidental, or spontaneous, the question is, are you prepared to take the plunge when it happens?

A bad downtime means your website will not serve the incoming customer. This not only makes the website unavailable to the visitors, but also halts your store’s ability to generate conversions. Consequently, the visitor gets bad user experience and your page’s bounce rates begin to increase. While putting the website in downtime should be the last resort, some cases make it necessary for the website to become inaccessible, such as server maintenance. However, when you are experiencing downtime on your website, there are a few ways you can turn it around and actually benefit from it.

Inform Search Engines That the Downtime Is Temporary

In case you have decided to purposely make your website inaccessible, informing the search engines should be the first thing you must do to prevent your rankings from going down. For Google, you can utilize the HTTP status code: 503 Service Unavailable, to inform the search engines about the downtime. For that, the person handling the downtime must create a file that returns a 503 status code on the server to notify the bot. When Google sees it, it identifies the error and recognizes the situation so no further damage is done to the website. You can do it as simple as copying the four lines of code shared below and save it as 503.php. To put it into effect, you must place the file in the root of your server.

<?php
	header(“HTTP/1.1 503 Service Temporarily Unavailable”) ;
	header(“Status: 503 Service Temporarily Unavailable”) ;
	header(“Retry-After: 3600”) ;
?>

Using the 503 status code shared above you can inform Google about the downtime your website is experiencing. The last line indicates the expected time the website will be online again. You can put a time by providing a number in seconds, or a date in the code. For example, if you own an online store based in Washington DC, and expect the website to be live by May 10, 2019, at 6 AM, then the code should be as follows,

header(“Retry-After: Fri, 10 May 2019 10:00:00 GMT”) ;

You may also notice that I have written 10:00:00 in the code, while in the paragraph earlier I had written 6 AM. The eExplanation for this is that since time has to be provided in GMT/UTC, the merchant in Washington DC was 4 hours ahead of local time.

Still, adding a 503 message on the server will not be sufficient. Since all your visitors will come from different sources and land on multiple pages of your website, it is imperative that they all be redirected to the designated message that explains the website is temporality down/closed.

This is more easily done on an Apache/Linux server, using a .htaccess file for redirecting all the pages to the 503.php file. Although the .htaccess file is more commonly used for 301 redirects, our purpose is not the same here. In this case, we will use a 302 redirect. For many website administrators, using a 302 redirect may be a tricky decision, owing to its harmful potential towards websites – only when used incorrectly. However, using a 302 redirect is the best option you have to brush off the negative effects of downtime on your website and keep its rankings alive.

From the code we have shared below, save the 6 following lines as a .htaccess file before placing it in the root of your server.

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{ REMOTE_ADDR }  ! ^00\.00\.00\.00
RewriteCond %{ REQUEST_URI }  ! ^/503.php [NC]
RewriteRule .*/503.php [R,L]

From the last line you can see the ‘R’ which indicates it is a 302 redirect. If it was a 301 redirect then the line of code should be [R=301, L]. The file allows the website admin to get access to the site while showing a 503 message to everyone else. If the store owner has the IP address: 162.178.211.3, then it will be put in the line as follows,

RewriteCond %{ REMOTE_ADDR }  ! ^162\.178\.211\.3

Finally, after placing the two files on the root of your server you will have successfully preserved your website and saved its ranking from taking a nose dive. Google will know the website will be live at the time mentioned in the code. The only thing you now need to work on is how to inform your visitors and customers as effectively as possible. You can also get a more detailed example from MOZ on how to tackle downtime when site is under maintenance.

Add a Maintenance Page Using Third-Party Extensions

It is also crucial to consider how will you inform your audience about the downtime your website is experiencing, without causing discontent to your customers.

While there are several ways you can go about it, the most effective and convenient method to keep your SEO active and your customers engaged is using a third-party extension. There are numerous extensions available on the market such as the Coming Soon and Maintenance Mode Extension. Using such extensions gives you a bundle of features to optimize your error page and encourage customers to revisit the website when it is live. It works by allowing the store admin to place an attractive looking banner on the maintenance page that informs the customer about the site’s current status.

Magento 2 Maintenance Mode

To keep the customer engaged, you can also customize text labels shown on the page, add meta data to get more SEO exposure, add new backgrounds, and enable sign-up forms and subscription boxes to compliment your site registrations. However, the best thing about using such extensions is that you add a countdown timer and social media widgets to keep your visitors captivated. this helps your customer redirect to the brand’s official social media handles where they can find relevant information.

Topics:
web dev ,site crash ,application maintenance ,web application performance

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}