Have You Implemented The Href Lang Tag On Your Site?

Why Use An Href Lang Tag?

If you are looking to expand your business in multiple countries then your current website may not be enough to drive traffic to the site. If your business is based in the USA and you are looking to ship to customers in Spain it is important to have your website served in the Spanish language rather than English. All though churning out pages by translating the existing pages into different languages will serve the user well search engines look at such content as a duplicate. Resulting in not indexing the page or ranking of the inappropriate page for the country or language the user has chosen.

In order for webmasters to help Google search bots handle such cases appropriately, Google introduced rel=”alternate” hreflang=”x” tag. Using this tag one can tell Google that the page in context is an alternate version of the main website and the language of the page is defined by the hreflang reference.

How To Implement An Hreflang Tag

When it comes to international SEO you can target an international audience either by language or country or both.

Your store’s international pages can be of any of the following forms –

  • Sub Directory – www.yourbrandname.com/en-ca
  • Sub Domainen-ca.yourbrandname.com/
  • Country-specific TLD – www.yourbrandname.ca

Immaterial of the type of international page you choose the method employed in implementing hreflang tag is the same.

In case your online store (www.yourbrandname.com) is based out of US but you receive orders and ship products to countries like

  • Spain – www.yourbrandname.es
  • France – www.yourbrandname.fr
  • Germany – www.yourbrandname.de
  • UK – www.yourbrandname.co.uk

When you use an hreflang tag you help Google rank the right URL for the right country. This is best done in 3 steps

Choose your primary domain. Since in this case your business is based out of US we shall choose www.yourbrandname.com as the primary domain.

Implement rel=”alternate” hreflang=”x” on all the pages of each domain. In this case we have to use the below code in the <head> section of each domain.

<link rel=”alternate” hreflang=”es” href=”http://www.yourbrandname.es/” />
<link rel=”alternate” hreflang=”fr” href=”http://www.yourbrandname.fr/” />
<link rel=”alternate” hreflang=”de” href=”http://www.yourbrandname.de” />
<link rel=”alternate” hreflang=”en-uk” href=”http://www.yourbrandname.co.uk/” />

On the page which doesn’t target any language or country and which allows users to pick a language and country using a dropdown the code should look like

 <link rel=”alternate” hreflang=”x-default” href=”http://www.yourbrandname.com”> <link rel=”alternate” hreflang=”es” href=”http://www.yourbrandname.es/” />
<link rel=”alternate” hreflang=”fr” href=”http://www.yourbrandname.fr/” />
<link rel=”alternate” hreflang=”de” href=”http://www.yourbrandname.de” />
<link rel=”alternate” hreflang=”en-uk” href=”http://www.yourbrandname.co.uk/” />
To get a good grip over how this code is written I highly recommend you check this hreflang generation tool by Aleyda Solis

Option 2

Just if you are not able to implement the markup the alternative way to optimize your country pages is by using a sitemap with rel-alternate-hreflang annotations. This way you can tell Google in what all languages a website is available.

The sitemap for the above example should something like the code below.

<?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>www.yourbrandname.com</loc>
<xhtml:link rel=”alternate” hreflang=”es” href=” www.yourbrandname.es”/> <xhtml:link rel=”alternate” hreflang=”fr” href=” www.yourbrandname.fr”/> <xhtml:link rel=”alternate” hreflang=”en-uk” href=” www.yourbrandname.co.uk/> <xhtml:link rel=”alternate” hreflang=”de” href=”www.yourbrandname.de/> </url>

<url>
<loc>www.yourbrandname.es</loc>
<xhtml:link rel=”alternate” hreflang=”es” href=” www.yourbrandname.com”/> <xhtml:link rel=”alternate” hreflang=”fr” href=” www.yourbrandname.fr”/><xhtml:link rel=”alternate” hreflang=”en-uk” href=” www.yourbrandname.co.uk/> <xhtml:link rel=”alternate” hreflang=”de” href=”www.yourbrandname.de/> </url>

<url>

<loc>www.yourbrandname.fr</loc>
<xhtml:link rel=”alternate” hreflang=”es” href=” www.yourbrandname.es”/> <xhtml:link rel=”alternate” hreflang=”fr” href=” www.yourbrandname.com”/> <xhtml:link rel=”alternate” hreflang=”en-uk” href=” www.yourbrandname.co.uk/> <xhtml:link rel=”alternate” hreflang=”de” href=”www.yourbrandname.de/> </url>

<url>
<loc>www.yourbrandname.uk</loc>
<xhtml:link rel=”alternate” hreflang=”es” href=” www.yourbrandname.es”/> <xhtml:link rel=”alternate” hreflang=”fr” href=” www.yourbrandname.fr”/> <xhtml:link rel=”alternate” hreflang=”en-uk” href=” www.yourbrandname.com/> <xhtml:link rel=”alternate” hreflang=”de” href=”www.yourbrandname.de/> </url>

<url>
<loc>www.yourbrandname.de</loc>
<xhtml:link rel=”alternate” hreflang=”es” href=” www.yourbrandname.es”/> <xhtml:link rel=”alternate” hreflang=”fr” href=” www.yourbrandname.fr”/> <xhtml:link rel=”alternate” hreflang=”en-uk” href=” www.yourbrandname.co.uk/> <xhtml:link rel=”alternate” hreflang=”de” href=”www.yourbrandname.com> </url>
</urlset>

How to test an HrefLang tag?

To test if you have implemented the hreflang tag you will need to wait till Google recrawls your website. Once done it will list all the hreflang tag errors it finds in Search Console under International Targeting.

Keep Learning

Getting hreflang Right: Examples and Insights for International SEO
7 Common Hreflang Mistakes (and How to Fix Them)

 

After working 7+ years as a digital marketer for startups and large enterprises I quit my job to start EcommerceYogi. Here I share the exact same tactics which I have used to drive millions of users per month to e-commerce stores. Follow me on Linkedin and Twitter to stay connected.