In the lifespan of every international website, comes the time where it is required to use the Alternate Tag. This tag allows a website owner to provide an indication that additional copies of pages, that are very similar in content to their current page, exist across the web, and search engine indexing is recommended. So, when does this happen and how do you integrate the Alternate Tag on your website? All the solutions in this article.
Adjusting page versions of a website to the local market
Sometimes, we want the search engine to redirect users to relevant pages, depending on where they are. This can happen in a large business that has a number of branches around the world, and where there are minor changes, especially in the language used on the specific page. In this case, the question that may be asked: Why not use the Canonical Tag for this purpose? Why not use 301 redirect?
Well, the Canonical Tag might not fit for this situation. A Canonical Tag signals the search engine that it is not required to index and manage the page that is not specified in the tag, and its main purpose is to avoid taking manual action for duplicate content.
301 redirect also can't match this case. 301 redirect will cause the user to reach a single page, while we want him to reach different pages, depending on the location, for example, where the user is browsing.
The Alternate Tag, then, is the solution that allows us, on the one hand, to preserve all relevant pages in the air, and on the other hand to explain to Google that it does not required to index each of the pages.
4 methods for setting the Alternate Tag
The Alternate Tag can be configured in several ways:
Set the tag in HTML
The Alternate Tag is set in the HTML of the website immediately after the Title Tag. In this configuration, all relevant alternate pages, including the current page, must be defined in the source code of each of the relevant pages. This is what this setting looks like, for example, on Google's support website:
<head>
<title>Widgets, Inc</title>
<link rel="alternate" hreflang="en-gb"
href="https://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us"
href="https://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en"
href="https://en.example.com/page.html" />
<link rel="alternate" hreflang="de"
href="https://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default"
href="https://www.example.com/" />
</head>
In this example, 5 pages were defined in different languages (4 pages in specific languages and 1 page by default).
The Hreflang Tag actually sets the Language Tag that changes from page to page.
Set the tag in the HTTP header
HTTP protocol is the protocol by which information is transmitted between the web server, on which the website is managed, and the client browser. The protocol works in a request and response configuration (the browser requests information and the server respond with the return code and via html code). The way to integrate the Alternate Tag into the return code of the HTTP header is by the Get response of the page. This is also good for cases where the page returned to the browser is not in HTML format – for example, if the user wants to view a page in PDF format.
Here is an example from Google's support website for returning a PDF file for three different languages: English, Swiss German and other German speakers:
Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
<https://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch",
<https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"
Set the tag in Sitemap
The website map file can also allow the website manager to notify Google of having multiple versions of the page in different languages. In order to define different addresses, you will need to use an arranged structure: Under each destined url, you must define a <loc> child-type element and a <xhtml> child-type element: link rel = "alternate" hreflang = "supported_language-code">.
Here's an example of how to set the Alternate Tag in a sitemap:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="https://www.w3.org/1999/xhtml">
<url>
<loc>https://www.example.com/english/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.com/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
<url>
<loc>https://www.example.com/deutsch/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.com/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
<url>
<loc>https://www.example.com/schweiz-deutsch/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.com/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
</urlset>
Define the tag using WordPress plugin
There are various extensions that can help you set up Alternate Tags on the website. One of these extensions is an extension called Polylang.
Set the tag for mobile website display
The Alternate Tag can also be used on non-responsive sites, where the site owner wants to present a customized and unique version for mobile that includes a different arrangement of the elements and even different content.
A few closing notes
By searching Google's support website for the implementation of Alternate Tags, you will find general guidelines that you should follow when integrating the tag in any of the methods listed. You can also find the various supported language codes in the Google Support website settings, the common errors that websites managers make (e.g. missing return links, or incorrectly written Language Tags).
In conclusion
Properly integrate Alternate Tags in an international website can allow you to notify search engines that it is useful to index a collection of pages with similar content, though it should be accessible to different users, mainly from different locations or for displaying pages on mobile, on non-responsive websites. This solution allows surfers to enjoy the page that is relevant to them when browsing the website, while enabling the existence of such pages in parallel.
