Using Canonicals and HREFLang Tags Together

There is a lot of confusion about the use of canonicals and HREFLang tags.

Error 1 – Canonical and HREFLang are not interchangeable – you must use the hreflang element for each page that has an alternate.

Error 2 – Dominate Page Canonical  If you use the URL for site A in the canonical tag on site B, the page on site B will NOT be indexed as you are telling the search engine that is the preferred page.

For example

Page A Code

<link rel=”alternate” hreflang=”en” href=”https://www.example.com/en/page-a”/>

<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/uk/page-b”/>

<link rel=”canonical” href=”https://www.example.com/en/page-a” />

Page B Code

<link rel=”alternate” hreflang=”en” href=”https://www.example.com/en/page-a”/>

<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/uk/page-b”/>

<link rel=”canonical” href=”https://www.example.com/uk/page-b” />

Page A has both HREFLang elements and a canonical to itself

Page B has both HREFLang Elements and a canonical to itself

Below is an example how this simple misunderstand can be a disaster.  The Webmaster read a blog post that told him to add a canonical back to the original page.  He added that to all pages instead of the self-referencing HREFLang element.

In this example, the source on the Singapore page, https://www.examplesite.com/sg/  we see the HREFLang Element is correct but look below next to the red star and you will see that the Singapore page has a canonical set to the global site.  As such, search engines will not index the /sg pages resulting in a hreflang alternate “not found error”.

This eliminated ever page for the 4 other sites from Google and traffic tanked.   So NEVER use a canonical back to the original English version unless you don’t want the local version indexed.