How to Use the Hreflang Tag for Multilingual Websites
By David on March 15, 2017 in Development
What is Hreflang?
If you have a website that serves content in many different languages, then you need to be aware of the hreflang (pronounced “herf-lang”) tag so that you can implement it properly. The hreflang tag is used by Google and other search engines to understand what content to serve to users in other countries that speak different languages.
For example, let’s say your main website serves English speaking customers but you want to now target users in other countries and have the webpage written in their native language. This is when the hreflang tag is crucial to use. The tag can ensure the correct language of the content will be served to the user. It also creates a more user-friendly experience that will satisfy your customers.
Options for Implementation
There are three different ways below to implement the hreflang tag, but we’ve found that sitemap method is a bit easier to implement than the others. We prefer this method because it keeps all of your hreflang tags separated in your XML sitemap and you don’t need to make edits to individual pages.
- HTML link element in header. In the HTML <head> section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
- <link rel=”alternate” hreflang=”es” href=”http://es.example.com/” />
- HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
- Link: <http://es.example.com/>; rel=”alternate”; hreflang=”es”
- To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
- Link: <http://es.example.com/>; rel=”alternate”; hreflang=”es”,<http://de.example.com/>; rel=”alternate”; hreflang=”de”
- Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
Putting the Hreflang Tag to Work
The first step to implementing the hreflang tag on your website is to figure out which pages search engines should know are multilingual. You will create a CSV spreadsheet using a common program like Excel or many others. The spreadsheet will be split into different columns depending on how many languages you are catering towards.
Once you have all of your pages mapped out in the CSV spreadsheet head on over to The Media Flow’s hreflang tool to create your XML sitemap.
Guide to Language and Country Codes
You may be asking yourself, how do I define the language or country code? Is there some type of guide? Well, yes, you are in luck. Wikipedia.org has provided web pages that define what language and country codes to use. It’s very important that you define both for hreflang to work properly.
[PRO TIP] Do not specify a country code by itself! Google does not automatically derive the language from the country code. You can specify a language code by itself if you want to simplify your tagging. Adding the country code after the language to restrict the page to a specific region. Examples:
- be: Belarusian language, independent of region (not Belgium French)
- nl-be: Dutch for Belgium
- fr-be: French for Belgium
Final Steps for Implementation
Now that you have figured out which of your web pages will be multilingual and you have all of your URLs defined in your spreadsheet, you will submit your CSV file to the hreflang tool.
The result will be an XML sitemap that indicates the alternative languages in which your content is written. Here is a great reference example from Google that showcases the XML format and how the hreflang tags should look when fully implemented. As you can see, the main URL is defined, but the various language and country codes to the different versions of the page are underneath.
The final step is to take your new XML sitemap and upload it to the server where your website is hosted. Make sure you have a Google Search Console account created for your website and that your XML sitemap is properly submitted, without errors. This ensures that Google will be more aware of any changes to your website.
[PRO TIP] Once your website and hreflang tags are indexed by Google, check back to the “International Targeting” section found under “Search Traffic” within Google’s Search Console to see if any errors are being reported because of the updates. If hreflang data is appearing with no errors then you have properly implemented the tags for your website!
In Summary
We hope this blog post has been informative and helpful for any webmasters that want to start serving content to different countries and languages. This handy tag does all of the grunt work to make sure that search engines understand what content to serve your visitors. It allows you to connect on a more personal level to your visitors and provide content that is in their native language. With businesses becoming increasingly global, this is a feature that cannot be overlooked.
Questions or Feedback?
We would love to hear your feedback if this blog post has helped you. Please feel free to let us know in the comments below.
If you need any assistance setting up hreflang tags for your website, we are here to help. Please feel free to contact us if you need assistance.
