Hreflang is an HTML attribute used along with Link Tag to specify the language and regional targeting of documents. It helps search engines to understand the relationship between the pages in multilingual and multi-regional sites. This further helps search engines to serve content relevant to the user query.
Reasons for Choosing Hreflang?
Before the introduction of hreflang, businesses could only target customers from the country of its origin. Even if they had a website, tapping customers from the international market was quite tricky.
Let us understand this concept with the help of an example:
Suppose there is a person ‘x’, an artefact seller from India who wants to expand his business to the international market. He sets up his website, patiently waits for his first order, but to his misery, he fails to receive a single order. He could not figure out why. (Note: In olden days Google produced similar results no matter where you search from, as location played little role in search results). But today we know why. Maybe his website did not have localized content for the targeted audience or there is absence of local currency on the transaction pages.
The above scenario could have been trickier for search engines as well. Even though it might have indexed the website; it may not have shown the website frequently in International searches. Also, the site might be subject to a high bounce rate owing to its non-localised content.
With the introduction of hreflang, Google has solved the problem completely. Businesses can now serve the optimized local content to the customers residing in a different country as well as in the same region.
Hreflang Importance in SEO
Google has neither confirmed officially about hreflang being a ranking factor nor do their technical documents have any confirmation regarding the same. However, using hreflang as on-page SEO technique helps sites to increase their CTR, which is a Google ranking factor. Below are two significant points which capture the importance of hreflang to its fullest.
- When a search engine serves users with content in their local language, it enhances their user experience significantly. It leads to higher dwell time, less bounce off, and high CTR, which is an indirect ranking signal to Google.
- When there are multiple contents in the same language but targeting different countries with slight variations, the problem of duplicate content is solved. Google considers them as duplicate but might choose one of them as the canonical version. By defining Hreflang, you can proactively indicate to Google that both are alternate versions of each other, created to serve different geographies.
SEO should always remember that hreflang is just a signal to Google, not a directive. Its usage does not guarantee success. However, it should not be the reason to ignore the implementation of hreflang. Using hreflang for multilingual or multi-regional sites is always a good practice. Agencies using advanced technical SEO should always refer to the documents by Google on Hreflang Implementations for harnessing its full potential.
Scenario and Annotations of Hreflang
You can use hreflang in one of the three scenarios for your website.
Same Country, Different Language
< Link rel = “alternate” hreflang = “en-us” href= “https://www.xyz.com” />
<Link rel = “alternate” hreflang = “es- us” href = “ https://www.xyz.com/es />
Link rel = alternate tells the search engine an alternate version of the web page is available
hreflang = “en-us”, indicates the search engine that this language page should be shown when a user from the USA with English as his language settings searches the web
hreflang = “es-us”, communicates to the search engine to show Spanish version of the web page when a user from the USA with Spanish as language settings, searches the web.
Proper language and country codes should be defined to avoid implementation error. Google recommends using ISO 639-1 standard for language abbreviation and ISO 3166-1 Alpha 2 standard for countries.
Same Language, Different Country
< Link rel = “alternate” hreflang = “en-us” href =” https://www.xyz.com” / >
<Link rel = “alternate” hreflang = “en-gb href = “ https://www.xyz.com/en-gb” />
<Link rel = ”alternate” hreflang = “en-ca” href = “https://www.xyz.com/en-ca” />
Some places have gTLD available. There you can assign a separate domain for the targeted region.
You can use the subfolder to host content for different countries.
Code for the gTLD
<Link rel= ”alternate” hreflang = ”en-us” href = “https://www.xyz.com/ “>
<Link rel = “alternate” hreflang = “en-gb href = “ https://www.xyz.co.uk” />
<Link rel = ”alternate” hreflang = “en-ca” href = “https://www.xyz.co.ca” />
Different Language, Different Country
<Link rel=”alternate” hreflang=”en-en” href = “https://www.xyz.com/” >
<Link rel= “alternate” hreflang=”es-es” href= “ https://www.xyz.com/es” />
Placement of Hreflang Tag?
Google Support recommends implementing Hreflang in one of the three places mentioned below; the most recommended one is with:
In the Head section
Placing the hreflang attribute in the HTML is simple and easy. If you are implementing for the first time, it may be the right one to choose. The hreflang attribute is used with a link tag and goes inside the head element of HTML Markup.
<link rel= ”alternate” hreflang= ”x-default” href=”https://www.page.com” >
<link rel= ”alternate” hreflang=”en-gb” href=”https://www.page.com/gb” >
<link rel=”alternate” hreflang= “de-de” href=”https://www.page.com/de” >
Hreflang in the HTTP header, i.e., whenever Google requests for a page, the server in its response sends all the information about the page and presence of its variant version proactively. This way of implementing Hreflang is mostly for .pdf pages where the HTML markup is missing.
Link: <http://example.com/file.pdf>; rel=”alternate”; hreflang=”en”, <http://www.example.com/de/file.pdf>; rel=”alternate”;hreflang=”de-ch”, <http://www.example.com/de/file.pdf>; rel=”alternate”; hreflang=”de”.
In the XML Sitemap
Implementing hreflang in the sitemap seems to be the most complex one, but it has its advantages, such as dealing with a single file. For any update on an addition or deletion of language or region, specific code can be placed without actually disturbing code on the website.
We have to add an XHTML child tag which will list all the language variant nested inside <loc> tag we often use with the sitemap.
<?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”>
<xhtml:link rel= “alternate” hreflang=”de” href=”http://www.example.com/deutsch/page.html”/> <xhtml:link rel= “alternate” hreflang=”en” href=”http://www.example.com/english/page.html”/> </url>
<xhtml:link rel= “alternate” hreflang=”en” href=”http://www.example.com/english/page.html”/> <xhtml:link rel= “alternate” hreflang=”de” href=”http://www.example.com/deutsch/page.html”/> </url>
Rules to follow while implementing Hreflang
Google documentation recommends every language version must contain a self-reference tag along with all the language and regional variants the site is targeting. Self- referencing tags should be followed by all URL present in hreflang annotation.
A British based e-commerce website “Prettylittlething” targeting different countries have used it to perfection.
Each language version must point to each other, i.e. Bi-directional relationship. Suppose a language version ‘A’ is pointing to another version “B” then “B” should point back to “A” otherwise the hreflang would not work.
E-Commerce website “Prettylittlething” USA based websites have bi-directional to UK website.
Use X- Default for Good Practice
Usage of X-Default value for hreflang attribute is not mandatory, but a good practice. This version is also called a Default or Fallback version. Sometimes Google shows this version when a user visits from a country whose language is not present in the Hreflang attribute or if the implementation for the language version is wrong.
Common Errors and Troubleshooting
It is always necessary to audit your hreflang implementation from time to time to uncover any issue with it. Some of the most common errors we can find are mentioned below, along with ways to fix it.
Self-reference Annotations missing
It is mandatory for all pages with hreflang annotations to self-reference themselves. Failing to do so can trigger a warning for it, or worst, the pages may be ignored and would not show in the search result.
FIX – Review the affected pages, then add a self-referencing hreflang tag to each of them.
Bi-directional link missing
Every page variant should link back to all the pages that are present in the hreflang tag. Only then a relationship between the pages is established and understood by Google. Otherwise, there is a high chance Google may not consider these pages and will fail to show local content in a specific geography.
FIX – All the pages that are missing bi-directional links should be found, and changes should be made to solve the error.
Hreflang annotation invalid
This error may appear due to the invalid language code or maybe due to invalid country code.
FIX – Run a crawl in Screaming Frog tool to check for the invalid hreflang pages and use appropriate language and country code.
Hreflang Linking to Broken page
This error is triggered when href attribute links to the broken page in hreflang annotations. Broken links might lead to a dead page which Google may overlook and not show to the user.
FIX – Find pages by running site crawl with the help of Screaming Frog. Check hreflang report to see all the non-200 URLs to check for broken pages and replace them with the live pages.
Page referenced for more than one language in Hreflang
Hreflang error occurs when one of the pages is referenced for more than one language, i.e., two different language versions are referencing the same. Such an implementation page creates confusion for search engines. In a state of confusion, the search engine would choose such directives and may consider both the pages for the search result.
FIX – Go through every page where hreflang annotations are present and check for href attribute value to find an error and fix the right URL.
Hreflang and HTML Lang mismatch
Errors could happen when there is ambiguity between the declared hreflang and HTML language attribute. Google does not rely much on HTML language attributes, but some search engines and browsers may look at both the places for confirmation.
FIX – Find the affected pages, change the HTML lang attribute for affected pages for consistency.
Tools to Create Hreflang
- Alyeda Solis hreflang Generator tool
- Sistrix hreflang tool
Tools to Test Hreflang Implementation
- Merkle SEO hreflang testing tool
Right from its introduction, to date, we have come so far in terms of its usage. It surely has become an integral part of International SEO. It may not look easy, but it is relatively simple and using the same can have a great SEO benefit. Following the best practices can always yield the best results. Still, one should remember that practising and learning is the best way to master an art like hreflang.
Best SEO Company | Search Engine Optimization in Bangalore | Search Engine Optimization in Delhi | SEO Company in Mumbai | Best SEO Agency | SEO Consultants Services | Internet Marketing Services | Ecommerce SEO Services India | Website Audit Services | SEO Penalty Recovery Services | Local SEO Services in India | PPC Services in India | ASO Services in India | Conversion Rate Optimization Company | Link Building Services | Content Marketing Agency | SEO Services in India | Digital Marketing Overview | What is Google Algorithms | Reverse Image Search