Hreflang tag: The Easy Guide for Beginners

What is a hreflang tag?

If your website has multiple languages and/or targets multiple countries, then you’ll need the hreflang attribute on your pages.
Hreflang attributes basically tell the search engines that your website content appears in different languages and/or targets different countries.

Why is this important?
Because if you don’t have hreflang attributes, then for example, your Italian website pages could end up showing up in the English search engine results or vice versa. You don’t want that do you?
This could not only cause conflict between the pages, but also frustrate the searcher who is looking for the correct region and language.

How do hreflang tags work?

It can be a bit confusing at first, but much easier to understand than canonical tags. Here are a few examples to illustrate how they work:
Let’s say you have your main website http://www.example.com in English targeting a U.S. audience. You also have German and French versions of the website, both targeting Germany and France, respectively.
There are three ways you may have set these up:

English, US:
  • Root domain: http://www.example.com
  • Sub-folder: http://www.example.com/en
  • Separate domain: http://www.example.us
German, Germany:
  • Sub-folder: http://www.example.com/de
  • Sub-domain: http://de.example.com
  • Separate domain: http://www.example.de
French, France:

  •  Sub-folder: http://www.example.com/fr
  •  Sub-domain: http://fr.example.com
  •  Separate domain: http://www.example.fr

These are ranked in order from most recommended to least recommended.
For explanation purposes, let’s choose the sub-folder versions as an example.
For each of these pages, we’ll add a canonical tag into the <head></head> section for each of the language-country combination:

<link rel=”alternate” href=”http://example.com” hreflang=”en-us” />

<link rel=”alternate” href=”http://example.com/de” hreflang=”de-de” />

<link rel=”alternate” href=”http://example.com/fr” hreflang=”fr-fr” />

This hreflang tag generator can help with creating the proper language-country codes. For example English UK is en-gb not en-uk.
A common mistake for SEO newbies is to add the root domain on every page for the hreflang links. An easy way to remember not to do this is that it’s supposed to be an “alternative” to this page. So, let’s say we have a page http://www.example.com/page-a then the hreflang tags should be:

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

<link rel=”alternate” href=”http://example.com/de/seite-a” hreflang=”de-de” />

<link rel=”alternate” href=”http://example.com/fr/feuille-a” hreflang=”fr-fr” />

How do you implement hreflang tags?

 

If you use WordPress:

If you use WordPress as your content management system (CMS), then simply install the

If you use another CMS:

Check to see if your CMS has any SEO plugins that have hreflang tag functionality. If not, you may have to hire a developer to add this feature into your CMS.

If you are coding from scratch or framework:

If you choose to add in this functionality yourself, then make sure to auto-generate the proper hreflang tags based on the languages and countries that you are using.
That’s it! If you feel this post has helped you, or you want to share your thoughts, then leave your comment below. If you feel you need more explanation or clarification on this topic, let us know and we’ll update this post shortly afterwards.

Post a Comment

0 Comments