Matt Cutts, Google’s head of search spam, answers a question about mobile sites in his latest Webmaster Help video where a user writes in to ask:
Is there a way to tell Google there is a mobile version of a page, so it can show the alternate page in mobile search results? Or similarly, that a page is responsive and the same URL works on mobile.
Matt prefaces his answer by saying when talking about mobile versions of sites he’s speaking exclusively in regards to smartphones.
As a site owner you want smartphone users to end up on the mobile version of your page, and desktop users to end up on the desktop version. There are a couple of ways to do that, as Matt goes on to explain.
Cutts qualifies his response and states that he is referring to smartphones when talking about mobile versions. Obviously, webmasters want users to go to the mobile or desktop versions of their sites as required.
According to Cutts, there are a couple of ways of achieving this. One is to use a responsive design which serves up the same site to mobile or PC users. The second way is to have two separate versions of the site which points users to either one.
As the video explains, if taking the second option, then it’s important to have a rel=”alternate” tag on the desktop which points to the mobile. This allows the Googlebots to understand that the two sites are connected. Conversely, he also advises to include a rel=”canonical” on the mobile site.
The first way is to use a responsive design, which serves the same site to mobile users and desktop users. Javascript and CSS scales the site to comfortably fit the resolution of the screen it’s being viewed on. It’s important not to block Javascript and CSS, because if Google can fetch the Javascript and CSS code they are able to determine whether or not the site is responsive.
The other way to go would be to have separate versions of the site for mobile and desktop users, with each having their own URL. If you go this route you’re going to want to put a rel=”alternate” on the desktop site that points to the mobile version. This lets Google know these two versions are related to each other.
In this case you’ll also want to put a rel=”canonical” on the mobile version pointing to the desktop version. This tells Googlebot even though the mobile version is on a separate URL the content is the same, and as such it should be lumped together with the desktop version.
As long as you have these bidirectional links, Google will be able to tell the difference between the sites and return the correct version to the user.
Yet another way to go would be to redirect any smartphone agents from the desktop version of the site to the mobile version. Googlebot can read and interpret this as well, so Matt reminds us it’s important not to block Googlebot mobile just as you shouldn’t block Javascript or CSS.
Here are three basic ways to handle mobile traffic.
Here are three basic ways to handle mobile traffic.
- Responsive web design - Webpages 'respond' to the user agents, and re-size and readjust automatically to best suit the user agent that requested a page.
- Dynamic content serving - Less used, but useful technique similar to RWD. The type of user-agent is recognized, i.e. whether it is a mobile or a desktop agent, and then content is programatically.
- Separate mobile site - Same content, but hosted on a separate domain or sub-domain. Usually m.website.com.
Following these best practices is the best way to let Google know about mobile and desktop versions of the same page. For more information Google has put together a comprehensive resource about smartphone-optimized websites in their Google Developers section.
