The evolution of the mobile device and its widespread usage is causing Google to re-examine its ranking factors for websites and mobile websites alike. The goal for Google is to ensure that the user receives an optimized experience across all devices, which will require webmasters to follow Google’s webmaster guidelines if they want to enhance their mobile SEO.
According to Google’s latest update for building smartphone-optimized websites they support three configurations for mobile optimized websites:
- Responsive design (Google’s top recommended configuration)
- Dynamically serving different HTML on the same URL
- Separate mobile URLs
These specific recommendations set forth by Google only pertain to smartphone websites at this time. Google has not released any specific recommendations for building SEO friendly tablet-optimized websites, but they have released some tips for building websites that serve tablet users. Now I will explain how to implement the three recommended configurations listed above.
Responsive Design
Responsive design is a configuration where the server always sends the same HTML to all devices that call for it. This configuration utilizes CSS to alter the appearance of the page using media queries. Google claims that their algorithms should automatically detect this configuration if all Googlebot user agents (Googlebot & Googlebot-Mobile) are allowed to crawl the CSS, JavaScript, and image assets.
The CSS media query for smartphones recommended by Google is as follows:
Google’s algorithm looks for max-width values that reasonably refer to smartphone screen resolutions. Google will monitor the typical width size used for mobile websites and may update their algorithms in the future accordingly. As a general rule, Google documents that if the media queries you use work in a recent browser such as Chrome or Apple Mobile Safari, it will work with their algorithm.
Why does Google prefer responsive design?
According to Google’s Webmaster guidelines they prefer responsive design over all other configurations for three reasons:
- It’s easier for users to interact with, share, and link to content that is on a single URL. Plus a single URL for content helps Google’s algorithms assign the indexing properties for the content.
- There are no redirects needed for users to consume the mobile optimized content. User agent-based redirection is error prone.
- Responsive design conserves resources for both your site and Google’s crawlers because the Googlebot user agent only needs to crawl your pages once, which improves the crawling efficiency.
Dynamically serving different HTML on the same URL
This configuration is where the server responds with different HTML and CSS on the same URL depending on the user agent requesting the page. Because mobile content is hidden in this configuration by altering the HTML, Google recommends that the server sends a request for Googlebot-Mobile to crawl the page too. This request is implemented using the Vary HTTP header.
The Vary HTTP header contains two important suggestions useful to Googlebot / Googlebot-Mobile:
- It alerts the caching servers to consider the user agent when deciding if It should serve the cached version of the page or not. In other words the Vary HTTP prevents a cache of the desktop HTML from being served to mobile users or vice versa.
- Googlebot discovers your mobile-optimized content faster because a valid Vary HTTP header is one of the alerts Google may use to crawl URLs that serve mobile-optimized content.
Below is an example of the server’s response to a request using the Vary HTTP header provided by Google:
What this means is that the content of the response will vary depending on the user agent that requests the page. Google documents that if your server already uses the Vary HTTP header, you can add “User-Agent” to the list that’s already served.
Separate mobile URLs
With the separate mobile URLs configuration each desktop URL has an equivalent mobile URL that is different and optimized for mobile content. The most common set up for this would be pages on www.example.com serving desktop users and the corresponding m.example.com serving mobile users.
Google recommends that in order to help their algorithms understand this configuration you should add two annotations either in the HTML of the pages themselves or in Sitemaps.
- On the desktop page, add a link rel=”alternate” tag that points to the corresponding mobile URL in order to help Googlebot discover the location of your site’s mobile pages.
- On the mobile page, add a link rel=”canonical” tag that points to the corresponding desktop URL.
On the desktop version, add:
On the mobile version, add:
Google supports the rel=”alternate” annotation for the desktop pages in Sitemaps as depicted below:
The rel=”canonical” tag should still be added to the mobile page’s HTML.
These annotations help the Google algorithms understand the relationship between your mobile and desktop pages, which tells the algorithm that the two URLs have equivalent content and should be treated as one entity. This is critical to your mobile SEO because you don’t want the URLs to be treated separately. This causes both desktop and mobile URLs to be listed in desktop search results, which can cause positions to be lower than they should be.
Another thing to be mindful of when you are configuring your mobile site with separate URLs is to make sure you are redirecting each desktop page to its corresponding mobile page. It is bad practice to redirect all desktop URLs to the mobile home page. If a desktop URL does not have a corresponding mobile URL simply serve the desktop version to mobile users in lieu of redirecting to the main mobile home page.
The illustrations below depict the proper and improper way to handle the redirection of separate URLs:
The future updates to Google’s algorithms are going to place more importance on the proper configuration of mobile sites, and it’s extremely important for webmasters to follow these guidelines in order to implement successful mobile SEO campaigns.
