This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Google recently introduced the new x-default hreflang annotation. Thanks to this markup, webmasters can specify international landing pages. Google will use this information to display the most relevant page in the search results.
A lot of international businesses use a landing page on their websites which redirects visitors to local pages. This can either be done via a redirect to a language-specific page or by changing the language of the content. By directing their customers to local pages, they can change their content to better suit the needs of these target groups.
There are plenty of examples of websites that have an international landing page: Apple, Tiffany & Co, Samsung, the list goes on. Most global brands have this sort of page.
Let’s say that a global online retailer is also active in the United States and the United Kingdom. When customers visit the website (retailer.com), they can choose a country. Customers from the US are redirected to retailer.com/en-us and visitors from the UK are redirected to retailer.com/en-gb.
- http://retailer.com - International landing page with a country selector.
- http://retailer.com/en-us - For customers from the United States.
- http://retailer.com/en-gb - For customers from the United Kingdom.
In a previous article we already learned that the
rel=”alternate” hreflang=”x” annotation can be used to identify alternative versions of the same content in a different language. So we’ll find the following code on the US page:
<link rel="alternate" hreflang="en-GB" href="http://retailer.com/en-gb" />
This is very useful for pages which target a certain region, but it can’t be used for international landing pages because they don't target a specific language. That’s where the new x-default hreflang attribute comes in handy. Now, for the landing page we can use the following code:
<link rel="alternate" hreflang="x-default" href="http://retailer.com/" />
This piece of code signals that the landing page doesn't target any specific language and is the default page when no other page is better suited.
How does Google use this information? If someone from the US or UK searches for the site, Google will show the corresponding page (http://retailer.com/en-us and http://retailer.com/en-gb respectively). But if someone from Germany or Canada searches for the site, Google will display the international landing page. These annotations ensure that visitors can reach the most relevant page.