Google has a new “Webmaster Help” video out. This time Matt Cutts discusses optimizing for the mobile web. Specifically, he takes on this submitted question:

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?

Cutts says this is a very popular question. Google has plenty of information on the subject out there already, but obviously people still aren’t quite grasping it.

“Don’t block javascript and CSS. That actually makes a pretty big difference,” he says. “If we’re able to fetch the javascript and CSS we can basically try to figure out whether it’s responsive design on our side. So my advice – and I’m going to keep hitting this over and over and over again – is never block javascript and CSS. Go ahead and let Googlebot fetch those, interpret those, figure out whether a site is responsive, and do all sorts of other ways like executing or rendering javascript to find new links, and being able to crawl your website better.”

“The other way to do it is to have one version of the page for desktop and another version of the page for regular mobile smartphone users, and to have separate URLs,” he continues. “So how do you handle that case correctly? Well, first off, you want to make sure that on your desktop page, you do a rel-alternate that points to the smartphone version of your page. That basically let’s Google know, ‘Yes, these two versions of the same page are related to each other because this is the smartphone version, and this is the desktop version.’ Likewise, on the smartphone version, you want to do a rel=canonical to the desktop version. What that does is it tells Googlebot, ‘Hey, even though this is its own separate URL – while the content is the same – it should really be glommed together with the desktop version.’ And so as long as you have those bi-directional links (a rel-alternate pointing from the desktop to the smartphone and a rel=canonical pointing from the smartphone to the desktop) then Google will be able to suss out the difference between those, and be able to return the correct version to the correct user.”

“Now there’s one other thing to bear in mind, which is that you can also just make sure that you redirect any smartphone agents from the desktop version to the smartphone version,” Cutts adds. “So we look for that. If we crawl with Googlebot Mobile, and we see that we get redirected to a separate URL then we start to interpret, and say, ‘Ah, it looks like most people are doing that – where they have a desktop version of the page, a smartphone user agent comes in, and they get redirected to a different URL.’ Of course, the thing to bear in mind is just like earlier – we said not to block javascript and CSS – one common mistake that we see is blocking Googlebot Mobile or blocking Googlebot whenever it tries to fetch the smartphone version of the page. Don’t block Googlebot in either case. Just make sure that you return the correct things, and treat Googlebot Mobile like you would treat s smartphone user agent, and treat Googlebot (regular) just like you would treat a desktop user.”

As long as you follow these best practices, he says, Google will figure it out.

The video page points to this page on building smartphone-optimized websites, which includes an overview of Google’s recommendations, common mistakes, and more info about various elements of the subject.

Image via YouTube