Website Redesign Project in the Dev Environment

Redesigning a website can be a daunting task because there are many technical, creative and strategic decisions that need to be made.

There are many websites that will tell you what to do when working on a website redesign project in the dev environment, but those tidbits of advice may point you in the wrong direction.

So, in the interest of being useful, we spoke to our designers, developers, and marketing team about what every business must follow when redesigning and protecting staging environments.

1. Having a Crawlable/Indexable Development Environment

Many web design agencies use an online staging environment to allow clients to view and comment on the design work. But there is a risk involved. Search Engines can crawl and index these subdomains and display the content in the search results. This is a bad thing because your future web strategy is revealed and if users stumble upon these half-built websites, it will leave a terrible impression. From an SEO point of view, an indexed staging environment can lead to duplicate content issues and negative consequences on your rankings.

Here are some steps you can follow to protect your staging environment.

  • Robots.txt

Block your staging environment in the robots.txt file by adding the following directive.

User-agent: *
Disallow:  /

However, even if you do have a robots.txt file, it doesn’t ensure that the website will not appear in the search results. For example, if someone accidentally links a staging URL in the live site and if the link is crawled, the site may appear in the search results. So to add an extra layer of protection, you can use the ‘noindex’ directive in your robots.txt as well. By adding this directive, you are giving a message to search engines to not access and index any pages in the dev environment. 

User-agent: *
Disallow: /
Noindex: /

  • Htaccess login

Edit the staging site’s .htaccess file (if you don’t have one, create it first) and add the following directive in the file:

AuthType Basic
AuthName “Protected Area”
AuthUserFile /path/to/.htpasswd
Require valid-user

Next, create a .htpasswd file in the path specified in the .htaccess file. The .htaccess file will have username(s) and password(s). For example,

Username – john:4ccEss123

If you want to encrypt the password so that it can’t be read in plain text, you can use tools like htpasswd generator to create encrypted passwords. For example,

Password – john:$apr1$jRiw/29M$a4r3bNJbrMpPhtVQWeVu30

This step will make your staging environment more secure and prevent unauthorized access as well as indexing by search engines.

To make it easier to share the dev site with your client(s) you can make the username/password combo more simple like staging/staging which is easy to remember. However, if your information is very sensitive then a strong password is recommended.  

  • IP address restriction

As an additional layer of protection, you can restrict the access of the staging site to specific IP addresses. By limiting entry (your own internal office network and the client’s network) you can prevent the access of the site to determined crackers.

Once you have both of the IP addresses, simply add the following directive in the staging site. This will allow the site to be accessed only by the specific IPs.

order allow, deny
allow from 123.456.789.012
deny from all 

2. Changing the Name of the Images That Rank Well

 If a web page is ranking well and you change the name of the image on that page, it may lead to a loss of ranking. Sometimes clients and designers who don’t have any SEO knowledge will replace old images with new ones. They may use names like image1.jpg which have no SEO value. This takes away the important context that search engines use to decide if a web page should rank. So when replacing old images with new ones, make sure you use the same image name and also preserve alt tags.

3. Changing Page URLs Without Redirecting

During the redesign process, some pages may be moved or renamed. In most cases, this changes the URL of the pages. This is a big mistake because most of those pages might have good rankings in search engines and may have inbound links pointing to them. The proper way to do this is by redirecting the old URL to the new one.

In case you want to delete a page, you have to redirect it to the most relevant page in the website. So in both cases, a 301 redirect must be used.

Checklist to Be Followed When Redesigning a Website

A little foresight can make your redesign process a huge success and less stressful. Here is a checklist that will set the project for success.

  • Header tags should match with the live site
  • Header <li> text should match with the live pages
  • Add title text for “a” tags in the menu to match with the live page
  • Alt tag, image name and title text for all images should be preserved
  • Testimonials and schema (review count, rating, local business) for all pages should match with the live site 
  • Meta tags should match with the live site

Don’t Neglect to Pay Attention to Detail

In summary, these mistakes are difficult to avoid. So, you simply need to be aware of them, formulate a plan and pay attention to detail.

These days, when it comes to the web, you simply can’t be safe enough. With these security measures, you can definitely discourage amateurs and possible PR gaffes that may emerge from a simple Google search.

What precautionary steps do you follow when working on a design project in the staging environment? Do share them in the comments section.

Give Us a Heart
Posted in Web Development
Web Development

Leave a Comment