Google recommendations for smartphone-optimized websites

Google updated its webmaster recommendations for smartphone-optimized websites. You may need to change your site HTML and server headers to help Google’s various crawlers find your smartphone content and better associate the same pages optimized for various screen sizes. Google recommends responsive web design with Cascading Style Sheets (CSS) media queries for smartphone-optimized websites.

Recommended changes vary based on your site’s approach to smartphone optimized content: responsive design, content negotiation, or redirects to mobile-specific URLs.

Responsive web design

Google will download your page CSS and evaluate viewport width ranges specified as media queries. Google considers sites optimized for a 640 pixel width as smartphone-optimized and may look for other resolutions “that can be reasonably expected to refer to smartphone screen resolutions.”

If your site uses responsive web design make sure your CSS and JavaScript assets specifying such behavior are not blocked by robots.txt rules.

Content negotiation by User-Agent

Does your site look for strings such as “iphone” or “android” in a User-Agent string to trigger a smartphone-specific template? Add a Vary Hypertext Transfer Protocol (HTTP) header value of “User-Agent” to encourage Google to revisit your page with a smartphone User-Agent string.

Separate mobile site

Do you redirect incoming requests to a mobile-specific Uniform Resource Locator (URL) (e.g. mydomain.com to m.mydomain.com? Google wants you to define your viewport targets on your main site page and in your sitemaps, define a <link rel=canonical> on your mobile page referencing the equivalent main page, and include a Vary HTTP header in the response.

On your main (desktop-focused) page add a new <link rel=alternate> scoped with a media query specifying the minimum and maximum target widths of your mobile site(s).

In your sitemap files add the same markup with an xHTML namespace + prefix definition: xmlns:xhtml="http://www.w3.org/1999/xhtml" + xhtml:link

Adding a canonical link to your mobile page helps collapse references to the same content across your different URLs; the link references for your mobile and desktop versions of the same page can be combined, helping your pages appear more relevant when competing with other content for a high result placement.

Summary

Google crawls the web with many different search agents including Googlebot and Googlebot-Mobile. Make sure your server is configured to properly speak to both, encourage follow-up visits from more task-specific crawlers, and rank higher in search results by better describing your page, its content, and the relationship between pages with proper HTTP headers, sitemaps, and page markup.