Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
For example, if I have a long single page desktop site and I break that site down into 3 individual mobile pages, do I say that the single desktop page is the desktop version of every mobile page?
If so would I say that the desktop version is the rel=canonical as well as the rel=alternate or would I just say it's the rel=alternate?
You can set canonical two ways: 1) inside the <head> tags or 2) sent with the HTTP header of a HTML document. The #selector resides within the same HTML document, this is why you can not set more than one Header information in a HTML document. There is only one GET request and only one header information set. If you check the GET parameters of those HTTP request there are going to be identical, because they are pointing to the same HTML document.
Therefore, you are doing a bad canonical implementation in the mobile pages. You should only use:
<link rel="canonical" href="http://www.website.com">
Only if the amount of "duplicated content" is significant, if the mobile versions contain just a small proportion of content in relation to the desktop site (page) I would not bother.
In other words, If you decide to try canonicals using #seletors you will do the same or the equivalent as using only
<link rel="canonical" href="http://www.website.com">
in all mobile pages, because is the same HTTP request.
So, to answer your question you should do as stated on Google Developer Site
To help our algorithms understand separate mobile URLs, we recommend using the following annotations:
- On the desktop page, add a special link rel=”alternate” tag pointing to the corresponding mobile URL. This helps Googlebot discover the location of your site’s mobile pages.
- On the mobile page, add a link rel=”canonical” tag pointing to the corresponding desktop URL.
You know now how to setup the rel="canonical" ;)
Add a rel="alternate" tag pointing to the corresponding mobile index page:
Add a link rel="canonical" tag that points to the corresponding desktop index page:
Also on the mobile index page, link to the next mobile page by adding a rel="next" tag:
<link rel="prev" href="http://example.com/"/>
<link rel="next" href="http://example.com/third-page"/>
<link rel="prev" href="http://example.com/second-page"/>
You can read more on rel="next" and rel="prev" here.
This was the best answer I could find through my discussion with @titico. I tried getting them to update the answer but they haven't yet so for now, this is the correct answer.
This answer is only theoretically correct and there seems to be no documentation on what to do in these situations. If you have any additional insight/information, please feel free to change this answer as I've made it a community wiki.