: Linking desktop and mobile pages 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.
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:
example.com/new-york.html (English) 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:
If what I've just said is correct and can be implemented like that.
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?
More posts by @Heady270
2 Comments
Sorted by latest first Latest Oldest Best
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.
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 example.com/en/ and 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
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 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 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">
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.