An Introduction to ‘hreflang’ Tags (And How to Use Them)
Imagine that you go through the trouble of translating your website into multiple languages, yet search engines keep directing users to the default option. This can be both annoying, and damaging to your traffic levels.
That’s why it’s smart to signal search engines to display specific versions of your pages, depending on where each user is located. You can accomplish this using ‘hreflang’ tags. Even if you don’t know what those are, the process of implementing them is simpler than you might imagine. In fact, there are multiple ways to add hreflang tags to your website, so you can pick whichever one you prefer.
In this article, we’re going to dig a bit deeper into what hreflang tags are and why they matter. Then we’ll walk you through three ways of implementing them on your website. Let’s get to it!
What hreflang Tags Are (And Why They’re Useful)
Many websites have multiple versions of their pages in different languages, in order to reach a wider audience. In most cases, when you visit a site like this via search engines, you’ll be redirected to the correct version based on your location.
It’s easy enough for search engines to find information about where you are in the world. The question is, how do they know which version of a web page to show you? The answer is through the use of hreflang tags. These are small lines of code that tell search engines what version of a site they should display to each region.
The way you implement these tags can vary, but the ‘codes’ they use look like this:
- de-at
- de-ch
These codes are made up of abbreviations that stand for particular regions and countries. The first example instructs search engines to show the German version of a website to users from Australia. The second also refers to the site’s German version, but displays it to users from Switzerland instead. There are also codes for broader regions, such as “eu” for the European Union
Adding hreflang tags to your website helps direct all users to the correct pages. What’s more, these tags also keep search engines from seeing your translated pages as duplicate content, avoiding penalties to your search rankings. Fortunately, hreflang tags are also easy enough to use.
How to Implement hreflang Tags on Your Website (3 Methods)
Regardless of which approach you use to implement hreflang tags, you’ll need to know what language and region codes to use. There are a lot of these codes, so we recommend using a cheat sheet to keep everything straight. With that in hand, you’re ready to get to work.
1. Use <head> Tags
As you may know, every HTML document is made up of <head> and <body> tags. The former sits right at the top, and it’s the section you’ll use to link to external libraries, include title and meta tags, and more.
You can also add hreflang tags to your website within its <head> sections. To do that, just open the HTML file for any page you want to add the tags to (i.e., any page that exists in more than one language on your site).
Once you open up the HTML document you want to edit, you’ll need to add tags to it using this format:
<link rel="alternate" href="http://yourwebsite.com/"
hreflang="en" />
<link rel="alternate" href="http://yourwebsite.com/de-at/"
hreflang=" de-at " />
As you can see, the first thing to do is set the ‘default’ language, which is English in our example. Then you’ll establish which alternate language versions users should be redirected to, depending on their regions.
Implementing hreflang tags using this method is simple. However, it can be a bit of work if you have a website with a lot of pages, since you’ll have to edit each one’s HTML. Adding a lot of hreflang tags can also have a minor impact on your loading times, although you should hardly notice it unless your site is poorly optimized.
2. Set Up hreflang HTTP Headers
This next approach also involves your HTML <head> tags. However, it enables you to set tags that target documents within your website, instead of full pages. For example, if you offer an e-book in PDF format on your website, you’ll want to make sure users can get the version that’s in their language.
You can do this by implementing hreflang tags using HTTP headers, which should look like this:
Link: <http://de.yourwebsite.com/ebook.pdf>;
rel="alternate"; hreflang="de",
<http://en.yourwebsite.com/ebook.pdf>;
rel="alternate"; hreflang="en",
In our example, we’re using a link to an e-book’s PDF. We’ve then set up hreflang tags to tell visitors’ browsers what version of the PDF to retrieve, depending on which language each person is browsing in.
3. Add Tags Through Your XML Sitemap
Sitemaps are files that you submit to search engines, which include data about your website’s structure. That information usually includes a list of all your site’s pages, so search engines don’t miss any of your content.
If you have a sitemap, it’s the perfect place to include your hreflang tags. To do so, you’ll need to use this specific format for each language:
<url>
<loc>http://www.yourwebsite.com/uk/</loc>
<xhtml:link rel="alternate" hreflang="en-gb"
</url>
The benefit of this approach is that it doesn’t increase the size of your site’s HTML files, unlike the first method we introduced. Of course, adding hreflang tags for a lot of pages can take a while. Still, it’s something you only need to do once, so the effort is well worth it.
Conclusion
Having a multilingual website can help you reach a wider audience. Moreover, you can make life easier for your visitors by directing them to the correct versions of your site automatically. To do that, you’ll need to use hreflang tags.
As we’ve shown, there are three main ways to implement hreflang tags on your website:
- Use <head> tags.
- Set up hreflang HTTP headers.
- Add tags through your XML sitemap.
Image credit: Pixabay.
