SEO Considerations for Responsive Design

It’s no surprise that the use of Internet on mobile devices continues to rise at an exponential rate, we’re all constantly attached to our phones and tablets.  It has been estimated that nearly half of all local searches are occurring on a mobile device. It has also been projected that in 2014, the use of mobile Internet will surpass that of fixed Internet overall.

mobile-internet-increase

Search engines recognize this trend and strive to promote results optimized for mobile use. In short, Google has started rewarding sites that have mobile-friendly design with higher rankings and opportunity. So essentially, there are no reasons to NOT optimize your site for mobile.

Overview of Responsive Design

One way to accomplish this is to add responsive functionality to your website. We’ve all struggled with navigating a non-mobile site from a smartphone. Even on a desktop, most of us have been forced to scroll horizontally if the web page is larger than the browser window. Responsive design eliminates the issue by shifting the website’s layout to accommodate whatever device or browser size is in use. User navigation is clear and easy on desktops, laptops, smart phones, and tablets.

Responsive-web-design

Even Google recommends using responsive web design:

  • Consistent URL structure: A single URL for a piece of content makes it easier for your users to interact with, share, and link to your content. Also, a single URL enables Google’s algorithms assign the indexing properties for the content.
  • Smoother user experience: No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience. Check out Google Developeras “Pitfalls when detecting user agents” section for details.
  • Resourceful for your site and Google’s crawlers: For responsive web design pages, any Googlebot user agents need to crawl your pages only once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh. However, the transition to a responsively designed website can potentially lead to errors that can damage a siteas ranking and authority if not done correctly.

Responsive design considerations

  1. Maintaining current site authority: Whenever a site is changed or updated, it is critical to maintain the previous site authority by redirecting previous URLs to new URLs using a 301 Permanent Redirect, when applicable. Additionally, it is important to verify that there is a minimal number of 404 Errors and other crawling and/or HTML errors that can potentially slow load time and impede user experience.
  2. Avoiding duplicate content: In instances where a separate mobile site is used, the required rel=”canonical” tag on the mobile URL should be added to the mobile page’s HTML to avoid duplicate content. Otherwise, duplicate content has the potential to damage a siteas authority significantly and could possibly result in algorithmic penalties from Google.
  3. Crawling requirements: Be sure not to block the crawling of any Googlebot of the page assets (CSS, JavaScript, and images) using robots.txt or otherwise. Being able to access these external files fully will help Googleas algorithms detect your site’s responsive web design configuration and treat it appropriately.
  4. Avoiding irrelevant cross-linking: When a website serves users on separate smartphone-optimized URLs, a familiar practice is to have links to the desktop-optimized version, and likewise a link from the desktop page to the smartphone page. As such, common error is to have link point to an irrelevant page such as having the smartphone pages link to the desktop site’s homepage. If you add such links be sure that the links point to the correct equivalent page.
  5. JavaScript and Responsive Web Design: One part of building smartphone-optimized sites that requires careful consideration is the use of JavaScript to alter the rendering and behavior of the site on different devices. Typical uses of JavaScript include deciding which ad or which image resolution variant to show on the page. Google describes different approaches to using JavaScript and how they relate to their recommendation of using responsive web design.

Common configurations:

Three popular implementations of JavaScript for smartphone-optimized sites include the following:

  • JavaScript-adaptive: In this configuration, all devices are served the same HTML, CSS, and JavaScript content. When the JavaScript is executed on the device, the rendering or behavior of the site is altered. For websites that require JavaScript, this is Google’s recommended configuration.
  • Combined detection: In this implementation, the website uses both JavaScript and server-side detection of device capabilities to serve different content to different devices. The website should include the “Vary: User-agent” HTTP response header when a URL that serves different HTML content to different user-agents is requested.
  • Dynamically-served JavaScript: In this configuration, all devices are served the same HTML, but the JavaScript is served from a URL that dynamically serves different JavaScript code depending on the device’s user-agent. In this case, we recommend the JavaScript file be served with the “Vary: User-agent” HTTP header. This is a signal to Internet caches and Googlebot that the JavaScript can be different for different user agents, and is a signal for Googlebot to crawl the JavaScript file using different Googlebot user-agents.

 

The benefits of moving to a responsively designed site are evident. A majority of your customers are searching for solutions on their mobile device, and itas key that your solution appears. Responsive design can help that happen. But, when undertaking a site redesign, it’s important to keep these factors in mind so that you donat lose any SEO benefits you’ve built over time.

Are you interested in learning the basics of SEO? Click to explore more secrets in our updated SEO Guide!