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="" />
<link rel="alternate" hreflang="fr" href="" />
<link rel="alternate" hreflang="de" href="" />

Then the French page (at would have the following:

<link rel="canonical" href="" />

Removing any DOM element using JavaScript

There are some things in JavaScript that will to learners seem like an obvious hole. One of these is removing a DOM element. jQuery has a .remove() function, but it’s worth knowing how to do the same thing in raw JavaScript. Besides, it’s deceptively easy:

Object.prototype.remove() = function() {

Because we have added the function to the prototype, we can now call .remove() on any element.