Hreflang tags are pretty small elements of a page, but they can have a big impact for sites that have several country variations. And small but mighty is how Wild at Heart's Poly is described, check out his profile here.
What is hreflang?
Hreflang is an attribute used to specify the geographic targeting of a page on a website. It is used when there are multiple versions of a page in different languages, targeting different locales, to inform search engines of the variations and help users find the correct version for them.
You can target both the region and language within hreflang tags, which informs search engines which version of a page they should serve to users depending on their location and language. However, it's important to remember that hreflang is just a hint rather than a directive so it is not guaranteed that the correct version will be shown in search, which is why it is important to still ensure content is localised.
Why is hreflang necessary?
There are a couple of key reasons hreflang is necessary for some websites. The first being duplicate content issues. If you have the same version of a page with one targeting english speaking US visitors and the other targeting english speaking UK visitors, this can cause content duplication. The hreflang tags help to solve this issue to ensure search engines understand the connection but don't see the content as duplicate.
Ensuring users are able to find the most relevant page based on their location and language also helps to improve their experience on a website. If a user clicks through to a page that is correctly targeted to them they are likely to spend longer on a page, visit more pages on the website and are less likely to bounce back to the search results.
How to implement hreflang
There are three ways to implement hreflang tags, the best method depends on a number of factors including the size of the websites, and the ability you have to update pages.
The first, and typically common method, is using a HTML tag in the head of the webpage. This is the quickest and easiest way to implement the hreflang tags as all that is required is an extra HTML tag within the head of the page.
An example of HTML head hreflang tags is similar to this:
The next approach is implementing hreflang tags within an XML sitemap, sitemaps can be used to include relevant markup for each URL included and this covers the hreflang attribute. They can be implemented using a xhtml:link attribute, for example:
Another method is implementing hreflang through HTTP headers, this is particularly useful for any elements on a website which are not HTML, for example PDF files. The HTTP headers method allows you to add rel alternate markup to document variants to specify the language and country targeting. This method can also be used for normal HTML pages too.
Here is an example of a PDF file with hreflang tags added to the HTTP header:
You may have seen in the examples above, a tag which is classed as x-default. This tag can be used to display the default version of a page that should be shown in the instances where there is no specific language or country targeted tag.
Common hreflang issues
Hreflang is commonly known as one of the most complex areas of technical SEO, and there are a lot of complex factors to consider to ensure the implementation is correct. If the set-up of these tags is incorrect, they will not be valid and therefore search engines will ignore them.
Hreflang tags are bi-directional, which means in order for them to be valid they need to reference another page which has the same tag on it. For example, the English version of a page has a hreflang to the Chinese version of the same page, that Chinese version must also have a hreflang tag pointing back to the English page.
Incorrect language codes
In order to be recognised by search engines, all hreflang attributes need to use the ISO 639-1 format for language codes. A common error that a lot of SEOs have seen is the incorrect tag being used for United Kingdom, as the correct code is gb rather than uk. Therefore it is important to check all the language codes being used against the ISO formats to ensure they are correct.
Conflicting canonical tags
As a canonical tag is used to inform search engines which page should be indexed, it is important to use both a self-referencing canonical tag with hreflang tags. This is because hreflang tags do not block the indexing of alternative versions of a page, as they are needed for the specific search variation. If the canonical tag is pointing to a different URL, this can cause confusion for
In addition if all canonical tags, even those for the alternate versions are pointing to the English version of the site, instead of the targeted pages, search engines may only index the English version rather than the correctly targeted page for local users.