What is hreflang?
The hreflang tag is an attribute which helps Google and Yandex search engines to understand the language used on a specific webpage. With the correct implementation of hreflang, search engines are able to serve the most appropriate content language version of a webpage to a user.
When should you use it?
A hreflang tag should be used when a website is translated across multiple languages. For example, a hotel chain which operates in Spain but also targets the UK market may have two versions of their website – one in English and one in Spanish.
An hreflang tag will ensure that search engines serve the Spanish language website to users searching in Spain (hreflang=”es”), and the English language website to users searching in the UK (hreflang=”en”).
Regional Variations
It’s also likely that a website may be targeting different markets that use the same language, for example Spanish in Spain and Spanish in Argentina or English in UK and English in US. The hreflang tag can help to serve the regional variation in a specific country, delivering the Mexican Spanish variation in Mexico, and therefore resolving duplicate content issues (hreflang=”es-mx”).
Common structure & implementation
[color-box color="gray"]<link rel="alternate" href="http://mysite.com" hreflang="es-mx" />[/color-box]
It is important to ensure that all the pages contain a “self-hreflang” tag as well as the “alternate” ones. For instance, if there is a website with three language variations, let’s say English, Spanish and French, each page should include the three languages in the code, including the language of the page in question (this is the “self-hreflang”):
[color-box color="gray"]<link rel="alternate" href="http://www.mysite.com/es" hreflang="es" /> <link rel="alternate" href="http://www.mysite.com/en" hreflang="en" /> <link rel="alternate" href="http://www.mysite.com/fr" hreflang="fr" />[/color-box]
X-default tag
[color-box color="gray"]<link rel="alternate" href="http://www.mysite.com" hreflang="x-default" />[/color-box]
The x-default tag allows users to manually choose the language in which they prefer to view the website. This is very useful when a company has specifically targeted countries, but are likely to receive traffic from countries outside of the language variations they offer.
Implementing an x-default tag allows you to control a default page which will appear for any users visiting from a non-targeted country, and offers the option to select the most appropriate region or language.
Where should the hreflang tag be placed?
There are three different methods of implementing hreflang tags:
1. HTML code. This is probably the most common method. It should be placed in the <head> section and it be included in every single page across the site.
Note: Be warned that if placed outside the <head> section, this can create problems for the search engines. Additionally, if the tag is not included on all pages site-wide, there is a chance that search engines max mix languages and display the incorrect content.
This option is probably the best choice for small sites. There are many examples of sites that use this option, including a number of addmustard’s internationally operating clients such as blueseahotels.com, hoppa.com or lowcostholidays.com.
2. Sitemap XML. This is probably the best option if you are managing a medium to large website. This functionality allows webmasters to simplify the process of adding a piece of code to every single page.
3. HTTP Header. This option indicates the language preference of a website or non-HTML files like PDFs or other media format.
Note: It is important to only implement one version of the methods detailed above. If not, you are likely to confuse both yourself as a webmaster, but also search engines, resulting in unnecessary issues.
How do I structure hreflang tags?
1. HTML Code. Crucially, the hreflang tag needs to contain a value that identifies the language target. For example, “hreflang=en” and/or country “hreflang=en-gb” for English speaking users, which should be included in every single page.
[color-box color="gray"]<link rel="alternate" href="http://www.mysite.com/es" hreflang="en" /> Or <link rel="alternate" href="http://www.mysite.com/es" hreflang="en-gb" />[/color-box]
Link real=”alternate” is used to specify that the page has an equal match in other language or region.
Href=”http://www.mysite.com/es” specifies the URL.
Hreflang=”en” details the language used and/or the targeted country (hreflang=”en-gb”).
Note: In this instance, the language always comes first, followed by the country. It’s advisable to look at the country codes to avoid any confusion.
addmustard also recommend a very useful hreflang tool validator by Aleyda Solis and a handy hreflang tag checker for Chrome.
2. Sitemap XML. It is essentially to add a separate URL element just below each URL listed on the sitemap:
[color-box color="gray"]<?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.mysite.com/fr</loc> <xhtml:link rel="alternate" hreflang="fr" href=http://www.mysite.com/fr /> <xhtml:link rel="alternate" hreflang="en" href="http://www.mysite.com/en" /> <xhtml:link rel="alternate" hreflang="es" href="http://www.mysite.com/es" /> </url> <loc>http://www.mysite.com/en</loc> <xhtml:link rel="alternate" hreflang="en" href=http://www.mysite.com/en /> <xhtml:link rel="alternate" hreflang="fr" href="http://www.mysite.com/fr" /> <xhtml:link rel="alternate" hreflang="es" href="http://www.mysite.com/es" /> </url> <loc>http://www.mysite.com/es</loc> <xhtml:link rel="alternate" hreflang="es" href=http://www.mysite.com/es /> <xhtml:link rel="alternate" hreflang="en" href="http://www.mysite.com/en" /> <xhtml:link rel="alternate" hreflang="fr" href="http://www.mysite.com/fr" /> </url> </urlset>[/color-box]
The specifications are the same as in the previous method, where by the xhtml:link rel=”alternate” indicates an alternate page in another language or for another region, and the hreflang=”es” means the language (and also the region if detailed) of the alternate page and the href the URL.
3. HTTP Header. The structure of this method is also very simple:
Link: <http://www.mysite.com/es>; rel=”alternate”; hreflang=”es”, where the link specifies the URL, the alternate indicates the URL match in another language, and the hreflang specifies the language.
Important: All the URLs in the hreflang tags (no matter which method you use), must be 200 response code pages (final destinations) to avoid any search engine confusion.
In those cases where you wish to serve the same language, but target different regions, (for example, “en-gb” (English UK) and “en-us” (English US), it is important to specify a general language – in this case English. Without this, search engines are unable to determine which type of English to serve in other English speaking countries such as Australia. For more information follow the Google guidelines.
The hreflang tag implementation is just an action within your internalisation strategy and it should be part along with other actions that facilitate and improve your international website visibility.
If you have any further questions, or need a hand implementing hreflang tags across your website, get in touch with a member of the addmustard SEO team.
