Use of canonical tag on website with different language versions AND separate mobile versions for each page

Question

I have a website where every page (http://www.example.com) has a separate mobile version (http://m.example.com). And I simply use the rel="canonical" tag on one of those two pages to avoid duplicate content issues with the search engines.

Now I am adding other language versions to the same website as subdirectories (http://www.example.com/fr/ for French version). The translated pages will also each have a separate mobile version (http://m.example.com/fr/).

I know that the rel="alternate" tag needs to be included on all existing pages to tell the search engines that these are just different language versions of the same page.

My question is: On which pages should I include the rel="canonical" tag? For example, if I do not include the canonical tag in one of the two French versions of a page, wouldn't search engines see the French mobile and non-mobile versions of a page as duplicate content?

And if I do include the canonical tag in one of the French pages, would that not create duplicate content issues again - because now the original language version (http://www.example.com) and the French version (http://www.example.com/fr/) of the same text both have canonical tags in them?

Or would the rel="alternate" tag linking the original language version of a page and its translated version make sure that both of these pages having canonical tags is not a duplicate content issue?

Answer 1

First, just to clarify, when you use a canonical tag, you have to use it in the actual canonical page and in the alternate version.

So, https://www.example.com/ should have the tag:

<link rel="canonical" href="https://www.example.com/"/>

And, https://m.example.com/ should also have the tag:

<link rel="canonical" href="https://www.example.com/"/>

Now let's add languages into the mix. From your example, let's say you have the page: https://www.example.com/fr/

Its meta tags should be:

<link rel="canonical" href="https://www.example.com/fr/"/>
<link rel="alternate" hreflang="en" href="https://www.example.com/" />
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />

The first line tells the search engine what the canonical page is. The second line, tells it where the English language version is located. The third line, which is self-referencing, reconfirms the French version (if you don't self-reference, you'll get a validation error). Finally, the fourth line tells the search engine that, if the user's language selection doesn't match any of the available ones, show them this page.

What about the mobile version, https://m.example.com/fr/

<link rel="canonical" href="https://www.example.com/fr/"/>
<link rel="alternate" hreflang="en" href="https://www.example.com/" />
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />

As you can see, they each point to the canonical version of each language.

Finally, I highly recommend you try an online validator to verify language and canonical tags. It's easy to set them up improperly.