How to Launch a Successful Redesign That Doesn’t Tank Your Rankings

You have a new brand or you are just looking for a fresh look and updated copy, but either way you are ready to completely redesign your website. There is one big concern on your mind though: ”How do I keep my search engine rankings from dropping?” Although you should expect to see a slight dip for two to four weeks after the launch, if the redesign is done right you will return to your original ranking, or better yet, see a considerable ranking improvement.

Here are some simple developer tips to ensure a successful redesign:

1. Optimize for Mobile

In 2015, the term “Mobilegeddon” was coined when Google updated their algorithm to give priority in their mobile search to websites that display well on mobile. 2017 saw mobile take the lead in online usage. Now in 2018, Google has started putting mobile-first indexing into effect. Catering to the mobile crowd is a must.

The two most popular processes of optimizing for mobile are adaptive design and responsive design.

Adaptive design is the creation of multiple versions of a website to fit preselected device types. This process allows for more in-depth mobile optimization, such as cutting down on javascript usage and large images on mobile sites, because you have separate HTML and CSS for each layout. Updating an adaptive design, however, would require you to update each separate layout every time.

Responsive design is fluid, responding to the changes in browser width to allow the content to be optimally viewed on any device. The biggest pro to this process is having your singular layout fit any size screen, but it takes more work to accomplish and to keep load time on mobile devices to a minimum.

2. Optimize for Speed

Page and site speed not only affect your search engine ranking but also how your pages are indexed and how users interact with your site. Every second it takes your site to load increases the chances of a user leaving. Tools, such as Google PageSpeed Insights and Pingdom, can give you insight into your pages’ performance. Below are a few things you can take into consideration when doing your redesign.

Optimize Images

The dimensions of your images should be no larger than how they would appear on a desktop browser. For example, a good width size for a full-width header background image would be either 1920px or 1366px depending on the largest screen size you’re optimizing for.

You can put your images through a compression tool like TinyPNG to decrease the file size. By choosing the most appropriate file type, you can compress your images without losing quality. JPG is most suited for photos, PNG for raster graphics, and SVG for vector graphics.

Eliminate Render-Blocking Javascript

There are a few different ways you can set up javascript in your HTML in order to keep it from slowing the loading of the rest of your content, but oftentimes, it’s not possible to completely eliminate render-blocking content. The simplest optimization you can do is place your script tags at the end of your document before the closing body tag and make sure there aren’t any unnecessary scripts running on your pages.

Combine and Minify Code

If your website server is still using the HTTP/1 protocol, you will want to keep your CSS and JS files to a minimum to reduce calls to the server. You can do this by combining as much of the code into one file as you can. However, if your server is using the HTTP/2 protocol, this isn’t necessary.

For further code optimization, you can minify your CSS and JS code to decrease the file sizes. Some CMS platforms will do this for you.

3. Create Well-Structured Content

Search engine optimization is key to a successful relaunch, and crucial to SEO are the copywriter and SEO specialists writing relevant content for each page and introducing keywords appropriately throughout. This includes the copy for meta descriptions, page titles, and even URL paths. The developer’s role is to make sure the website’s content can be read efficiently by search engine crawlers that use website structure to prioritize content and understand the hierarchy of your site.

Header Tags

Header tags (H1, H2, and so on) identify key sections of your webpage and tell crawlers and users what the page is about. The smaller the heading, the less importance is put on it, but that doesn’t mean you should  make all of your headings an H1. It’s best practice to have an H1 at the top of your page, H2s to separate large sections of your pages, and then H3 and beyond for smaller blocks of content.

Canonicalization

Canonicalization prevents problems that occur when identical content appears on multiple pages. This is most often used with the homepage where URLs like https://www.smartbugmedia.com and https://smartbugmedia.com both go to the same page. By adding <link rel="canonical" href="https://www.smartbugmedia.com"> to the page, you tell search engines that no matter what URL the user comes from, that specified URL is the one the content belongs to.

Sitemap

Creating an .xml sitemap lets web crawlers easily find all the important links of your site and understand your website structure. A lot of CMS platforms create one for you. You can also create sitemaps for images and videos to add additional information that will help crawlers find and better assess and categorize them. To make sure the crawlers find your sitemap, you can add it your robots.txt document and/or submit it to search engine console tools.

4. Redirect Broken Links

If you change the link structure of your site, you risk losing individual page rankings that you have already built up. However, an overhaul of your website structure can be a necessary evil to implement much-needed keywords and make your site easier to navigate. If that’s the case, fear not. There is a way to keep from losing those links to the void―301 (permanent) redirects. If you remove a page completely from your site, add a redirect that directs that link to the most similar page. If you change the url, just direct the old one to the new one.

On launch day, be sure everyone involved has time to spend checking the site for any errors and missed optimization opportunities. Tools like Google’s search console and analytics are especially helpful for things like tracking down broken links and monitoring the effectiveness of your new design. There is so much more you can do to increase the performance of your content going forward, but this will at least give you a starting point to launch a successful redesign.

This blog is the second in a series on how to make your website redesign successful. Click the following link to see the first blog in this series, "How to Make A Website Redesign Successful: A Marketing Consultant’s Perspective". Or, continue on to the third blog in the series "How to Make Your Web Redesign Successful (from a Creative Perspective)".