OK.
Today's question comes from Scott in England,
and it's a really popular question.
A lot of people have been asking about mobile phones,
mobile versions of pages.
So today's question is this-- is there
a way to tell Google there is a mobile version of a page,
so we can show the alternate page in mobile search results?
Or similarly that page is responsive,
and the same URL works on mobile?
OK.
Great question.
So first off, we're going to assume
that when we're talking about mobile,
we're talking about smartphones.
OK, so leave feature phones at the door.
Here's stuff about smartphones.
And we can provide more links and context
in the meta descriptions, so that people could read more
about this.
But here's the deal-- you want to be able to make sure
that mobile version, mobile smartphone users get
to the mobile version of a page, and regular desktop users
end up on the desktop version of a page.
So, there's a couple ways you can do this.
Number one, you can do a responsive design.
That just means that it is the exact same page that's
served up to mobile users and to desktop users,
but that the JavaScript is able to handle
that, the CSS is able to handle that.
So one thing to bear in mind is, don't block JavaScript and CSS.
That actually makes a pretty big difference.
If we are 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.
OK.
So that's one way to do it, is responsive design.
And if you're using the same stuff for mobile users
and for desktop users, just make sure we
can crawl the JavaScript and CSS.
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.
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.
So that basically lets 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 about,
hey, even though this is its own separate URL,
the content is the same.
And so it should really all be glommed together
on the desktop version.
And so as long as you have those bidirectional links,
a rel alternate pointing from the desktop
to the smartphone and a rel canonical
pointed 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 two the correct user.
Now there's one other thing to bear
in mind which is, you can also just make sure
that you redirect any smartphone agents from the desktop version
to the smartphone version.
So we look for that.
If we crawl with the 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
and we said not to block JavaScript and CSS, one
common mistake that we see is blocking Googlebot-Mobile
or blocking Googlebot whenever he tries
to fetch the smartphone version of the page.
Don't block Google in either case,
just make sure that you return the correct things
and treat Googlebot-Mobile like you
would treat a smartphone user agent.
And treat Googlebot regular just like you
would treat desktop user.
And as long as you follow those best practices,
we should be able to figure out whether a page is responsive,
whether there's a different URL for mobile users,
and go ahead and redirect those or show those
to users who are searching for mobile search results.
So if you follow those best practices,
and we'll have the links to the definitive information
inside of the description of this video,
that's the best way let Googlebot
know there's different versions of a page or the different ways
to handle your content correctly for smartphones.
I hope that helps.