Mobify

Mobify is the fastest, most powerful way to launch mobile websites that drive exceptional business results.

Did you know that search is the number one browser activity on mobile devices?

And with some businesses reporting up to 50% of website traffic now coming from mobile, companies that prioritize mobile search are set to gain a significant competitive advantage over their peers.

On the surface, mobile and general SEO appear to be quite similar. A website that quickly and easily resolves a user’s search query will always rank higher than one that doesn’t, regardless of what device the user is browsing on.

Unfortunately, the reality is more nuanced. All major search engines recently started including a number of new factors and requirements to rank websites on mobile. So, in addition to providing a great experience to mobile users, companies also need to consider their technical setup, site speed, content parity, and more in their SEO strategy.

We’ve created this guide to dive into search engines’ new recommendations for building mobile and tablet-optimized websites and help you capture the most mobile search traffic. You’ll come out the other side with everything you need to know about how different approaches to mobile affect your mobile SEO, and how you can select an approach that is right for your business.

Looking for a PDF version of this guide to read later or print out?

Chapter 1 Why Does Mobile SEO Matter?

Because Your Customers “Google” Everything

Forrester Research recently reported that web-influenced offline sales and online sales combined account for more than half of the $3.3 trillion total retail spent in the US. As search is the #1 mobile browser activity, businesses with websites that are primed for mobile SEO gain more opportunities to:

  • get brand exposure from mobile searches
  • increase mobile traffic and conversions
  • convert visitors into loyal customers online and offline
  • ultimately drive revenue across all channels

Because Your Customers Buy When They Want To

90% of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets or TV. The three most common ways users move between devices are:

  1. searching again on the second device
  2. navigating directly to the destination site
  3. sending themselves a link to revisit later

It doesn't matter whether a consumer completes a sale online or offline, most purchases begin with, or at least include, a search.

Because Google Says So

Now that global mobile traffic accounts for 15% of all internet traffic (and up to 30% for retailers) Google is taking a clear stance on mobile SEO best practices.

Google’s new recommendations for building mobile- and tablet- optimized sites are driven by a vision to make better user experiences on mobile devices, as well as to improve mobile web development practices. To encourage global compliance, Google has made changes to its mobile SEO rank algorithm to rank websites that follow its recommendations higher than websites that do not.

Businesses that adopt Google’s recommendations in their mobile strategies are poised for greater returns and long-term success.

Chapter 2 A Quick Refresher on How Google Ranks Pages

Google and other search engines create an index of the web by crawling website pages. They check each page for signals that define the context of the page — so they can better match it to different search queries.

Typical signals include:

  • What are the keywords on this page?
  • Do other pages on the same topic link to this page?
  • Is it linked to through social media or review sites?
  • Is this page more relevant for a particular locale?
  • Is this page mobile optimized (as per Google's recommendations)?

Additional signals that are considered in mobile searches include:

  • Does this page have an equivalent page on desktop?
  • Are both desktop and mobile versions of this page properly linked to one another?
  • Is location relevant to this search?

Each signal is only part of the sum that makes up a page’s overall ranking for a particular search term.

The takeaway here is that you won’t get the top search result simply because you address one or two of these signals — for example, putting lots of keywords in your page, or building a mobile-optimized website. Making your website easily accessible across all devices is definitely becoming a bigger piece of the puzzle for Google, but in order to rank well, you need to consider a bigger picture.

Your website has got to be filled with relevant content that people want to interact with, and it must be optimized in a user-friendly and future-friendly way. And don’t forget, user-friendly also means fast; Matt Cutts, the head of Google’s Webspam team, recently stated that mobile page speed has been added to the list of search engine signals.

For more general information and tips on SEO, check out Moz’s excellent Beginner’s Guide to SEO or Monetate’s infographic on The Evolution of the Search Engine.

Chapter 3 How to Build a Website that Google Loves

Today’s user has high expectations when it comes to mobile website user experience and performance. 40% of users will turn to a competitor’s site after a bad mobile experience, and the majority of users will abandon your website and never return if they’re forced to wait more than three seconds for a page to load.

Google recently updated their algorithm to take into account how your website is set up for mobile accessibility. So, be aware that the mobile development approach you choose will have a direct impact on your visibility to mobile searchers.

In order to capture, engage and convert a mobile user, your website must be delivered as efficiently as possible. Google’s recommended solution is to use Responsive Web Design (RWD) or a JavaScript-Adaptive approach. Google also supports other mobile web development approaches, including server-side solutions and separate mobile sites.

In this chapter, we'll look at each approach, in order of Google’s preference.

1. Responsive Web Design (RWD)

Responsive web design is Google’s recommended approach for building websites that cater to all sources of web traffic, whether on desktop, mobile, tablet, or other.

Responsive web design has become a trendy buzzword in both business and technical circles. There are many different definitions floating around, and we’re seeing fairly liberal use of the word “responsive” to describe solutions and processes.

Web developers will likely implement RWD using Ethan Marcotte’s three defining front-end techniques: fluid grids, flexible media and CSS media queries, while the rest of us generally look at RWD as an innovative web development approach that adjusts the layout of a single website to fit different screen sizes or breakpoints.

Google has extended to the latter definition to include three, more abstract features of responsive web design:

  1. The website is found at one URL across all devices
  2. The same HTML is served to all devices
  3. Design transformations happen using CSS media queries or JavaScript

Here are Google’s three reasons why they prefer websites that are built using responsive design:

  1. It uses a single URL for a piece of content, which makes it easier for your users to interact with, share, and link to your site. Additionally, a single URL for content helps Google's algorithms assign the indexing properties for the content.
  2. 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.
  3. It saves resources for both your site and Google's crawlers. For responsive web design pages, any Googlebot user agents needs to crawl your pages 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 content and keep it appropriately fresh.

While RWD is Google’s preferred approach and widely recognized as the way to build future-friendly websites, it does come with a number of challenges:

  • A lot of resources are required to build a responsive website from scratch.
  • Development time and cost can be 2-3 times greater than other solutions.
  • Strong web development and design skills are required.
  • Performance is not guaranteed (although there are several techniques you can apply and automated tools you can use to speed up your responsive website.)

At Mobify, we use both Ethan Marcotte’s and Google’s definitions to describe responsive web design. But for the purpose of this ebook, we’re just going to follow Google’s definition. So how can you update your website to follow Google's responsive web design best practices? There are two main approaches:

Development Approach A: Rebuild

A rebuild entails completely reworking your entire website’s architecture, business logic, and completely and building it back up from scratch using responsive web design.

Diagram depicting responsive web design and its major benefits for mobile SEO
When a user requests a page from your website on their mobile device, the entire code base is downloaded to the device, and CSS media queries adjust the content and layout to fit.
Development Approach B: JavaScript-Adaptive

JavaScript-Adaptive fits under Google's umbrella for responsive web design. It's a great way of making your website responsive without the hard work of a rebuild. This is how Responsive Templating Manager works. In this approach, the website is found at one URL across all devices, the same HTML is served to all devices, and design transformations happen using JavaScript.

Diagram depicting how JavaScript adaptive interprets the HTML and renders it differently on different devices at one URL
When a user wants to visit your page on a mobile device, JavaScript detects the user’s device type and adapts the code base so only the right layout is sent.

Extra Configurations Needed: None. Google can automatically detect and index content on websites built with RWD and JavaScript-Adaptive approaches, so no extra configurations are needed.

2. Server-Side Solutions

Dynamic serving is a setup where the server responds with different HTML (and CSS) on the same URL depending on the user agent requesting the page.

The server-side approach uses server-side plugins and custom user agent detection to determine how to serve a website to mobile devices. The server responds to desktops, smartphones and everything in between on the same URL, but with different HTML and CSS on the same URL. Although Google is continuing to provide support for this approach, they state that they prefer responsive web design.

Server-side solutions have the following configurations:

  1. The site dynamically serves all devices at one URL
  2. Different HTML (and CSS) is served to desktop and mobile devices
  3. Server-side logic determines which design templates should be sent to which devices
Server side adaptation diagram depicting mobile SEO benefits
When a user requests your page on a mobile device, server-side logic determines which code base to send each device. The website is always found at one URL.

Extra Configurations Needed: Since different website HTML is served to mobile devices in this approach, Google requires additional configurations in order to discover and index the mobile content. These configurations include the Vary HTTP Header, a user agent header that identifies different content to be served to different devices based on the user's browser.

Google urges web developers to learn the common pitfalls when detecting user agents before setting up dynamic serving on a website.

3. Separate Mobile Sites

Development Approach: Proxy-Based, Separate Sites (M-Dot Sites, m.example.com) or “Responsive Delivery”

In this approach, each desktop URL has a separate equivalent URL serving mobile-optimized content with a separate set of HTML and, if applicable, another equivalent URL serving tablet-optimized content with yet another set of HTML to maintain. Each device family requires a separate URL and set of HTML.

Separate mobile sites have the following configurations:

  1. Separate URLs for desktop, mobile, tablet, etc. (m-dot, t-dot, etc.).
  2. Different HTML is served for each site.
Separate mobile site diagram depicting mobile SEO impacts
When a user requests a page on their mobile device, they are redirected to the right code base, which has its own content and layout. The website is found at a different URL on each device.

Unfortunately, redirects can contribute to a poor user experience and incur hundreds of milliseconds of extra latency on 3G networks. Google advises webmasters to “ideally eliminate redirects entirely,” and “avoid “m-dot” redirects when possible” and industry experts agree that it is a counter-productive approach. However, the majority of mobile platform providers still provide this approach as a solution, and many mobile websites are run this way today.

Until recently, the most common mobile web strategy was to create a separate mobile-only website (or m. dot site). Having two separate sites means having to point the right device classes to the right experience. In theory, that sounds manageable. In practice, however, it’s a nightmare that barely anyone gets right.

Brad Frost, Mobile web strategist and front-end designer

Extra Configurations Needed: Google requires the following configurations in order to discover the mobile content on separate mobile sites:

  1. Annotations for desktop and mobile URLs on every single page.
  2. If your site automatically redirects mobile visitors coming to the desktop site to the mobile site, or vice versa, the Vary HTTP Header is needed.

A Note on Annotations: If you have a separate mobile site, you need to implement bi-directional annotations, which means you have to modify the page markup with annotations for every page on both your desktop and mobile websites. And if you have a separate tablet site, annotations are required for every page on all three websites. You could also put entries into your desktop sitemap, but you'll need to add an entry for every page of your site.

Bi-directional annotations found among separate mobile sites
An alternate tag points from the desktop page to the corresponding mobile or tablet page, and a canonical tag points from the mobile or tablet page to the corresponding desktop page.

Chapter 4 Selecting a Mobile Vendor

If rebuilding your website from scratch using RWD is not an option for your business, you’ll want to look at working with a mobile vendor.

Of course, there are many things to consider when selecting a mobile vendor beyond mobile SEO, including specific personalizations, features and functions to cater to mobile user needs, ease of updating the site, time to market, budget, and integration with your existing platforms. But when it comes to Google’s mobile and tablet- web development recommendations, here’s how different approaches stack up:

Google's Recommended Configurations Responsive Web Design JavaScript Adaptive (Mobify) Server-Side Solution Separate Mobile Sites (m-dot)
One URL Yes Yes Yes No
Same HTML Yes Yes No No
CSS and/or JavaScript for layout changes Yes Yes No No
Required Additional Configurations Not needed (100% compliant) Not needed (100% compliant) Vary HTTP Header Annotations and Vary HTTP Header

It’s worth noting that only 4.5% of retailers in the Internet Retailer Top 500 list with separate mobile sites have correctly implemented all the required annotations. Most have partial implementation or no implementation at all. This can be attributed to a number of reasons:

  • Lack of awareness; Google’s recommendations were recently released.
  • Many vendors may not implement the extra annotations.
  • Most businesses lack internal resources to implement the extra configurations.
  • SEO is not a priority for some businesses; recommendations are disregarded.

The general low level of compliance creates a huge opportunity for your business to get ahead of your competitors in mobile search rankings with a strategically optimized website. So be sure to ask your mobile vendor how they handle Google’s additional configurations, if they’re needed, especially if you’re not able to implement them internally.

If you liked this, subscribe for more mobile marketing resources:

Thanks for reading!

The mobile web has truly become one of the most important emerging digital channels. Businesses that take advantage of it — through mobile search and otherwise — see more traffic, satisfied users and, ultimately, revenue.

Our hope with this guide has been to equip you with the knowledge and insights you need in order to make educated decisions around building and optimizing mobile-friendly websites.

Now it’s time to take the next step: making sure that your site complies with the requirements and best practices developed by Google and other major search engines.

We know it’s a tall order, so if you have any questions, concerns, or would just like to learn more about how you can build your mobile website to better take advantage of mobile SEO, please feel free to reach out to us and say hello.

Best regards,
Tina Hoang
Product Marketing and Education Manager at Mobify

Connect with Tina on Twitter, Linkedin, or .