A Guide To Hreflang Tag Best Practices For SEO
Brands who need to reach customers in different countries need to make sure that the content they produce is displayed correctly internationally. Content created for Spanish speakers in Mexico shouldn’t appear for those accessing the website in Spain.
Here is what you need to understand about the importance of the hreflang tag in international SEO and how it can be used to build a strong international digital presence.
Hreflang tag architecture you should understand
There are three places that you can put your hreflang tags, each with their own benefits.
Hreflang in your <head>
You can place your HTML hreflang as link elements directly into your heading, but this can slow down loading times for large sites who have a lot of languages to load. This is perhaps the easiest option, but it will require maintenance. Every time you add or remove a page, you’ll need to update your hreflang tags.
<link rel="alternate" hreflang="en-us" href="https://www.example.com"/> <link rel="alternate" hreflang="en-gb" href="https://www.example.co.uk"/>
Hreflang in your HTTP headers
For non-HTML documents, you can place your hreflang in your HTTP headers. However, like the link elements in the <head>, large sites with a lot of languages may find that this option slows down their load speed.
Link: <https://www.example.com/file.pdf>; rel="alternate"; hreflang="en-us",
<https://www.example.co.uk/file.pdf>; rel="alternate"; hreflang="en-gb"
Hreflang in your XML sitemap
You can also use the xhtml:link attribute in your sitemap to add your hreflang code. If you don't have a sitemap, it's critical that you have one and learn to use it for optimization. Fortunately, you can make your changes directly through the sitemap and not worry about adding something to every page of your site. Additionally, if your sitemap.xml file is automatically generated, this approach may make it easier to add or remove pages without worrying about the hreflang setup.
<?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>https://www.example.com/resources/page.html</loc> <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.example.co.uk/resources/page.html"/>
If you have content in many languages and countries, this can become a bit of a cumbersome practice but in the end, coding for each language and location will create value for your website and an overall better user experience for consumers. In addition to pages designated for specific languages and countries, you also need to consider what you want search engines to do in situations where you haven’t specified an hreflang.
For example, say that you have a French site specifically designated for France, Switzerland, Belgium, and Canada, but someone in the United States searches in French.
Consider selecting one, a standardized French one, to only designate the language and NOT specifying a country. Your code would simply designate ‘hreflang=”fr”’ rather than “hreflang=”fr-fr”, which will ensure that this French version appears for anyone searching in French outside of your other French Country pages for Canada, Switzerland, and Belgium.
Alternatively, you can also assign one version of the page to be a ‘default’ result that should appear for anyone accessing the page from a country that you have not otherwise specified with a hreflang tag.
The default page code will look like this:
<link rel="alternate" hreflang="x-default" href="https://www.example.com"/>
5 common mistakes with hreflang tags
As website owners begin to set up their hreflang tags to improve their international SEO, there are a few common errors that marketers need to be attentive to. Here are some of the most common mistakes seen that you should check for in your code and our top five tips to correcting them.
- Not including the return hreflang tags correctly
- Neglecting to verify the language and region codes
- Not using the default page
- Not setting up the hreflang correctly
- Problems with pages the hreflang points to
1. Mistake: Not including the return hreflang tags correctly
Fix: Make sure that the hreflang tags you create use the appropriate self-referential canonical tags.
Remember that when one page links to another page as an alternate, that alternate must also link back to the original page. Failing to do so can cause errors in implementing the links. The links might end up being ignored or implemented incorrectly, which will undo any of the benefits that you worked to obtain with the careful creation of the tags.
Also, if the canonical tags all point to the US as being the canonical version, regardless of the country or language of the user, this can result in indexing problems for the sites designed for the international populations which is why canonical tags are so important.
2. Mistake: Neglecting to verify the language and region codes
Fix: As you work to create your hreflang tags, always carefully evaluate the abbreviations you use to make sure you target the right language and country.
The language and region codes used in the hreflang tags come from the ISO 639-1 and the ISO 3166-1 Alpha 2. While some of these codes are what people would expect them to be, such as ‘en’ for English, they are not all what most people would assume. For example, the UK is actually Ukraine, whereas the abbreviation for targeting those in England would be GB, for Great Britain.
3. Mistake: Not using the default page
Fix: Using the x-default option allows you to decide what these users should see.
Without this specific tag, search engines will still display your page on the SERP, and they will try to target the version of your site that makes the most sense, but you will leave this process to chance and their algorithms. It might not exactly be the site version you had wanted displayed to those target customers.
Although not required, it does offer SEO value to setup an x-default page.
4. Mistake: Not setting up the hreflang correctly
Correction tip: The hreflang code must follow a specific order - [Language code]-[country code]. For example: en-gb.
Using these codes in the wrong order - such as putting the country before the language or using something other than the simple dash ‘-’ will invalidate the code.
Marketers must also remember that while you can designate a language without designating a country, you cannot designate a country without a language. That first part of the tag - the language code - must be filled in.
5. Mistake: Problems with pages that the hreflang points to
Correction tip: Hreflang pages must be Status 200 OK
As your domain and business grow, you need to make sure that you stay on top of your website structure. If you have a new domain for a country or end up deleting a version of your website, you have to make sure all your hreflang tags also receive the update. You do not want to have tags that point to missing or incorrect URLs or pages that return any kind of error. If there are redirect errors on your site, it's vital to know about them and how to correct them.
Start optimizing for an international audience today
When it comes to international SEO, hreflang tags offer tremendous value. They allow organizations to ensure that the sites displayed to customers are most likely to align with their needs, which helps to create an ideal user experience. If you have different versions of your website for those who speak different languages or reside in different countries, verify that you have not made these common hreflang mistakes and see how this coding strategy can help you build a strong digital presence.
