If you have an audience that accesses (or tries to access) your content from a mobile device, then you need a mobile-friendly website. Mobile-based searches make up one quarter of all searches, so there are very few instances when a mobile site would not be warranted. Google has openly stated that their ranking algorithm was built with specific components to improve mobile search results by rewarding quality mobile websites with good user experience.
The key to improving your mobile search presence comes in a package of user experience and SEO. This post will highlight the ways you can optimize your site to take advantage of Google’s push to make a friendlier mobile web.
First Step for Mobile SEO: Have a Mobile Website
Google supports three configurations for smartphone-optimized sites. This guide will outline each configuration and the purpose of each, so use the best implementation based on your content and audience.
Keep in mind that Google does not have a separate mobile index, so when a user searches from a mobile device, the results are from the same index as they are from a desktop. When a search is executed from a mobile device, Google serves up the desktop version of the URL, and when the searcher clicks a result, the mobile version of the URL is loaded. The way in which the mobile version is loaded is determined by the mobile configuration you have set up.
Mobile Option 1: Responsive Web Design -- Google Recommended
A responsive design detects the device a person is using and adapts the layout accordingly. The content displayed to the user is basically the same across all devices, but the layout will adjust to accommodate shrinking screen sizes by showing less text, fewer images and/or a simplified navigation.
Having a responsive design has been recommended by Google because of its ability to maintain one URL for all devices and platforms. In other words, a responsive design is preferred because the same HTML can be displayed on all kinds of devices, from desktops to smartphones, through one URL. More recently, Google announced that they actually prefer one-URL websites for mobile search.
Benefits to a Mobile Responsive Design
- With a responsive design that utilizes one URL for a piece of content, users are able to easily share and interact with your content.
- A single URL for the content allows for Google's algorithms to assign indexing properties for the content.
- Redirects to a mobile-optimized URL are not required, benefiting users by reducing load times. Google considers page speed as a ranking factor.
- Having a responsive design can save resources for both your site and Google. With one optimized URL, Google only has to crawl the page once, as opposed to multiple times with different user agents.
Mobile Responsive Design Pitfalls
- Since content being loaded in a mobile experience is responsive, lengthy page load times can become an issue. Make sure unnecessary, cumbersome content like videos and ads aren’t loaded.
- Understand the focus of your content. If the content on your desktop experience must be hidden or is entirely different for mobile, then you may want to consider separate mobile URLs.
Mobile Option 2: Dynamically Serve Content
According to a Mobify blog post, no single screen size has more than 20% of the market share. With dynamic serving, the numerous screen sizes can be addressed because the content that is loaded to the URL can be vastly different depending on the device being used.
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 content. Similar to responsive design, dynamically serving content uses a single URL for mobile and desktop experiences, but the user agent or device type determines the amount and way in which the content is displayed.
Dynamic serving is a good option if content from the desktop version of a page would be too slow to load on a mobile page, but it can be complicated to implement.
When implementing dynamic serving, be sure to implement Google’s recommended Vary HTTP header. This tells or hints at Google to request that Googlebot-Mobile should crawl the page. Further documentation on the Vary HTTP header can be found here.
Mobile Option 3: Mobile URLs
While Google recommends responsive design over mobile URLs, there are some instances in which a mobile URL makes sense. Ask yourself what the purpose of your site is from a user's perspective. If it's dramatically different than what your site will be used for on a desktop, mobile URLs might make sense. The classic example here is a bank -- or any highly transactional site, really. If you're using your bank's site on mobile, it's probably to perform a few quick tasks -- checking your balance, transferring some money, or paying a bill. Not in-depth tasks like researching home mortgage rates. If your site is being used largely in a transactional nature, mobile URLs might make sense.
With this configuration, each desktop URL has a corresponding mobile URL serving mobile-optimized content. Each desktop URL should have an equivalent mobile URL that displays the mobile optimized content. It is common to use m.example.com as the syntax for the mobile URL, but Google has not clarified a preference for the structure of mobile URLs.
Google sees mobile and desktop URLs as separate pages, so it is important to take the necessary steps to allow Google to understand the relationship between the multiple pages (see Mobile URLs, Redirects and Meta Data below). Since Google uses the same index for desktop and smartphone users, they have to cluster mobile and desktop pages together and serve the appropriate version to the user agent requesting the content.
Mobile URLs: Redirects and Meta Data
One of the most important things you can do for SEO and user experience is make sure that all redirects are executing correctly for both mobile and desktop. If a mobile or desktop user agent accesses a version of a page, they should be appropriately redirected to the correct version of that URL. Nothing special needs to be done for Googlebot and Googlebot-Mobile, because when the bots crawl your page via mobile or desktop, properly implemented redirects will redirect them to the correct URL.
Redirecting mobile users to the homepage in the absence of a mobile version of a desktop page is bad practice. If a mobile version of a page does not exist, the desktop version of the page should be displayed. Additionally, if there is a mobile version of a page with no desktop equivalent, the mobile version of the page should be displayed for desktops.
Since Google uses a single index to cluster mobile and desktop pages together, it is necessary to use meta data to send signals to Google to make it clear about which mobile URLs are associated with their equivalent desktop URLs. When using mobile URLs, it is an SEO best practice to use meta data to indicate rel=”canonical” and rel=”alternate” to Google.
On the mobile page, add a link rel="canonical" tag pointing to the matching desktop URL. Using the canonical tag will help Google consolidate indexing and ranking signals. The tag also prevents confusion about possible duplicate content between mobile and desktop versions of a page. Below is the syntax for the canonical tag that should be placed on the mobile page.
<link rel=”canonical” href=”http://www.domain.com/desktop-page/”/>
On the desktop page, add a rel="alternate" tag pointing to the matching mobile URL. This helps Googlebot discover the location of your site's mobile pages. Below is the syntax for the rel=”alternate” tag that should be placed on the desktop page.
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.domain.com/mobile-page/”/>
Common Mobile SEO Mistakes
Google has compiled a list of common mistakes with smartphone sites that you will want to make sure you understand and avoid. Many of the typical mistakes fit into the idea that a great mobile user experience equals good mobile SEO.
There are a number of reasons why videos may not be compatible with mobile devices, but it is recommended to use HTML5 when using video content to avoid content in formats, such as Flash. Make sure to test any video content on a mobile site to ensure the best user experience possible.
It is a common mistake to redirect smartphone users attempting to access content on a URL from the desktop site to an irrelevant mobile URL. Common examples to avoid are redirecting smartphone users to the homepage and redirecting some mobile devices but not others.
Smartphone-Only 404 Errors
It seems obvious, but don’t serve content to desktop users accessing a URL but serve an error page to smartphone users trying to access the same page. First try to identify the correct mobile URL to redirect to, and if that is not possible, display the desktop version to mobile users.
APP Download Interstitials
It is very common to promote a website’s app to mobile web visitors when they first visit a mobile URL, but Google considers this a common mistake and disruptive to the visitor’s use of the site. Google suggests using a banner to promote your app inline with the page’s content.
Google has explicitly said that they will lower a website’s mobile rankings for using app download interstitials.
Be sure to avoid irrelevant cross-linking, which is more commonly known as incorrect opt-out behavior. If your mobile website’s users opt out of a mobile-optimized view, they should be taken to the corresponding desktop view of the page and not something like your homepage.
Conclusion: Align Mobile to Your Overall Marketing Strategy
Your mobile optimization strategy should not be independent of your overall marketing strategy. Be sure to consider your personas and understand how they prefer and intend to digest your content. Also, determine how your content should be accessed in a desktop or mobile environment.
If your users need to experience completely different content when browsing mobile vs. desktop, you will want to go with a separate mobile site that will have one set of URLs for mobile and another set for desktop. The desktop site won’t present any limitations to the design and content of the mobile site, meaning that the mobile experience can be as similar or different than the desktop experience as you’d like. It is important to note that Google has stated that they prefer one-URL sites for desktop and mobile, but avoiding the common mistakes outlined above will help your mobile SEO.
Sometimes it is necessary to build a separate browsing experience for users of different devices. This can be done with dynamic serving of content by the server, which can take a significant time investment depending on the level of complexity you commit to (how many user agents you customize for), but is beneficial because content can be customized for user intent. If mobile users intend to see store locations, but desktop users intend to see your ecommerce content, dynamic serving can do this and might be the way to go. Google also prefers this method because it’s a one-URL solution.
Responsive design is a great one-size fits all solution for mobile. If you would like your audience to experience the same HTML content for both mobile and desktop browsing, responsive is most likely the way to go. With a responsive design, it will detect the device that is requesting the page and adjust the layout according to the size of the device. Google recommends this method, as it also a one-URL solution like dynamic serving.
So, as you begin to plan your marketing strategy for the coming year, make sure to plan for mobile optimization and download our helpful 2014 marketing strategy kit. This e-book is a comprehensive guide to setting business objectives, building your brand, creating a digital strategy and measuring results over time. Use the strategy kit to determine your audience, and then use this guide to choose the appropriate mobile optimization solution for your audience.