Read on to find out what hreflang is and how you can use it for international SEO.<\/p>\n
What is hreflang?<\/h3>\n
The hreflang tag (also referred to as rel=\u201dalternate\u201d hreflang=\u201dx\u201d) helps you to tell Google which version of your website should be shown in which country. In other words, when you use this tag on your site you\u2019re basically telling Google which language you\u2019re using on a specific page so the search engine knows to serve that result to users searching in that specific language.<\/p>\n
This creates a better user experience as it ensures that the correct language version of your site is shown to the right users in the correct country.<\/p>\n
Here\u2019s how\u00a0Pierre Far<\/a>, Webmaster Trends Analyst at Google UK, explains it:<\/p>\n \u201cThe idea of rel-alternate-hreflang is to help you signal to our algorithms that although these two pages have substantially the same content, the\u00a0small differences between them are still important.<\/strong> Specifically, the small differences are relevant for users of a specific language (and in a country).\u201d<\/em><\/p>\n Extra resources:<\/p>\n There are many situations when you can use hreflang so let\u2019s take a look some of them:<\/p>\n 1. Same language, different parts of the world<\/strong><\/p>\n You can use hreflang to target variants of a single language and indicate which region the content should be localised to.<\/p>\n For example, a site in the US refers to football as \u201csoccer\u201d while in the UK it\u2019s called \u201cfootball\u201d. When you implement hreflang, Google will know which version of the site to deliver to US-based users so they see content that’s relevant to them.<\/p>\n So you could have the following versions of your site:<\/p>\n This is useful as it allows you to geo-target users as well as control variations in shipping, currency, seasonality and more.<\/p>\n 2. Different languages<\/strong><\/p>\n You may want to target users who speak different languages, so again you would have different versions of the site each using a different language:<\/p>\n 3. Combined<\/p>\n Alternatively, you may want to target your site based on both location and language, as per the examples below:<\/p>\n You can use hreflang on your existing website, either by creating a subdirectory or a subdomain on your current domain, or you could get a country-code top-level domain name (ccTLD) like .it or .fr.<\/p>\n Let\u2019s take a closer look at these three options:<\/p>\n 1. Same site \u2013 language folders<\/strong><\/p>\n Use it on a subdirectory on your current domain, as follows:<\/p>\n 2. Same site \u2013 subdomains<\/strong><\/p>\n You can also use hreflang on subdomains:<\/p>\n 3. Different sites<\/strong><\/p>\n Or you could get an entirely new top-level domain that\u2019s dedicated to users from specific countries or who speak a specific language:<\/p>\n The TLD doesn\u2019t necessarily have to describe the language which will be used as the hreflang for that site. \u00a0For example, example.de can have de-ch as the main language.<\/p>\n Generating the hreflang code is much easier thanks to tools like this Hreflang Generator. All you need to do is add the countries and language you want the snippet of code to be used for as well as the site and it then generates the code for you.<\/p>\n In the example below, you can see how the generator has produced the HTML code for the main UK version of the site, a German language German subdirectory, an English language Canadian subdirectory and a French language Canadian subdirectory:<\/p>\n If you want to validate the hrelflangs you\u2019ve implemented, you can use this flang tool<\/a>.<\/p>\n It\u2019s very easy to use: simply enter the URL and check to see that everything was implemented correctly.<\/p>\n <\/p>\n You can use x-default to show that the page is not specifically targeted. This basically tells Google that this is the default version of the site that should be displayed for users who don\u2019t correspond to any of the languages.<\/p>\n This is how the code looks:<\/p>\n For more information on x-default hreflang, check out the official blog post from Google<\/a>.<\/p>\n Now that you have found the correct hreflang code for each of the versions of the site, the next step is to implement the code on the site correctly. This can be done in three different ways:<\/p>\n <\/p>\n 1. The head element on a webpage<\/strong><\/p>\n Let\u2019s assume that you have content in British English and you\u2019ve created two separate pages to also target Spanish-speaking users and English-speaking users from Australia.<\/p>\n Here are the hreflang links that you\u2019ll need to add to the head sections of the three pages:<\/p>\n These tags need to be present on all four pages that have the same subject or product but are in different languages, language variations or have a different currency.<\/p>\n <\/p>\n 2. Sitemap<\/strong><\/p>\n This is an easier method to implement hreflang as it avoids the extra lines in the code within your pages, especially if you want to target more than three languages.<\/p>\n Let\u2019s take an example. Imagine you have a page in English targeted at English speakers worldwide. You also have a page targeted at Spanish speakers worldwide and one at Italian speakers located in Switzerland.<\/p>\n Your set of URLs is:<\/p>\n The following sitemap tells Google that the\u00a0www.example.com\/en\/ page has equivalent pages targeting worldwide Spanish-speaking users\u00a0(https:\/\/www.example.com\/es) and Switzerland (https:\/\/www.example.com\/it-ch\/).<\/p>\n You can also use a tool like the Hreflang tool for XML Sitemaps<\/a> to import your XML sitemap and easily create a hreflang version of the sitemap.<\/p>\n <\/p>\n 3. HTTP header<\/strong><\/p>\n A third way to implement the hreflang tag is to add it in the HTTP header. This is used when pages aren\u2019t in HTML (e.g. PDF files or other media objects). Google gives an example of how to do here.<\/p>\n Here is an example of a link targeting Spanish-speaking users:<\/p>\n Extra tip<\/strong><\/em><\/p>\n Make sure that the language declaration of your site coincides with the language used in the hreflang tags.<\/p>\n If your site is currently declared as <html lang=”en”> but you\u2019re adding a hreflang=\u201den-gb\u201d then you should also change the HTML declaration to en-gb.<\/p>\n Make sure you use your Google Webmaster Tools (GWT) account to verify that you\u2019ve implemented the tags correctly. To do that, go to your GWT account: Search Traffic > International Targeting:<\/p>\n This is where you’ll see if there are any issues with your hreflang tags such as: missing return links or incorrect hreflang values. Find out more about these issues and how to troubleshoot them<\/a>.<\/p>\n The Country tab allows you to set a country as the main target of your website. So even if you have various languages and are targeting various countries, you can still choose your primary market. Let\u2019s use an example from earlier: you have a page for users in the UK and another one with slight language variations for Australian users. You also a page that\u2019s translated into Spanish which is dedicated to Spanish-speaking users.<\/p>\n This is the code that you\u2019ve added to all three pages:<\/p>\n <\/p>\n So which pages will your users see depending on where they\u2019re located?<\/p>\n <\/p>\n <\/p>\n Got a question about implementing hreflang on your site? Let us know in a comment below.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" If you want to expand your business internationally or if you notice that your site is receiving a significant amount of traffic from countries other than the one in which you're based, it’s time to implement an international version of your site. Read on to find out how.<\/p>\n","protected":false},"author":2,"featured_media":998,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":{"0":"post-7958","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-search-engine-tips"},"yoast_head":"\n\n
When should you use hreflang?<\/h3>\n
\n
\n
\n
Ways to use hreflang<\/h3>\n
\n
\n
\n
How to generate the hreflang code<\/h3>\n
<link rel=\"alternate\" href=\"https:\/\/www.mysite.com\/\" hreflang=\"en-gb\" \/>\n\n<link rel=\"alternate\" href=\"https:\/\/www.mysite.com\/de\" hreflang=\"de-de\" \/>\n\n<link rel=\"alternate\" href=\"https:\/\/www.mysite.com\/ca\" hreflang=\"en-ca\" \/>\n\n<link rel=\"alternate\" href=\"https:\/\/www.mysite.com\/ca-fr\" hreflang=\"fr-ca\" \/><\/pre>\n
![\"\"](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/flang.png\")
<\/p>\nGeneral targeting with x-default<\/h3>\n
<link rel=\"alternate\" href=\"https:\/\/example.com\/\" hreflang=\"x-default\" \/><\/pre>\n
Where to add the code<\/h3>\n
<link rel=\"alternate\" href=\"https:\/\/example.com\/\" hreflang=\"x-default\" \/> - This is your main UK page that you will use as the default result in search engines when the user is not a Spanish or Australian English speaker.<\/pre>\n
<link rel=\"alternate\" hreflang=\"en\" href=\"https:\/\/www.example.com\/\"\/> - This is your main UK page but you tell search engines to show it to UK English speakers only.<\/pre>\n
<link rel=\"alternate\" hreflang=\"es\" href=\"https:\/\/www.example.com\/es\/\"\/> - This is your Spanish page for Spanish users only.<\/pre>\n
<link rel=\"alternate\" hreflang=\"en-au\" href=\"https:\/\/www.example.com\/au\/\"\/> - This is your Australian English page that will be shown to Australian users only.<\/pre>\n
\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\n<urlset xmlns=\"https:\/\/www.sitemaps.org\/schemas\/sitemap\/0.9\"\n\n xmlns:xhtml=\"https:\/\/www.w3.org\/1999\/xhtml\">\n\n <url>\n\n <loc>https:\/\/www.example.com\/en\/<\/loc>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"es\"\n\n href=\"https:\/\/www.example.com\/es\/\"\n\n \/>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"it-ch\"\n\n href=\"https:\/\/www.example.com\/it-ch\/\"\n\n \/>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"en\"\n\n href=\"https:\/\/www.example.com\/english\/\"\n\n \/>\n\n <\/url>\n\n\n <url>\n\n <loc>https:\/\/www.example.com\/es\/<\/loc>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"en\"\n\n href=\"https:\/\/www.example.com\/english\/\"\n\n \/>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"it-ch\"\n\n href=\"https:\/\/www.example.com\/it-ch\/\"\n\n \/>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"es\"\n\n href=\"https:\/\/www.example.com\/es\/\"\n\n \/>\n\n <\/url>\n\n\n <url>\n\n <loc>https:\/\/www.example.com\/it-ch\/<\/loc>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"es\"\n\n href=\"https:\/\/www.example.com\/es\/\"\n\n \/>\n\n <xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"en\"\n\n href=\"https:\/\/www.example.com\/en\/\"\n\n \/>\n\n<xhtml:link\n\n rel=\"alternate\"\n\n hreflang=\"it-ch\"\n\n href=\"https:\/\/www.example.com\/it-ch\/\"\n\n \/>\n\n <\/url>\n\n\n<\/urlset><\/pre>\n
<https:\/\/es.example.com\/>; rel=\u201dalternate\u201d; hreflang=\u201des\u201d<\/pre>\n
![\"\"](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/advanced-seo.png\")
<\/p>\n
\n![\"\"](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/advanced-seo2.png\")
<\/p>\nHow does hreflang work in search engines?<\/h3>\n
<link rel=\"alternate\" href=\"https:\/\/example.com\/\" hreflang=\"x-default\" \/>\n\n<link rel=\"alternate\" hreflang=\"en\" href=\"https:\/\/www.example.com\/\"\/>\n\n<link rel=\"alternate\" hreflang=\"es\" href=\"https:\/\/www.example.com\/es\/\"\/>\n\n<link rel=\"alternate\" hreflang=\"en-au\" href=\"https:\/\/www.example.com\/au\/\"\/><\/pre>\n
\n
Extra resources<\/h3>\n
\n
\n