Hreflang tags help sites with similar content in multiple languages serve the correct version of the web page to a user based on language and region.
If you wish to expand your business internationally, you’ll want to produce content in multiple languages to satisfy global users. However, how do you make sure that your international customers are being served the appropriate content? Hreflang tags are a method to mark pages that are similar in content, but are targeted toward an audience in a different region or that speak a different language.
For example, a business might sell the same products in both the United States and Japan. In this example, if a user were Japanese, but the English page was ranking for their query, the business would want the search engine to point them toward the Japanese version instead. That is where hreflang tags come in. These tags help point users to the most appropriate version of the content, filtered by language or region.
Hreflang is an HTML attribute that is used to specify language and location of web pages. If you have many lingual versions of the same page, these attributes can ensure that the user is being served the correct web pages from the search engines. By using the hreflang tags, you're telling search engines like Google about the variations in the pages.
Every country and language has its own hreflang attribute, which can be helpful when you have content aimed at different locations with the same language. For example, if you have pages that are targeting English speakers in the U.S., the U.K., and Australia, your code would look like this, respectively:
However, there could be some English speakers that are not targeted by these codes. In that case, using just the language attribute would suffice. That way, every user searching in English would have access to the web page.
There are a few ways that hreflang tags help search engine optimization (SEO) strategies:
Translating web pages for your different audiences can take time and you’ll want to make sure that your audiences are getting the right content. Hreflang tags help search engines understand which content should go to which user as well as the relationship between the translated pages.
To properly utilize the hreflang tag, it’s important to know how to construct one and which rules to follow. Otherwise, the search engines could disregard your tags and you could miss out on delivering the correct content to your audience.
Each attribute is two-part:
The end result should look like this:
While the search engines can normally understand small mistakes with the attributes, it’s important to ensure you are using the right one just in case.
Hreflang tags are a two-way street, meaning that each URL needs two tags — one to point to the other language and one to point to itself. This helps prove to search engines that you have control over both pages and that they are related to each other. It also establishes that there is a single original version of the page. So, if you have a page with a hreflang tag that points to a Japanese page, the Japanese page must point back to the English page.
According to Google Support, each language version must list itself as well as all other language versions. Basically, every page must point back toward itself using the hreflang tag. Self-referencing attributes look like this:
Before adding hreflang tags to your site, you’ll want to think about how and where they should go. Placing them strategically can make a big impact on how users interact with your site. It’s important to note that you only need to pick one of these methods.
If you do not have a site map, one way to add these tags is to put them in the <head> section of every page, which looks like this:
Each page variation must include the link elements in the <head> including itself. So, if you have 80 pages with different languages, that means you’ll have to add 80 link elements to every page. Larger sites could experience a longer load time.
Some pages won’t allow for HTML link elements, like PDFs. However, they are implemented similarly to the link elements. A standard hreflang tag in a PDF looks like this:
This method works on any non-HTML content, not just PDFs. However, you could run into the same problem in the previous method, as all headers need the same tags, which could slow down the load time for the page.
The last method consists of using hreflang tags in XML sitemaps. By using the xhtml:link attribute, you can add an annotation to every URL. There are two benefits to using this method:
The downside to using hreflang tags in a sitemap is that it’s time consuming. A markup for one URL with two languages looks like this:
<xhtml:link rel="alternate" hreflang="en"
<xhtml:link rel="alternate" hreflang="en-au"
Considering each URL needs the hreflang tag, imagine the above block doubling in size. Though there would be more output needed for this method, from a user standpoint, it seems more beneficial.
To make the most out of hreflang tags, there are some best practices to consider.
This is an hreflang attribute that specifies a certain page as the “default page.” This happens when a user does not fall under any language category you’ve tagged, so they are directed to the default. The x-default attribute looks like this:
Even though the default attribute would direct users to the webpage with the main language, it’s good practice to have both tags so the code is easier to read. For example:
This shows that you have one page targeted toward English speakers in the U.K. and one page targeted toward English speakers in Italy. If there are users that are searching for the same query, but do not speak English, they would be directed to the default version, which is the English U.K. page.
Other considerations when using hreflang tags are:
Expanding your business internationally is a big step, and hreflang tags can help direct users to the correct content on your site. Though hreflang tags sound easy, they can become complicated based on how many pages you need to target. By using the correct attributes and implementing best practices, you can avoid any issues with hreflang tags and successfully reach your audience with the correct content.