Mobile SEO and Responsive Web Design GuidelinesConsumers spend more time on the internet than any other media channel. I’m sure you know that by now. But did you know that around 60% of all search queries come from mobile devices?¹ Are you reading this on your phone right now?

Smartphones are now the device of choice for searching information online, and the numbers have been steadily increasing. It makes sense then that Google and other search engines would start to prioritize the mobile end of their service.

Google’s Mobile-First Index

In 2017, Google will officially roll out its mobile-first index:

“Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results.”

Google is responding to their customer data and choosing to use the mobile version of a site’s content as the primary source for their search engine index. Googlebot will now be crawling your website from a mobile user’s point of view.

Businesses and nonprofits are also finding new and innovative ways to use mobile trends to drive sales and growth. The data conclusively shows that brands taking a mobile-first approach to their business are experiencing huge amounts of success while their competitors are left in the desktop dust.

Below, we draw on many sources to provide you with SEO guidelines and information for making the most of mobile in 2017 and beyond.

Revisiting “Mobilegeddon” (April, 2015)

This new mobile-first index isn’t the first sign of a major shift in the internet and SEO landscape. For a while now, Google has been giving mobile search priority to websites that are mobile-friendly.

We wrote about the “mobilegeddon” update in April, 2015, soon after the announcement was made that mobile-friendly pages would get a boost in the search engine result pages (SERP).

While business owners and marketers anticipated this change coming, the sudden update left people scrambling to get their sites displayed on mobile queries (which now make up approximately 60% of all search engine queries).

Google and other search engines crawl and test each individual page of your website. If you pass, that page will be given the mobile-friendly tag and a boost in the rankings. It’s a simple “yes or no” response.

Test your website for mobile-friendly design here

According to the Google Webmaster Blog, “If your site’s pages aren’t mobile-friendly, there may be a significant decrease in mobile traffic from Google Search. But have no fear, once your site becomes mobile-friendly, we will automatically re-process (i.e., crawl and index) your pages.”

Mobile Matters

According to the Google Webmaster Blog, “this change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.”

PPC ads are given the “mobile-friendly” designation as well. If you are running PPC advertisements that are not mobile-friendly, you’re making a big mistake. You can use the same mobile-friendly test for your PPC landing pages to see if you are running mobile-friendly ads or not.

Mobile-Friendly Factors

Google uses many factors to determine if your site is mobile-friendly or not. Here are some of the basics that Google looks for:

Fast – Pages should ideally load in less than 1 second.

Functional – Page content should display and function properly in mobile browsers (no CSS, JavaScript, image, or other resource blocking).

Finger-friendly – Tap targets (e.g., buttons, links form fields) should be large enough and properly spaced for small touchscreen use.

Free from redirects and errors Mobile version URL requests should all return 200 (OK) status codes—no 301/302 redirects or errors, if possible.

– via The Art of SEO (3rd edition)

Different Device, Different Intention

It’s important to keep in mind that mobile users often come to your site with a different intent than desktop users. They are most likely looking for a quick answer to a question, a click-to-call button, or some other easily digestible content. This is why some industries have been impacted by the change more than others. For example, restaurants and “near me” searches are among the most popular mobile searches.

Mobile searchers are known for being more impatient and the search engines know this. If your competitor creates an easy-to-use mobile site, not only will people prefer it, search engines will too.

Below is an image showing the difference between a site that simply fits a mobile screen and one that has been optimized for one:

Google mobilegeddon mobile friendly website

Source: Google Developers

Mobile users don’t want to be overwhelmed with text. They want large buttons, easy contact buttons, and snackable text. Customers early in the shopping process, however, still prefer the desktop version for in-depth searching.

A Little Test

Do a search for your most-searched keywords on both your desktop and smartphone. Do the pages take a long time to load? What do you see? Is there a big difference between the mobile and desktop versions?

Try clicking on a few buttons or links on your phone. Was it easy or frustrating?

Consider the various contexts of your customer and ask yourself if you are addressing their mobile and desktop needs and expectations.

If there is a specific action you want users to take on your site, make sure it is easy to do on both mobile and desktop. If the user experience is ugly or frustrating, your sales and brand reputation will suffer.

How to Implement the Best Mobile Version of Your Website

There are actually several ways that you can implement a mobile version of your website, some better than others.

3 Mobile-Friendly Strategies

3 mobile configurations - mobile SEO

Source: Google Developers

  1. Responsive web design, or RWD (same URLs) – recommended!

responsive web design - mobile seo

Source: Google Developers

The website has the same URL for both desktop and mobile, sending the same code to all devices; the meta viewport tag in the CSS code is used to alter the rendering of the page to fit the device. Make sure all of your site’s resources, including CSS, images, and videos are crawlable.

  1. Dynamic serving, a.k.a. adaptive design (same URLs)

dynamic servicing mobile configuration - mobile seo

Source: Google Developers

The website serves different HTML and CSS depending on the user agent requesting the page. If you use this method, you’ll need a Vary HTTP header to signal the changes.

  1. Separate URLs

separate URL mobile configuration - mobile seo

Source: Google Developers

The website has different URLs for the desktop and mobile, serving up different HTML and CSS to desktop and mobile devices. This is usually done with a subdomain, such as m.example.com.

Which Mobile Configuration Should You Use?

There are basically two different ways you can go about this. You can have the same URL or a different URL. The first two options above use the same URL, but deliver a different viewing experience. The last option uses a separate URL, usually a mobile subdomain.

We recommend using the first option. Why? Because if you have two sites, each site will be crawled and ranked separately. One URL allows your SEO efforts and characteristics to transfer over the mobile version.

“Google recommends using RWD over other design patterns” (Google).

It’s a lot easier to maintain and update a single URL with the same HTML and CSS. Yes, dynamic serving only serves up one URL, but the HTML and CSS are different from the desktop version.

While dynamic serving can provide a better user experience since a different HTML/CSS is rendered based on the user, it requires more time, money, development, and maintenance. So, unless you have a huge budget, RWD is the way to go.

Regardless, you want a site that is easy to read and interact with on all devices and screen sizes. “Google does not favor any particular URL format as long as they are all accessible for all Googlebot user-agents” (Google).

You can learn how to create your own responsive web pages on Google’s Web Fundamentals site. Or you can make things a lot easier by contacting VitalStorm.

Top 3 Mobile Considerations

According to Google, these are the top three things you should keep in mind when building a mobile site:

  1. Make it easy for customers.
  2. Measure the effectiveness of your website by how easily mobile customers can complete common tasks.
  3. Select a mobile template, theme, or design that’s consistent for all devices (i.e., use responsive web design)

Mobile SEO Guideline

After you decide between using responsive web design (RWD), dynamic serving, or a separate mobile URL, you’ll want to develop a mobile strategy.

Here are some general SEO tips to follow when designing the mobile side of things:

  • Test your website and landing pages for mobile-friendliness using Google’s Mobile-Friendly Test.
  • Do a general website test on testmysite.withgoogle.com.
  • Test your website using the Mobile Usability Report to identify web pages with mobile usability and other problems.
  • Page speed is critical, especially with mobile users’ increasing impatience. Videos, images, and other resources should be optimized for multiple screens. Analyze and improve site speed with PageSpeed Tools. Learn more about improving site speed on Google Analytics Support.
  • Review Google Best Practices for mobile-friendliness.
  • Research competitor sites for inspiration and best practices. You can also refer to The Mobile Playbook and Google Multi-screen Success Stories for ideas.
  • Unwatchable content provides a poor mobile experience. Flash and other media players that aren’t compatible with mobile should be replaced. Use video embeds that work on both desktop and mobile. Consider adding video transcripts in case a video cannot be played. Use HTML5 for animations. Check out video best practices on Google’s Web Fundamentals for more information.
  • Make sure your CSS, Javascript, images, and other resources are crawlable. You can see if you have any robots.txt code by running your site through Google’s robots.txt Tester. You can also use the Fetch as Google tool inside of your Google Search Console to see just how Googlebot renders your site. If your resources are blocked, Google won’t be able to tell if they display correctly on a mobile browser.
  • If you are using a separate mobile site, make sure you test both the mobile and desktop URLs. The desktop page should include a link rel=”alternate” tag that points to the mobile URL. The mobile page should have a link rel=”canonical” tag that points back to the desktop URL. Read more about Separate URLs on Google Developers.
  • After making your mobile SEO adjustments, ask Google to re-crawl your URLs.

Is your website following Responsive Design Best Practices?

Here is the criteria:

  • Website software that’s compatible with mobile (so no Flash, for example)
  • Large, readable text without zooming
  • Content automatically resizes to fit the screen (so you don’t have to scroll horizontally)
  • Large links with plenty of space between each so they are easily tapped

As a business owner, marketing and advertising can get expensive, fast. Search engine optimization, paid search, web maintenance, social media, blogging, email marketing, and other digital marketing solutions can seem to be more trouble than they’re worth. That’s why you need a professional marketing team on your side.

Stay ahead of the competition by contacting VitalStorm to audit your website and marketing campaigns to provide you with some individualized strategies.

We would love to hear your thoughts on Mobile SEO for 2017. Message us on Facebook, InstagramTwitter, and Google+.

Additional Resources:


Free Consultations

 1-877-311-5695


¹HitWise Mobile Search Report (2016)