2

Since I'm a non-technical person willing to enter the mobile space, would like to ask for some advice and the specific code to add to my pages if possible.

My desktop site is bilingual English/Spanish with all pages human-translated (as opposed to machine-translation). Let's go for an example:

  • www.example.com/new-york.html (English)
  • www.example.com/nueva-york.html (Spanish)

The mobile version will be:

  • m.example.com/new-york.html (English)
  • m.example.com/nueva-york.html (Spanish)

The mobile pages would probably be a bit smaller that desktop pages, but they will have the same file name and essentially the same content.

I believe this is called "same URL approach", would that be correct?

Now, I've been told that, in order to help Google to crawl both sites and to avoid duplicate content issues, I need to use rel=alternate/rel=canonical to link pages between platforms - desktop and mobile. It seems to be required some kind of bi-directional linking, from A to B and from B to A for each page and language.

Would deeply appreciate your input about two things:

  1. If what I've just said is correct and can be implemented like that.

  2. If that's correct, could you please give me the exact piece of code to place within the <head></head> tags in both desktop and mobile pages?

Stephen Ostermiller
  • 98,758
  • 18
  • 137
  • 361
Daniel
  • 21
  • 2

2 Answers2

1

  1. Your set up is actually separate URLs and not "same URL approach", as the URLs are different, they are on a sub domain. "same URL approach" is when your mobile content is dynamically served on the exact same URLs as the desktop content.

  2. On the desktop pages add an alternate tag pointing to the mobile URLs:

<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com/new-york.html" >

and on the mobile pages, add the canonical tag pointing to the desktop pages:

<link rel="canonical" href="www.example.com/new-york.html" >

These tags should be added in the pages source code within the <head></head> tags, and need to be used on every page that has a mobile version.

These tags can also be defined in sitemap.xml files instead of within the pages source code.

More info can be found here Building Smartphone-Optimized Website

I also might mention that the structure of your multilingual site isn't ideal. It's also recommended to add the different language pages within a sub folder, such as www.example.com/en/ and www.example.com/es/, rather than simply using URLs. This can make it clearer to the user about the language of the page, and also allows you to Geo target different folders to different locals in Google Webmaster Tools, if you so wished.

More info here: Multi-regional and multilingual sites

Max
  • 6,127
  • 17
  • 40
0

This is not the same URL approach. It would mean to have only one URL for each content (not two: one for desktop and one for mobile devices), no matter which device is used. This is typically achieved with responsive web design.

In this answer, I’m assuming that you already have links between the translations (using the alternate link type together with the hreflang attribute).

That said, you have actually two questions:

  • How to link between mobile and desktop pages?
  • How to specify a canonical page?

Desktop ↔ Mobile

To link from a desktop page to its corresponding mobile page, use the alternate link type.

You can also specify the media attribute to denote for which user-agents the link is interesting.

So on www.example.com/new-york.html, you could have the following link element:

<link href="http://m.example.com/new-york.html" rel="alternate" media="only screen and (max-width: 640px)"> 
<!-- instead of "only screen and (max-width: 640px)", use the criteria you want for devices that should visit the separate mobile page -->

And the same (without a media attribute) for the link from mobile to desktop.

Canonical

Unless the pages have different content (which is not the case in your example), you should denote that one of the pages (mobile or desktop) is canonical.
Typically, the desktop variant is chosen to be the canonical page.

So on m.example.com/new-york.html, you could have the following link element:

<link href="http://www.example.com/new-york.html" rel="canonical">

(You can also have this link element on www.example.com/new-york.html itself.)

And instead of having two link elements with the same href value, you could combine them. E.g., on m.example.com/new-york.html:

<link href="http://www.example.com/new-york.html" rel="alternate canonical">
Community
  • 1
unor
  • 21,739
  • 3
  • 46
  • 117
  • Not sure if using rel="alternate" pointing from mobile to desktop is correct, or combining alternate and canonical in a single href tag. I haven't seen these mentioned in any guidelines. rel="alternate" pointing from mobile to desktop could potentially make sense I guess, although Google don't mention it can work that way. – Max Nov 01 '14 at 12:35
  • @Max: alternate is for "referencing an alternate representation of the current document", which is obviously a bidirectional relation (if mobile is an alternative representation of desktop, desktop is also an alternative representation of mobile). And the rel atttribute takes a "set of space-separated tokens" as value (example). – unor Nov 01 '14 at 14:32
  • But is this a valid way of using it for Google? Probably would need to ask them. – Max Nov 13 '14 at 23:28