Best practice for using hreflang and canonical together

If you’ve reached the stage where you’re considering building a multi-market site, it’s probably fairly critical that you get it right. While Google has some great documentation on hreflang and canonical, the best practice approach on using both together is not so clear.

On a site using hreflang tags, canonical tags should be used within each market.

If, for example, our site has a page about wine that has been duplicated for the English, French and German markets:

<link rel="alternate" hreflang="en" href="http://example.com/wine" />
<link rel="alternate" hreflang="fr" href="http://example.com/fr/wine" />
<link rel="alternate" hreflang="de" href="http://example.com/de/wine" />

Then the French page (at http://example.com/fr/wine) would have the following:

<link rel="canonical" href="http://example.com/fr/wine" />