The Most Secure Cross Browser Testing Platform since 2012

Blog

How to Set Up HrefLang Tags for Different Language Pages on Your Website

Web Development

How to Set Up HrefLang Tags for Different Language Pages on Your Website

Most global website visibility requires multiple language support. Google has said that auto-translations send poor quality signals to its search engine algorithms. You should create good translations that support countries you’re targeting. Once you have your content’s translations, how do you set up your site for the best SEO? Google provides you with a link tag that uses the “hrefLang” property to indicate to the search engine that your site supports multiple languages. Having the same content in different languages creates duplicate content in the search engines, so you should implement this tag when you have separate sites or separate folders with alternative languages.

Should You Use a Separate Subdomain or Subfolder?

Before you begin, you probably have the question of whether you should use a subdomain or subfolder for translated pages. Both SEO preferences send the right signals to Google’s algorithm, so in essence it doesn’t matter which technique you use. Subdomains are usually more difficult to manage, because they are separate domains from the root of your site. Subdomains are treated as a separate site by search engines, and they can be a huge overhead when managing your site. Unless you have someone who can help you with subdomain management, the easier route to go is subfolders. Subfolder names should have the corresponding language country code. For instance, if you have a copy of your site translated to Spanish, then the subfolder should use “ES” as a name. This country code along with translated content sends the proper language signal to search engine bots.

Whether you use subfolders or subdomains, always make navigation clear to users and bots. Less confusion is always better for SEO and sales.

Placing Your Alternative Language Tag

After you’ve decided on your setup, you can start placing your language tags. Obviously, you need your translated pages uploaded to your site, or the search engines will receive 404 server errors when crawling the alternative pages. The first step is to upload all of your content and set up your folders before you set language tags.

Next, it’s time to edit your page’s HTML code. You must add the link tag in your HTML head section. The section is at the top of your pages before the body tag. You can have as many of these tags in your pages as you have languages on your site. In addition to setting languages on your default page, you can also set a default language. A default tag is useful when you want to automatically redirect users to a specific language page.

The first step is annotating your pages with each alternative language. You need to use the proper language code that references each language. You can find a list on Wikipedia.

<link rel="alternate" href="http://yourdomain.com/es" hreflang="es" />

The following link tag is an example of settings that indicate you have a site translated for Spanish speakers:

In the example above, the Spanish language pages are located in the domain’s “es” subdirectory. If you have a subdomain instead, you place the subdomain link in the HREF property.

In some cases, you might have a similar language in different regions. For instance, maybe you want to support the German language for people living in Spain. Google customizes search specific to a searcher’s location and language, so having alternative languages set to a specific region helps your site rank for these queries. The following code creates an alternative for users in Spain who have their browsers set to German:

<link rel="alternate" href="http://yourdomain.com/es" hreflang="es" />

Notice the first part of the language parameter has the language code. In this example, the language is German, which uses the “de” language code. The “ES” parameter indicates to bots that the alternative pages are specific to people in Spain. Language codes specific to certain regions help you target different locations with varying forms of each language. In other words, your pages are more granular for users in each country.

The final step is to set a default language. The default language is used when the bot doesn’t recognize the language set in the user’s browser. You should set a default as a safeguard in case Google is unable to identify the right language pages to send users. The following code sets a default language:

<link rel="alternate" href="http://example.com/" hreflang="x-default" />

Notice in the code above that the “x-default” parameter is used and the link points to the root of the site. You should use this tag in all of your sites to limit errors on your site in terms of language support.

Once you place these tags on your pages, it’s just a matter of waiting for bots to crawl the pages. You can always do searches to check the status of your crawls, but your server logs are more accurate. It can take weeks for Google to crawl all of your site pages, so you must be patient.

Picture by woodleywonderworks