An Hreflang is an HTML attribute that is used to tell search engines about the specific language and geographical targeting of your webpages. For websites with multiple versions of a page, served in different languages, hreflang tags are a way of telling Google to serve the correct version of your content to users in different regions and countries.
This method of marking up pages is often the most complex part of international SEO. However, if implemented correctly will contribute to a greater user experience on your site.
How do we implement hreflang tags?
Before we can add hreflang tags to our site, we need to first work out what type of tag attribute we want to use to tell search engines about the relationship between the pages with different languages on our website. Below, we will look at a couple of typical examples of hreflang tags from different scenarios. (We will use the URL https://www.examplesite.com/ for our examples).
1. A South African site with English, Spanish, French and Portuguese language versions. The site is targeting users globally and in different languages.
We would need to implement a set of hreflang annotations in the header section of the HTML code of each page of our website, which will then tell search engines that our pages have the same content but in different languages and should serve the relevant content to the users when they select a language on the website. The following hreflang tag would have to be implemented on each version of the home page of the website:
<link rel=”alternate” hreflang=”en” href=”https://www.examplesite.com/en/” /> <link rel=”alternate” hreflang=”es” href=”https://www.examplesite.com/es/” /> <link rel=”alternate” hreflang=”fr” href=”https://www.examplesite.com/fr/” /> <link rel=”alternate” hreflang=”pt” href=”https://www.examplesite.com/pt/” />
The same rule applies to all versions of your product pages, and any other page for that matter.
<link rel=”alternate” hreflang=”en” href=”https://www.examplesite.com/en/products/” /> <link rel=”alternate” hreflang=”es” href=”https://www.examplesite.com/es/productos/” /> <link rel=”alternate” hreflang=”fr” href=”https://www.examplesite.com/fr/es/produits/” /> <link rel=”alternate” hreflang=”pt” href=”https://www.examplesite.com/pt/es/produtos/” />
It is also important to know that for a great user experience, it’s best to hire a content translator, someone who speaks and writes the language and this should be done for all versions of your site. Most automated content translator tools are flawed and will ultimately contribute to a poorer user experience.
2. A global website with one version for Africa, one for Europe (let’s use the UK as one example for now), one for Canada and the US and one for Asia/Pacific (let’s use Singapore as one example for now), all in the English language. This is common with global brands as services can be specifically tailored for each region or economic zone.
The following hreflang tag annotations would be implemented in the header section of the HTML code of each version of the home page on our website:
<link rel=”alternate” hreflang=”en-GB” href=” https://www.za.examplesite.com/” /><link rel=”alternate” hreflang=”en-GB” href=” https://www.eu.examplesite.com/” /> <link rel=”alternate” hreflang=”en-US” href=” https://www.us.examplesite.com/” /> <link rel=”alternate” hreflang=”en-CA” href=” https://www.us.examplesite.com/” /> <link rel=”alternate” hreflang=”en-SG” href=” https://www.apac.examplesite.com/” />
Now let’s look at other benefits that hreflang tags have for our global websites.
What are the SEO benefits of hreflangs?
Prevents duplication: If a website has pages with the same content that is delivered in different languages, or if the website has regionally specific content. If we do not have hreflang tags, Search Engines will see our pages as duplicate content, which can negatively affect the site when it comes to page ranking factors.
User experience: For content created for a specific audience and served to them in their language, it is more likely that they will engage with your website and meet the user search expectation. This will ultimately lead to better page ranking.
Lowers bounce rate: Improved user experience often leads to better engagement on the website which in turn lowers the bounce rate.
With this in mind, we should always remember that hreflang tags are different from Canonical tags. Hreflang tags tell Search Engines which version of the page to serve to users based on their location or language is chosen. Whereas canonical tags are used to tell search engines which version of the URL should be indexed and shown in Google Search Engine Results Pages.
Hreflangs are a very valuable aspect of International SEO, which helps search engines understand our pages better. Though they can be tricky to implement because of many different domains and URL structure and hreflang tag annotations to choose from, and once figured out can have great SEO benefits for your website.
If you have a Global website that is struggling to rank in other regions and require assistance with recommendations and implementing of hreflang tags, contact us for advice and guidance.
Article Author : Ntokozo Dlamini