What are Hreflang Tags?
These are small references of code that tell the Search Engines what language and region the content is on a webpage. You can also use it to define other variations of the same content in different languages. There are more than 60 languages available.
Below is how hreflang tag code looks like for your webpage in HTML.
Also referred to as rel=”alternate” hreflang=”x”.
The hreflang tag is a combination of the language code and the region code. As in the example above, ‘en-GB’ is used to serve content in English and for the United Kingdom, ‘fr-FR’ is used to serve content in French and for France, and lastly, ‘en-US’ is used to serve content in English and for the United States.
Please Note: the language should be indicated first within the code and then the country.
Why do we need Hreflang Tags?
Many website owners target users in different countries and through multiple languages. Creating a multilingual website can serve the same content to a mixed group of users and helps improve SEO in those regions and languages. This will help serve your website’s content, products, services and brand to a wider audience and increase your rankings.
Search Engines can easily detect the language of a webpage and automatically match it to the language settings on the user’s browser. However, your web pages may still be competing with each other which can lead to duplication of content issues and therefore, affect your site’s SEO. To avoid this is it best practice to implement a hreflang tag to each page and specify the language and country that the content should be relevant to.
Implementation of Hreflang Tags
We can tackle the implementation of hreflang tags either by a plugin or via hard coding. The choice if yours and depends more on what you wish to achieve rather than saying one is better than the other. We’ll look at both to provide a balanced and impartial view.
Method 1: Add Hreflang Tag Using a Multilingual Plugin
If you use WordPress you can solve this issue easily by adding a plugin such as Hreflang Tags Lite by DCGWS or Translate WordPress with GTranslate by AI multilingual Solutions. These represent just two of the plugins available and by no means are the right ones for you. That will depend on researching each one to see if it works the way you wish it to, plus you like the feel of it in the backend too.
The benefit of using a plugin over ‘hard-coding’ will be that they take care of all the technical things automatically, so you can just concentrate on creating the content.
Method 2: Adding Hreflang Tags via Hard-coding
Another way to add the Hreflang tag into the webpage and avoid adding another plugin can be undertaken by accessing the Header.php file. This can be found under the backend of your WordPress site under the left-hand sidebar title ‘Appearance’. Next click ‘Editor’ and on the far right, search under your theme for the ‘Header.php’ file.
How to check if Hreflang has been added correctly?
There are two ways that you need to check to ensure that Hreflang tags have been added correctly to your webpage.
The first method is to open the page or post you tagged with the plugin or code. Right click in your browser and select ‘View Page Source’ from your browser menu. Likewise, you can type ‘CTRL-U’ and the respective webpage view source will be displayed.
To locate the hreflang tag references within the code, type ‘CTRL-F’ and type in the top right-hand field the word ‘hreflang’. As you type it will display the appropriate references within the code if they are there to be found. Further along in this highlighted box, you will see the number of references within the volume of your code.
View Source Code below (taken from our website) to see how the hreflang Google has been implemented correctly:
The second method to check if hreflang tags have been added correctly, involve opening Search Console and open your asset. Under the titles in the left-hand sidebar, open ‘Search Traffic’ and then ‘International Targeting’. If hreflang tags are loaded on your site, you will see a graph here that will represent the current number of your hreflang tags on your site and whether there are any errors or not. See the example below.
Biggest Mistakes made with Hreflang SEO Tags
There are many ways to add or edit your code incorrectly, but the most common ones are listed here.
- Wrong country code. Please check our guide as it is very easy to be misled into thinking a code should be one thing and it turns out it is something else. For example, United Kingdom is actually ‘GB’ and not ‘UK’ as you naturally think.
- Putting the country code before the language code. Should be the other way round. Language first and then the country code. For example, ‘en-GB’.
- Wrong language code. This is normally down to assuming something that is closely related to your language or country but is actually relevant to another. For example, UK for the Ukrainian and not the United Kingdom.
- Only using the country code. Remember that the language code is mandatory, whilst the country code is optional. Best practice is to use both.
- Use of an underscore (_)instead of a hyphen (-) between the two references.
- Use of a relative URL rather than showing the full URL. For example, /en/blog/ rather than https://example.com/en/blog/
Are Hreflang values case sensitive?
No. Capitalisation does not matter, however, it is recommended by ISO 3166 convention that language codes are lowercase and country codes are uppercase. This is an ideal way to recognise which is which, especially when you have the same reference for language and country. For example, ‘fr-FR’ which is French for France.
Special Note to certain Languages & Countries
Certain topics pop up quite often and I have outlined a few below:
Europe or the EU is not a country and therefore, does not show up in the list of countries. If you wish to target European users using language or country targeting, do so with the correct codes. For examples, English – use en, United Kingdom – use GB
UK/United Kingdom/Great Britain
The country code for the UK is not ‘UK’ as this stands for Ukranian. The correct country code for the UK is ‘GB’.
If you want to target Arabic speakers worldwide, just use the language code ‘ar’. If you target Arabic speakers in Saudi Arabia, you will need to use the code ‘ar-SA’. For Arabic speakers in Argentina, use the code ‘ar-AR’.
Special Note to certain Languages & Countries
People coming to your website from around the world who speak English would require just the language code only. For example, ‘en’. No need to reference the country, only the language. Same can apply to any other language.
What if my website is only in one language?
Well, you do have to do anything as the Search Engines will be able to determine the language of your website from its IP address along with a combination of the text on your webpage. However, you can still add it as a matter of best practice.
What if I have one website catering to multiple languages?
Consider if you have an English website but cater to multiple languages within your country. Then it makes total sense to add the various languages to cater for your diverse audience. For example: ‘en-GB’, ‘fr-GB’, ‘es-GB’, ‘de-GB’ which caters for English, French, Spanish, and German on your website.
Setting up hreflang tags is time-consuming but another vital element in improving your indexation with the Search Engines. Remember every little helps when you wish to rank higher and helping the Search Engines to better understand your web pages is not only smart but worthwhile in the long run.
Other elements that help with indexation include:
- Data Highlighting
- Schema Markup
Find out more in our other guides.
Find Out More
If you would like to know more about Hreflang Tags please send your question to firstname.lastname@example.org or comment below.