To display websites properly on some mobile devices, its useful for those sites to be optimized for smartphones. Google provides support for smartphone-optimized websites in three main configurations:
1) Websites employing responsive web design.
This refers to websites avoid the use of a separate “mobile” version of the site by using only CSS to change the way in which the page is rendered on a particular device. In responsive web design all devices are served on the same collection of addresses (URLs); every URL serves identical HTML no matter what device is used to access the site. Google recommends this configuration.
2) Websites using non-responsive web design but serving all devices, regardless of configuration, on the same group of URLs.
Mobile SEO for Google
In this case, all devices use the same set of web addresses; however, the content is dynamically delivered to each device such that different devices receive different HTML and CSS.
3) Websites using separate sets of URLs to serve mobiles and desktops.
In this article we will look at how these configurations should be implemented and the implications for SEO for mobile sites.
Responsive Web Design and SEO for Mobile
In responsive web design, the same HTML is always sent to all devices by the server. To change the way the page is rendered on a particular device, CSS is used, along with media queries. As long as both Googlebot and Googlebot-Mobile user agents are allowed to crawl all of the page assets, including images, CSS and javascript, Googles algorithms should detect a responsive web design setup. When conducting SEO for mobile sites, care should be taken that all Google user agents can crawl a pages assets.
For smartphones, Google recommends that the following media query is used:
@media only screen and (max-width: 640px) {…} (Where 640px is an example, not a requirement.)
Googles algorithms look for max-width values that are likely to refer to the resolution of a smartphone screen; Google attempts to monitor the max-width values used by typical mobile websites and plans to update its algorithms accordingly.
Media Queries and Google Mobile SEO
Standards allow for different ways in which to use media queries in your code and Google offers support for all of them. Different implementation techniques all have their merits and disadvantages; when determining how to specify the media query, designers should use the technique that best serves their site and its users. Typically, if a site works with recent browser types such as Chrome, it will work with Googles algorithms.
SEO for Mobile and Responsive Design
Google recommends the use of responsive design for various reasons:
1) Using one URL for a piece of content facilitates Google mobile SEO by making it easier for Googles algorithms to assign indexing properties to the websites content. Using the same URL also makes it easier for users to share and link to your content.
2) Loading times have implications for Google mobile SEO. By using responsive design instead of redirecting the user to a mobile version of your page, you reduce page loading times.
3) Responsive web design conserves resources by allowing Googles web crawlers to crawl your page once, rather than having to crawl multiple pages and assets. This improves SEO by helping Google to index more of your websites contents.
Crawling Requirements
Dont block any Googlebot from crawling any of your pages images, CSS and javascript assets, for example by using robots.txt. If Google cant fully access these external files, its algorithms will be less able to detect your websites configuration and recognize it as using responsive web design.
Different HTML Served Dynamically on the Same URL
In dynamic serving, the user agent requesting the page is detected by the page software. A different version of the page is served depending on the device thats detected. A desktop and a mobile device visiting the same URL would receive a different version of the page without the need for a redirect.
In this type of setup, the fact that the site serves different content to mobile users is effectively hidden from Googles crawlers. To ensure that Google can properly index your page, youll need to send a hint to the Googlebot-Mobile crawler that it should index the page too. This is accomplished using the Vary HTTP header.
The Vary HTTP Header
The Vary HTTP header does two useful things:
1) It indicates to caching servers that the user agent needs to be considered when determining whether or not the page should be served from cache. Without it, users on a mobile device may inadvertently be served a cached desktop version of the site.
2) A valid Vary HTTP header communicates to Google that mobile content is present and thus helps them to index your page more effectively.
When a server responds to a request, the Vary HTTP header forms part of this request. This means that the contents of the page which are actually served will depend on the agent that is currently requesting the page.
Separate Mobile URLs: SEO for Mobile Implications
Google also offers support for sites that use a distinct mobile version of each page at a different URL from the main version. For example, the main version of a page might be at www.examplepage1.com, while the mobile versions URL might be at www.m.examplepage1.com. Note that Google doesnt insist upon this or any other URL format as long as all pages are accessible both to Googlebot and to Googlebot-Mobile.
Annotating Desktop and Mobile Page Versions for Google Mobile SEO
To let Googles algorithms properly understand the way that your site is configured, Google recommend certain annotations. These annotations can be placed in the HTML of the site itself and in sitemaps.
1) On the desktop version of the page: place a special link rel=”alternate” tag that points to the URL of the mobile version. This assists Googlebot in discovering where your sites mobile pages are located.
2) On the mobile version, add a link rel=”canonical” tag that points to the desktop versions URL.
Watch a Video by Matt Cutts on Mobile SEO
HTML Annotation Example:
On the version of the page optimized for desktops, the annotation would be as follows:
On the mobile version of the page, the annotation would be:
Note that the rel=”canonical” tag pointing back to the desktop version is requires on the URL for the mobile page.
Where to Place Annotations in Sitemaps
Google supports the inclusion of the rel=”alternate” annotation in Sitemaps for the desktop pages in the following manner:
xmlns:xhtml=”https://www.w3.org/1999/xhtml”>
https://www.examplepage1.com/page-1/
rel=”alternate”
media=”only screen and (max-width: 640px)”
href=”https://m.examplepage1.com/page-1″ />
Note that the rel=”canonical” tag is still required on the mobile URL; and should also be added to the HTML of the mobile page.
Annotation in Detail
Note the attributes of the link tag that is to be used on the desktop page.
1) The rel=”alternate” attribute is a signal that this tag is specifying an alternative URL to the main desktop-optimized page.
2) The media attributes value takes the form of a CSS media query string. This string specifies the features of the media that the alternative URL applies to. In the example given above, the media query used is one thats generally used to target mobile devices such as smartphones.
3) The “href” attribute in the annotation specifies where the alternative URL is located – in this instance, the page on m.examplepage1.com.
This bidirectional (ie. two-way) annotation improves SEO for mobile by assisting Googlebot in discovering your online content. It also helps the algorithms in understanding how your desktop and mobile sites relate to each other and treating them appropriately. When using different URLs to serve similar content in mobile and desktop formats, using appropriate annotation helps Google to interpret them as one entity instead of two separate entities, indexing them accordingly. This improves SEO for mobile, since the page ranking isn’t split between two different URLs; the ranking for the mobile and desktop versions is calculated as for a single URL rather than two distinct sites, which would obviously result in a lower page ranking.
If your site automatically redirects visitors, you should make sure that your server is configured appropriately.
Now you know more about Google’s requirements for mobile SEO!
