Targeting Users Around the Globe: When and How You Should Use the Hreflang Attribute

hrefs for other languages

If you’re even a little familiar with online marketing, you probably know that search engines don’t look too kindly upon duplicate content. Have too much of it (as may happen in the cases of syndication, boilerplate repetition, printer- or mobile-only versions of pages, and more), and you may find yourself filtered out of the search engine results pages (SERPs) as Google seeks to list “fresher” content.

There are a number of ways that you can solve duplicate content issues, including using 301 redirects, the rel=”canonical” tag, and the “noindex” meta tag.

None of these are really good solutions for international websites, however.

The Problem

Let’s say you have an ecommerce website that targets users in three different regions: English speakers in United States, English speakers in Canada, and French speakers in Canada. Your website provides basically the same information about products to users in all three regions with only slight variations in the content to account for pricing, shipping information, and the like.

You’d like users in each region to see the information that’s appropriate for them in the SERPs. You’d also like to avoid any search engine issues that may arise from having content that is too alike.

SEO.com is ready to help your company today with their search engine marketing needs!
Request a Proposal

The Solution

That’s where the hreflang attribute comes in. This attribute acts, essentially, to let Google know that there are multiple versions of a page serving different regions. By marking the language (using ISO 639-1-1 format) and targeted-location (using ISO 3166-1 Alpha 2 format) of each page, you can help Google know which version to display for which users.

When to Implement Hreflang

Here are some questions you should ask yourself when deciding whether you should implement hreflang on your site:

  • Do I have multiple pages that have the same, or mostly the same, content?
  • Do I have any pages that are fully-translated duplicates of each other?

If the answer to either of these questions is “no,” you don’t need to worry about using hreflang. On the other hand, if you have international versions of pages that are near-duplicates, you will need to use hreflang.

How Hreflang Works

There are three different ways to use hreflang on your site. While none is technically “better” than any of the others, there are some instances where one may be more convenient to implement:

Using Hreflang in the <head> of a Webpage

The first way to do this is by adding “link” tags into the <head> section of each of the regionally-specific webpages. Each page must identify all alternate language versions using rel=”alternate” including itself.

In our example above, then, the English-US version of the page should have something like this in its <head> section:

<link rel=”alternate” href=”http:// www.examplesite.com ” hreflang=”en-us” />
<link rel=”alternate” href=”http://www.examplesite.ca” hreflang=”en-ca” />
<link rel=”alternate” href=”http:// www.examplesite.ca/fr” hreflang=”fr-ca” />

And the English-CA version would look something like this:

<link rel=”alternate” href=”http:// www.examplesite.com ” hreflang=”en-us” />
<link rel=”alternate” href=”http://www.examplesite.ca” hreflang=”en-ca” />
<link rel=”alternate” href=”http:// www.examplesite.ca/fr” hreflang=”fr-ca” />

And so on. You need to put these tags on every page that is a near-duplicate, like so:

English-US:

<link rel=”alternate” href=”http:// www.examplesite.com/product.html ” hreflang=”en-us” />
<link rel=”alternate” href=”http://www.examplesite.ca/product.html” hreflang=”en-ca” />
<link rel=”alternate” href=”http:// www.examplesite.ca/fr/produit.html” hreflang=”fr-ca” />

English-CA:

<link rel=”alternate” href=”http:// www.examplesite.com/product.html ” hreflang=”en-us” />
<link rel=”alternate” href=”http://www.examplesite.ca/product.html” hreflang=”en-ca” />
<link rel=”alternate” href=”http:// www.examplesite.ca/fr/produit.html” hreflang=”fr-ca” />

And so on.

Once Google indexes these pages, it should understand to send US users to the .com version of the page and Canada users to the appropriate-language .ca version of the page.

Using Hreflang in the Sitemap

Another way to go about implementing hreflang is to do so in the sitemap. This may be a good idea if you have many different language versions of a site—adding that many lines of code to a page can get cumbersome.

The XML sitemap in the example above would look something like this:

<?xml version=”1.0″ encoding=”UTF-8″?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
<loc>http://www.examplesite.com</loc>
<xhtml:link rel=”alternate” hreflang=”en-us” href=”http://www. examplesite.com” />
<xhtml:link rel=”alternate” hreflang=”en-ca” href=”http://www. examplesite.ca” />
<xhtml:link rel=”alternate” hreflang=”fr-ca” href=”http://www. examplesite.ca/fr” />
</url>
<url>
<loc>http://www. examplesite.com/product.html</loc>
<xhtml:link rel=”alternate” hreflang=”en-us” ref=”http://www. examplesite.com/product.html” />
<xhtml:link rel=”alternate” hreflang=”en-ca” href=”http://www. examplesite.com/product.html” />
<xhtml:link rel=”alternate” hreflang=”fr-ca” href=”http://www. examplesite.com/fr/produit.html” />
</url>
<url>
</url>
</urlset>

For each URL, you need to reference the all versions of the page, including itself, using the rel=”alternate” attribute, and if you have multiple top level domains, you’ll need to make a sitemap for each.

If generating a sitemap like this looks like a daunting task, never fear. There are multiple tools available to help you generate them quickly.

Using Hreflang in the HTTP Header

Using hreflang this way is especially useful for indicating language and region in non-html documents, such as PDFs.

The format for using hreflang in the HTTP header looks like this:

Link: <http://www.examplesite.ca>;  rel=”alternate”; hreflang=”en-ca”

Conclusion

If you have a website that targets users in multiple regions, hreflang should be your new best friend.

Let me know about your experiences. Has the hreflang tag save you from duplicate content woes? Have you had any trouble implementing it?

Get Internet Marketing Insight For Your Company - SEO.com

2 Comments

  1. J P Nayak says

    A perfect & precised post about how to use Hreflang Attribute. Optimizing a Multilingual website is not a easy job. You must know how & when use “Hreflang”. Here everything described to the point.

  2. Andrew says

    Helpful post. I have a .ca eCommerce website that targets Canadian customers. I would like to launch a .com version to target US customers. If I implement hreflang for an example.ca and an example.com website can I use 1 blog for both websites? Would you set the blog up as example.ca/blog or example.com/blog?

Leave a Reply