Back in 2011, Googlebot-Mobile for smartphones, a new mobile user agent was launched, which was responsible for detecting mobile content. Now, Google is offering specific recommendations for building smartphone-optimized websites.
In a Webmaster Central blog post, Pierre Far, Webmaster Trends Analyst offered recommendations and explain how to do so in a way that gives both desktop- and smartphone-optimized sites the best chance of performing well in Google's search results. He says, Google supports three different configurations for building a mobile website that targets smartphones:
- Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration.
- Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
- Sites that have a separate mobile and desktop sites.
Responsive web design is a technique to build web pages that alter how they look using CSS3 media queries. Google says, there is one HTML code for the page regardless of the device accessing it, but its presentation changes using CSS media queries to specify which CSS rules apply for the browser displaying the page. Using responsive web design has multiple advantages, including:
It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google's algorithms to assign the indexing properties to your content.
Google can discover your content more efficiently as we wouldn't need to crawl a page with the different Googlebot user agents to retrieve and index all the content.
Device-specific HTML can be served on the same URL (a configuration called dynamic serving) or different URLs (such as www.example.com and m.example.com). "If your website uses a dynamic serving configuration, we strongly recommend using the Vary HTTP header to communicate to caching servers and our algorithms that the content may change for different user agents requesting the page. We also use this as a crawling signal for Googlebot-Mobile," Pierre explains.
- When you use the different HTML approach but the same URL, Google wants you to use the HTTP Vary Header as a hint for GoogleBot-Smartphone to crawl the site.
- When you use the different HTML approach but a different URL, Google wants you to use a rel=alternate on the desktop version and use a canonical on the mobile version.
Google has a smartphone developer site, where you can read the full recommendation and see which supported implementation is most suitable for your site and users.