Editor’s Note: This is a section of our soon to be completely redone SEO Guide. Enjoy!
Even before the first Apple iPhone was released in 2007, marketers were asking the question: â€œWhat should my mobile strategy be?â€ And itâ€™s a question that many are still asking today. One thing is for sure, though: the mobile web is here to stay.
A recent report from BI Intelligence projected by the year 2020, there will be 3.5 billion smartphones shipped worldwide. And users are increasingly shifting to mobile as their primary device for accessing the internet. In fact, Google announced last year that now, â€œmore Google searches take place on mobile devices than on computers in 10 countries, including the US and Japan.â€
This makes sense, because (as Benedict Evans recently wrote), â€œItâ€™s actually the PC that has the limited, basic, cut-down version of the Internetâ€¦it only has the web.â€
Our mobile devices have much more information to draw on than a desktop device:
- physical movement
As well as greater interactivity:
- with the external world (through technology like beacons)
- with you when youâ€™re not using it (through notifications)
- with your personal identity (because a phone is always signed-in and it is almost always an individual device rather than a shared one).
So how do search marketers ensure that this boom in mobile web usage wonâ€™t leave them behind? By staying on top of the basics of mobile search.
How Google Deals with Mobile Search
Google has many different crawlers for different use cases and different indexes, such as:
- Googlebot News
- Googlebot Images
- Googlebot Video
For mobile search (specifically for smartphones), they use a version of Googlebot which uses a smartphoneâ€™s user-agent, so that the crawler can have the same user experience as actual mobile users (such as redirects to mobile versions, etc.).
This is the current Googlebot user-agent for smartphones:
Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12F70 Safari/600.1.4 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
For comparison, this is the regular Googlebot user-agent:
Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
It is worth noting that Google does not consider tablets to be the same thing as mobile. Although they do consider tablets a separate class of device from both mobile and desktop, nonetheless, their view is that â€œUnless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser.â€
The mobile-friendly pages discovered by the smartphone Googlebot crawler, as well as mobile page versions discovered by the desktop crawler, are indexed as usual. However the SERP may include a different set of results for a mobile user than a desktop one, and mobile-friendly pages will be given a slight rankingÂ boost, all things being equal.
Note that Google judges mobile-friendliness on a page-by-page basis rather than across an entire website, so if you have limited resources it is best to start by making your most valuable pages mobile-friendly first and branching out from there.
Googleâ€™s Mobile-Friendly Update (â€œMobilegeddonâ€)
Some websites were directly impacted, losing up to 35% of mobile rankings within the 1st month â€” and some more indirectly, by the incentive to move towards mobile-friendliness before the update hit.
Google announced a 4.7% increase in the number of mobile-friendly sites in the time between announcing that the update was coming and when it actually rolled out.
Around the same time, Bing also announced they would be rolling out a similar update, although they havenâ€™t provided as much information on the timeline of this. However, generally speaking, a site which is well-optimized for Google mobile search should perform well in Bing.
So how do you make sure your site is correctly designed and optimized for mobile search?
Making Your Website Mobile-Friendly
There are three main approaches to making a website mobile-friendly. These are:
- Responsive Design: the page â€“ URL, HTML, images, everything â€“ remains the same, but the CSS rearranges the page layout depending on-screen width.
TIP: Google has expressed this is their preferred approach, although they support the other two as well. This is primarily because responsively designed sites donâ€™t require any additional technical implementation to optimize them for search.
- RESS/Adaptive/Dynamic Serving: the URL remains the same, but the server sends a different version of the HTML (and CSS) based on what type of device is requesting the page.
- Separate Mobile Site: as the name implies, this is when you simply create a second, â€œmobile-friendlyâ€ website for mobile users. Separate mobile sites usually sit on a subdomain (e.g. m.domain.com) or sometimes a subfolder (e.g. www.domain.com/mobile).
When creating a separate mobile site, the best approach is to keep all the same pages and content in the same structure (e.g. www.domain.com/first-page and m.domain.com/first-page). This makes it easy to redirect based on user agent/device, and also to indicate to Google what pages are equivalent on the mobile vs desktop version.
But since itâ€™s a separate set of pages, you could choose to have a completely different site structure, in which case the mobile URLs might be different.
If youâ€™re wondering how best to implement a mobile-friendly design for your site, check out this guide from my company, Distilled, on â€œBuilding Your Mobile-Friendly Websiteâ€.
How to Figure Out if Your Site is Mobile-Friendly
Here are a few tools you can use to check whether your site is mobile-friendly:
SEO for Mobile Search
If you have a responsive site which is optimized for search, you wonâ€™t need to do anything different for the mobile crawler. Note that when you are auditing the site, it is worth crawling it using a mobile user agent in addition to your regular crawl. This will allow you to identify any crawl issues which only occur on mobile.
Site performance (around things like speed and page load time) may also impact results for mobile search. An effective responsive site serves appropriately sized assets for the userâ€™s screen size, even if the underlying HTML/CSS is the same. Itâ€™s worth checking site speed separately for mobile and desktop (and easy to do with Googleâ€™s PageSpeed Insights tool!).
If you have a dynamically served site or a separate mobile site, youâ€™ll also need to add a couple of things to your pages to make sure that Google understands that the two versions are connected.
Optimizing an Adaptive Website for Mobile Search
An adaptive (or dynamically served) site uses a single URL, but serves a different version of the HTML/CSS depending on the type of device requesting the page.
While basic SEO principles remain the same as for a responsive site, you also need to make sure you avoid the appearance of cloaking.
Cloaking is when you show one thing to a search engine, and something different to a human user, and Google will devalue sites that are doing this for SEO gains. (Note that visually hiding or minimizing content for UI purposes, such as including a menu which is collapsed on load, do not count as cloaking as long as the content is accessible to users and crawlers alike.)
In the case of a dynamically served site, you want to signal to Google that you are showing different content based on user agent to provide the appropriate version of the page for the device accessing the page, rather than to trick the Googlebot user agent for nefarious SEO purposes.
To make it clear that this is what youâ€™re doing, you should use the Vary-HTTP Header.
Using this header has two additional benefits:
- It will let the mobile crawler know there is separate mobile content on this URL, and therefore encourage it to crawl the site.
- It will signal to caching servers that they should consider the user agent (e.g. the type of device) when deciding whether to serve a page from the cache.
Optimizing a Separate Mobile Website for Mobile Search
A mobile site on a separate URL is effectively a different site, so youâ€™ll need to optimize these pages in addition to optimizing the desktop version. Again, the basic SEO principles remain the same, with a few extra guidelines:
- Create a parallel URL structure
Unless youâ€™ve built your mobile site with very different content than your desktop site, the URL structure for your mobile site should mirror the relevant pages on your desktop site as closely as possible. So www.example.com/funny-story should become m.example.com/funny-story, not m.example.com/different-page.
- Add mobile switchboard tags
A separate mobile site with the same or similar content as the desktop version could potentially be seen as a case of duplicate content, which may be suppressed by search engines.
This is where the mobileÂ switchboardÂ tag comes in. This tag indicates to Google crawlers that this is an alternate version of the site intended for mobile devices. A versionÂ of this tag isÂ placed on both the desktop and mobile versions of the page.
To set up switchboard tags correctly:
- On the desktop version, place a mobile-specificÂ rel=â€alternateâ€ tagÂ indicatingÂ the relevant mobile page.
- On the mobile version,Â place aÂ rel=â€canonicalâ€ tag indicating the relevantÂ desktop page.
These annotations can be included in the HTML of the pages themselves and sitemaps (but you donâ€™t have to do both).
As an example, where the desktop URL is http://example.com/page-1 and the equivalent mobile URL is http://m.example.com/page-1, the tagging for this example would be as follows.
On the desktop page (http://www.example.com/page-1), place the following:
link rel=â€alternateâ€ media=â€only screen and (max-width: 640px)â€
and on the mobile page (http://m.example.com/page-1), include:
link rel=â€canonicalâ€ href=â€http://www.example.com/page-1â€³
The rel=â€canonicalâ€ tag on the mobile URL indicating the desktop URL is always required.
You can placeÂ the rel=â€alternateâ€ tagÂ for desktop pages in your sitemaps, as follows:
?xml version=â€1.0â€³ encoding=â€UTF-8â€³?
media=â€only screen and (max-width: 640px)â€
The required rel=â€canonicalâ€ tag on the mobile URL mustÂ still beÂ included inÂ the mobile pageâ€™s HTML.
- Consider user-agent redirects
- Additional guidance for handling redirects to a mobile site:
- Donâ€™t redirect all desktop pages to the mobile homepage; instead, point them to a mobile page which is relevant to the original.
- Send tablet users to the desktop site, rather than the mobile site (unless you have a tablet-specific version). Tablet browsing patterns typically resemble desktop browsing patterns more than mobile.
- Keep both versions crawlable
Make sure youâ€™re not blocking the Googlebot smartphone user-agent from your desktop version in robots.txt and donâ€™t block regular Googlebot from the mobile version.
Schema.org, Rich Snippets, and Rich Cards
As Google shifts towards more of a card-based format in the SERPs, and especially on mobile devices where the screen height means limited screen real estate, any steps we can take to obtain enhanced results like rich snippets and rich cards (through the use of structured data markup) becomes increasingly valuable.
If you arenâ€™t sure what type of structured data might be right for your website, you can use my guide for performing a structured data audit.
Other Key Mobile Search Trends from Google
In addition to trends around mobile-friendliness as a ranking factor, Google has been working towards a few other key trends which relate directly to mobile technology and user behavior:
- The Accelerated Mobile Pages Project to improve site speed and page load times for mobile content, and allow this content to be cached and served directly within a SERP (rather than sending the user to the original website)
- Removing sidebar ads from the desktop SERP layout for a more streamlined, â€œmobileâ€ look
- Integrating app content with web search through support for app indexation and app streaming
We donâ€™t have space to go in-depth on these topics here, but here are a few recommended resources you can check out if youâ€™d like to learn more:
- Googleâ€™s AMP homepage
- Moz Whiteboard Friday â€“ What You Need To Know About Accelerated Mobile Pages (AMP)
- SearchEngineLand: FAQ: All About The Changes To Googleâ€™s Ad Layout On Desktop Results
App Indexation and Streaming
- Googleâ€™s guidance on app indexation
- My post on the Moz blog â€“ How To Get Your App Content Indexed By Google
- Emily Grossmanâ€™s excellent SMX Munich presentation
- Emily Grossman and Cindy Krumâ€™s 3-part series on App Indexation:
- Googleâ€™s recent (Nov 2015) announcement about app streaming
Mobile technology is changing rapidly, and this has created major shifts in user behavior and mobile web usage worldwide. More than ever, mobile search is becoming the future of SEO, and with that comes a host of new challenges. But the key principles remain the same: ensure that crawlers can access, read, and understand your content, ensure user experience is working well for all devices, and keep testing and iterating for better results.
Read Full Article