Responsive design presents a lot of benefits for designers and for users, but how does it impact visibility and rankings within search engines?

How does Responsive Design impact SEO?

How Does Responsive Design Impact SEO?Tom Demers, Managing Partner, Measured SEM

What is Responsive Design?

Establishing a Common Definition for Responsive Design:

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Responsive Design from an SEO Perspective

This presentation focuses on responsive design from an SEO perspective and looks at how it can impact traffic from search engines – this of course is not the only consideration in deciding on whether to use responsive design – you should also consider important business factors such as development costs, usability & conversion, and the overall impact of responsive design on your business.

Image Credit: http://blog.hiledesign.com/wp-content/uploads/2012/01/seo1.jpg

What Does Google Say?

Via: https://developers.google.com/webmasters/smartphone-sites/details

What Specific SEO Issues Can Responsive Design Impact?

Responsive design can have an impact (be it positive or negative) on several key aspects of SEO:

1. Duplicate Content 2. The Concentration of Link Equity within Your Site3. The “Sharability” of a Specific URL and Piece of Content4. Page Load Time & Mobile User Experience5. Specific Keyword Targeting for Mobile vs. Desktop Usage

Duplicate Content & Link Consolidation

What are duplicate content issues?

Creating multiple versions of the same content that lives on separate URLs

Why is this Bad for SEO?

1. You’re dividing the link equity you could dedicate to one page amongst multiple pages and reducing the likelihood you rank for that term

2. When others share the URL, the link equity could be divided again3. Large amounts of duplicate content can be a signal of a low-quality site

http://www.examplesite.com http://m.examplesite.com

Page Load Times

Google uses site speed and page load times as a ranking factor, so if one design & development style makes your site significantly faster, that can be an important ranking factor.

Via: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Mobile Site Experience

Google announced this month that sites improperly configured for mobile will be negatively impacted in rankings.

Via: http://googlewebmastercentral.blogspot.com/2013/06/changes-in-rankings-of-smartphone_11.html

Specific Keyword Targeting for Mobile

People sometimes search differently on Mobile versus desktops – by having a single URL for both experiences it can be difficult to target different keyword sets:

Image courtesy of: http://searchengineland.com/when-responsive-web-design-is-bad-for-seo-149109 by Bryson Meunier

Do Other Alternatives Always Cause Duplicate Content Issues?

In a word: No

Even sites that use separate mobile and desktop URLs can indicate to Google that they’re different content with the use of annotations or “switchboard tags”

Via: https://developers.google.com/webmasters/smartphone-sites/details

Are Load Times Always Better for Device-Specific Content?

Not Always

Page load times will depend on what you’re trying to do and the way your site’s developed – faster loading pages are good for search results and user experience, so consider which development option will have better performance and use tools to measure load times:

• http://www.webpagetest.org/• http://developer.yahoo.com/yslow/• https://developers.google.com/speed/pagespeed/

When is Mobile-Specific Keyword Research Valuable?

Mobile specific keyword research applies to search terms that may be different on different devices (mainly location-specific searches):

• This may not impact your business at all• Mobile search results may not be markedly different from standard

search results (are “restaurants” and “restaurants nearby” showing different results?)

Do You Even Need a Unique Mobile Experience?

Understand your site’s mobile traffic:

• Do you get traffic from mobile & mobile search?• What devices do people use to reach your site?• Is your site optimized for devices that drive traffic (test using:

http://www.browserstack.com/)

How to Implement Mobile Variations in an SEO Friendly Way

Responsive Design

• Consider all devices (particularly those that send you traffic)• Optimize page speed & load times on mobile devices• Be cognizant of legacy mobile set ups (is your old mobile site already indexed?)

Dynamic Serving

• Indicate that content is dynamic using the Vary HTTP header (https://developers.google.com/webmasters/smartphone-sites/details)

• Not recommended by Google and frequently not the best solution

Separate Mobile & Desktop Sites

• Be sure to implement switchboard tags properly!• Optimize page speed and load time for mobile• Be sure any redirects are implemented properly• Be sure the development costs are worth the impact on your business (ie you have

enough mobile traffic and a sufficient reason for separate experiences)

Key Considerations Around Responsive Design

1. Traffic Levels from Mobile - Do you have sufficient mobile traffic to create a custom solution?

2. Development Costs & Convenience - What are the development costs behind creating a responsive experience versus mobile-specific landing pages?

3. Unique Mobile Use-Cases - Are there specific usability / business reasons for creating separate mobile landing experiences?

4. Page Speed & Usability – What Solution (or combination of solutions) will create the fastest loading, best overall user experience for your visitors?

Resources

http://developer.yahoo.com/yslow/http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.htmlhttp://googlewebmastercentral.blogspot.com/2013/06/changes-in-rankings-of-smartphone_11.htmlhttp://moz.com/blog/seo-of-responsive-web-designhttp://searchengineland.com/3-mobile-seo-resolutions-for-2013-144026http://searchengineland.com/7-real-mobile-duplicate-content-seo-issues-119338http://searchengineland.com/when-responsive-web-design-is-bad-for-seo-149109http://searchenginewatch.com/article/2175366/Mobile-Sites-Choosing-an-Implementation-Process-Strategieshttp://searchenginewatch.com/article/2184616/Responsive-Web-Design-Introduction-Impacthttp://searchenginewatch.com/article/2250247/Mobile-Tablet-Optimization-The-Next-Enterprise-Search-Frontierhttp://searchenginewatch.com/article/2253965/3-Reasons-Why-Responsive-Web-Design-is-the-Best-Option-For-Your-Mobile-SEO-Strategyhttp://searchenginewatch.com/article/2256738/Responsive-Site-Redesign-4-SEO-Considerationshttp://www.browserstack.com/http://www.codinghorror.com/blog/2007/08/yslow-yahoos-problems-are-not-your-problems.htmlhttp://www.copyblogger.com/mobile-responsive-seo/http://www.webmasterworld.com/google/4556696.htmhttp://www.webpagetest.org/https://developers.google.com/speed/pagespeed/https://developers.google.com/webmasters/smartphone-sites/details

Useful Responsive Design Related Resources:

About Tom Demers

Co-Founder & Managing Partner at Measured SEM

Email: Tom@MeasuredSEM.comTwitter: https://twitter.com/TomDemers

Website: http://www.measuredsem.com/