Mobile Website Optimization

The Definitive Guide for Mobile Website Optimization is a post by SEO expert Andrew Johnson. For information about our SEO services or more great SEO tips and tricks, visit the SEO.com blog.

Mobile search is becoming more mainstream, and the numbers speak for themselves.

According to research from the Pew Internet & American Life Project, 45-percent of American adults have a smartphone, and 55-percent of adult cell owners use the internet on their phones. That’s almost double from what it was three years ago.

Another April 2012 study by Pew finds that 70-percent of all mobile phone owners have used their devices in the previous 30 days to decide whether to visit a business.

Analysts from BIA/Kelsey even go as far as saying that mobile local search volume will overtake desktop local search by 2015.

“Among the drivers of mobile local search is the fact that it happens further down the purchase funnel, compared with desktop search,” said Michael Boland, senior analyst and program director, Mobile Local Media, BIA/Kelsey. “We’re seeing that play out in the growth of local query volume, and in performance metrics like click through rates.”

With those numbers on the forefront of your mind, it’s critically important to conduct a mobile website audit to ensure optimal performance in the search engines. The end result should be a mobile platform that search engines can crawl efficiently, and one that users will find easy to navigate from their mobile devices. If your website currently doesn’t have a method of serving content that’s optimized for mobile screens, developing and executing a mobile component to your site should something to consider.

There are a few ways to deliver content to mobile users, including:

Responsive design
Device-specific HTML
Mobile URLs

While there are a number of routes to take as far as mobile website design, it’s important to take extraneous factors into consideration. Responsive design is the most ideal method for serving content to mobile visitors, but it may not be currently feasible given your resources. If that’s the case, consider your users first and foremost, and optimize the website in a way that makes the content easy to read and navigate on any device.

In this guide, we’ll discuss the “best practices” of mobile website optimization, as well as actionable tips on how to implement those changes.

Let’s get started!

Web Analytics

Website Analytics give insight into keywords, visitors, bounce rate, and other important KPIs, and based on this information we can make informed decisions to steer the website in the proper direction.

It’s also important to track successes, including revenue, transactions, leads and conversions. These will give you a representation of where your greatest opportunities are, and how both lagging and leading indicators can be integrated into a holistic and data-driven strategy.

Mobile-specific website tracking is different than desktop tracking, since Google Analytics has developed a server-side tracking platform that can track all the above metrics from visitors using smartphones and tablets. Some mobile phones don’t support the JavaScript based tracking that is currently used by Google Analytics, so mobile tracking uses JSP, ASP.net, PHP or Perl. Once the server snippet is implemented, you’ll be able to track the same information as you would with a desktop version of a website.

How to use Google Analytics server-side tracking:

1. Download the server snippet.

2. Upload that server snippet to your server.

3. Add the tracking code to each of the pages.

More detailed instructions can be found at https://developers.google.com/analytics/devguides/collection/other/mobileWebsites

Implementation of Mobile Website Design

There are a number of different ways to design a mobile website, and the most common approach is to use what’s called a responsive design, or one that will render differently depending on the device. It’s basically the same website, but varying style sheets are called for different devices and screen sizes. The advantage of this is there is one URL, and search engine crawl budgets won’t be spent crawling 2 or 3 different code files.

Here’s a deeper look at mobile website approaches:

Responsive Design: With responsive design, content is delivered via one website, one set of URLs, and will display appropriately on a desktop computer, laptop, tablet or mobile phone.

Varying style sheets are called depending on the screen size and device used to browse the website. When the size of the screen shrinks, elements of the page will shuffle to fit appropriately.

Device Specific HTML: This is another method to serving mobile content, and it’s similar to responsive design in that it maintains the same set of URLs, but the device will call upon different CSS and HTML. The Vary HTTP header should be used to send a “hint” that Google’s mobile bot should crawl the mobile page too.

There are a couple of issues with this method, like the possibility it may incorrectly detect a user agent, and irrelevant redirects. In both cases, the wrong version could be displayed for the website visitor, and could leave them with a negative user experience.

Mobile URLs: Traditionally, a completely separate website would be built for users of mobile phones. This was either done with a mobile subdomain or subfolder, like http://mobile.site.com/ or http://www.site.com/mobile/. There are a number of problems with this approach, including:

Potential duplicate content issues.
Search engine crawlers need to crawl more pages (crawl budget is stretched).
Time and cost for web development increase.
A mobile URL could rank in a desktop search, and vice-versa.
Ranking factors are split between two URLs.

If your website is currently using either mobile URLs or device specific HTML to serve content to mobile users, SEO.com recommends developing a process to move to responsive design in the future. There are distinct advantages to using this method, since every effort made to bolster the site’s SEO performance will also optimize the website for mobile search.

Technical Structure Optimization

Let’s assume your mobile website will be served with a mobile subfolder or subdomain. If this is the case, you’ll need to consider a few things first:

How are you going to address duplicate content?
How are you going to serve unique content on your mobile landing pages?
How are you going to optimize the page for mobile search robots?
How are you going to handle auto-redirects?
How are you going to update the XML sitemap?

Once you have a basic strategy to handle these issues, you’ll need to plan a few other items:

Unique mobile landing pages: Ideally, a new, mobile specific landing page should be created for each of the website’s current landing pages. These mobile landing pages will need to serve unique content, have a design that’s optimized for smaller screens, and be located within the mobile subfolder or subdomain.

Mobile detection: Duplicate content is an issue that should be at the forefront of any mobile strategy, and establishing the correct mobile signals will resolve any issues before they arise.

This can be done through the use of the rel=”canonical” and rel=”alternate” annotations:

1. On the desktop version, use the rel=”alternate” tag pointing to the mobile URL.

2. On the mobile version, utilize the rel=”canonical” tag pointing to the desktop URL.

For example, the following should be placed within the <head> of the desktop page:

and within the <head> of the mobile page:

Now, since two versions of a URL are being used across the website, a rel=”alternate” annotation should also be included within the XML sitemap:

<?xml version=”1.0″ encoding=”UTF-8″?> <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:xhtml=”http://www.w3.org/1999/xhtml”> <url> <loc> http://www.URL.com/landing-page</loc> <xhtml:link rel=”alternate” media=”only screen and (max-width: 640px)” href=” http://www.URL.com/mobile/landing-page” /> </url> </urlset>

In addition to the standard XML sitemap, a mobile sitemap should be created and submitted to Google Webmaster Tools. While the formatting of this sitemap is similar, the protocol will be slightly different:

<?xml version=”1.0″ encoding=”UTF-8″ ?> <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:mobile=”http://www.google.com/schemas/sitemap-mobile/1.0″> <url> <loc> http://www.URL.com/mobile/landing-page</loc> <mobile:mobile/> </url> </urlset>

Anytime a change is made to the sitemap, or a new sitemap is added, they should be submitted to Google Webmaster Tools to ensure the most up-to-date version is being used. You can find instructions for submitting sitemaps here: http://support.google.com/sites/bin/answer.py?hl=en&answer=100283

User-agent detection and auto redirects: Now your website is ready to serve both desktop and mobile users, and the next step is to configure automatic redirects to serve the correct URLs to these users.

The correct URL should be delivered based on the device the user has, so Google has detailed what they recommend as far as auto-redirects at the link here: https://developers.google.com/webmasters/smartphone-sites/redirects. Something to keep in mind is that both desktop and mobile site crawlers should be treated as if they were also a real user, and the “vary HTTP” header should be implemented server-side.

Search robots: Ensure both the desktop bots and mobile bots are allowed access to both versions of each URL.

Desktop bots:

User-agent: Googlebot
User-agent: Slurp
User-agent: bingbot

Mobile bots:

User-agent: Googlebot-Mobile
User-Agent: YahooSeeker/M1A1-R2D2
User-Agent: MSNBOT_Mobile

Both desktop and mobile bots should be given access to both versions of the URL, though, and this is done through the Robots.txt file. We don’t recommend excluding access to the mobile version from either of the mobile or desktop bots, unless you don’t want a particular URL indexed in the search engines.

Conversion Optimization

Optimizing the website to serve your visitors’ unique needs is important across all segments of the funnel, but it’s important to note that mobile users are inherently different than desktop users. Given that visitors accessing the website from a smartphone have different goals than laptop and even tablet users, the approach should be to develop a mobile website that is “to scale” from the beginning, rather than scale the current website to fit the screen.

There are a few considerations to make while designing a mobile webpage:

Social integration: While the goals of each webmaster are different, whether the end goal is leads, sales or traffic, micro-conversions should always be considered and accounted for, as well as how they relate to final conversions.

Research from Onswipe gives us some insight into how and where content is shared on mobile devices. Their data shows that smaller tablets, including the iPad mini, are gaining momentum in the marketplace, and 50 percent of social sharing on an iPhone happens with Facebook.

Since social media is now a primary activity for mobile users, your website may see more social shares when the proper social buttons are in place. Data from Searchmetrics shows that Facebook shares and likes have a direct and indirect impact on organic search rankings. That being said, it’s important to integrate social sharing options into your mobile website:

Each major decision point should have social sharing options.
Each page should contain its own unique social sharing option.

Click-to-call: Make it easy for mobile users to call the business directly from their device, so display your phone number prominently, and make it clickable.

Place crucial content above the fold: The goals for each mobile web page should be considered and evaluated, and the content that leads mobile visitors to that goal should be located above the fold.

Information Architecture Optimization

The Information Architecture Institute defines information architecture as “the art and science of organizing and labeling [content] to support usability and findability.” Thus, superb information architecture consists of website content that is sharable, easy to digest and beautiful, and also easily discovered and displayed by the search engines.

Primary navigation: The most popular and/or important pages of the site should be linked to in the main navigation, given the mobile device’s screen dimensions. Also, vertical navigation is preferred over horizontal.

Relevance: The search engines determine relevance through navigation and labeling, so ensure that the mobile website has links to all the top-level and other important pages. Also include a user HTML sitemap with links to all of the website’s pages.

Button, link and text size: Although screen real estate is limited with mobile devices, buttons and links, and the surrounding text, should be large enough for a fingertip to click.

Link to desktop site: As a general “best practice”, and in the case of detection error or the wrong URL version ranking in the search results, give users a way to switch back and forth from the mobile to the desktop site.

General on-page optimization considerations: The same elements that help a desktop page to rank well in the search engines are also going to aid in a mobile page’s ranking ability. We have written extensively on the art and science behind page optimization, but here are a couple of post which sum things up nicely:

Link framework: Along the lines of page optimization, it’s important to create the ideal number of contextual links within the mobile content to create a positive user experience, as well as aid the search engines in their quest to index the site.

It’s best to have a three-pronged approach to creating a contextual link framework, which will consist of internal and external links:

Internal links to other mobile pages.
Links from the mobile landing page to its desktop site equivalent.
Links to external sites, including partner sites or relevant resources.

While all of these recommendations are based on the industry’s “best practice”, you should keep in mind that every situation is different, and often implementing these recommendations requires the cooperation and agility of multiple departments. Businesses must recognize that mobile users are becoming more commonplace, and having a mobile-ready website is the first step in capturing those visitors and turning them into customers.