Would you like to know how residents of different regions can find versions of the site’s pages in the search, designed specifically for them?
In this edition of the “SEO alphabet”, I will talk about the important tags for site markup – alternate, hreflang, media – and how to use them correctly in promotion .
Why do you even need these tags?
To help search engines understand which languages the site’s pages are translated into, which regions its sections are intended for, which pages have a mobile version.
All tags are placed in the site code, container <head></head> . However, there are nuances. More on them later.
Why do you need an alternate tag?
Thanks to a single <link rel=”alternate” /> tag, search engines can identify the language variants and the mobile version of the same site page — and show the right user the right alternative version of the current page.
Examples:
- definition of the language version of the site: <link rel=”alternate” hreflang=” kz ” href=”https:// kz .example.com/” />;
- defining the mobile version of the site: <link rel=”alternate” media=” only screen and (max-width: 640px) ” href=”https:// m .example.com/”>.
How to use the type attribute?
The rel=”alternate” tag in combination with the type attribute and a value other than “text/html” indicates to search engines an alternative version of the page in a different format. The most common values are:
- application/rss+xml – for RSS format;
- application/atom+xml – for Atom format;
- application/activitystream+json — for Activity Streams JSON format.
Example:
<link rel="alternate" type="application/rss+xml" href=".rss"
title="RSS feed for this page"/><link rel="alternate"
type="application/atom+xml" href=".atom"
title="Atom feed for this page"/><link rel="alternate"
type="application/activitystream+json" href=".as"
title="Activity Streams JSON feed for this page"/>Why do you need the hreflang tag?
The tag indicates to searchers that there are two identical pages on the site, but in different languages or for different regions. Hreflang prevents pages from sticking together during the indexing process and is most often used when:
- Content on regional sites/directories/subdomains is partially or completely identical. For example, sites target different regions, but they have the same language (Great Britain, USA, Australia).
- Specialists translated only the site template, while the content is mainly generated by users. Content in multiple languages on the same URL should be avoided.
- The content on the different language versions of the site is completely translated into another language, for example, there are versions of the page, both in English and in Spanish.
- The site is partially translated and only needs to be shown to users who speak a certain language and/or from a certain region.
However, the hreflang tag does not provide a 100% guarantee that search engines will not mark pages with content in the same language as duplicates. Therefore, I recommend filling the pages with unique content if you break them into one language for different regions.
In the tags, you can specify the language and regional version of the site at the same time. For this, you need to use the following format:
<link rel=”alternate” hreflang="xx-YY" href="URL" />- xx — language (mandatory) according to ISO 639-1 ;
- YY — region (optional) according to ISO 3166-1 Alpha 2 ;
- URL – the absolute URL of the alternate page.
How to enter the hreflang tag correctly?
1. It is important to remember the need to link pages. If an alternative Russian version is specified for the Ukrainian version, then the Ukrainian version must also be indicated on the Russian version, otherwise the markup will not be valid. You must also provide a link to the version of each page.
For example, for the page https://domain.com/page1:
<link rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/page1" /><link rel="alternate" hreflang="es"
href="https://domain.es/page1" /><link rel="alternate" hreflang="x-default"
href="https://domain.net/page1" /><link rel="alternate" hreflang="en"
href="https://domain.com/page1" />2. The link should point to a similar page of an alternative version of the site. The main page is often indicated as an alternative to an internal page, for example, articles, catalogs, product cards. This is a mistake.
3. The case of characters when specifying the region is not important (at least for Google), but it is better to follow the standards: indicate the language in lower case, and the region in upper case.
4. hreflang attributes can be used in any site structure (different domains, subdomains or directories).
5. Hreflang should be used regardless of the settings in Google Search Console.
There are three ways to implement the hreflang tag: HTML tags, XML maps, and HTTP headers.
Suppose we have sites:
- https://domain.com/ — for English-speaking users in any region.
- https://domain.co.uk/ — for English-speaking users from Britain.
- https://domain.es/ — for Spanish-speaking users.
- https://domain.net/ — for all other users.
We implement hreflang using HTML tags
On pages that have an alternative version in a different language and/or for a different region, you must link to the alternative versions.
For the main pages of the sites, you need to place the codes in the <head></head> container.
For https://domain.com/ :
<link rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/" /><link rel="alternate"
hreflang="es" href="https://domain.es/"
/><link rel="alternate" hreflang="x-default"
href="https://domain.net/" /><link rel="alternate"
hreflang="en" href="https://domain.com/" />For https://domain.co.uk/ :
<link rel="alternate" hreflang="en"
href="https://domain.com/" /><link rel="alternate"
hreflang="es" href="https://domain.es/"
/><link rel="alternate" hreflang="x-default"
href="https://domain.net/" /><link rel="alternate"
hreflang="en-GB" href="https://domain.co.uk/" />For https://domain.es/ :
<link rel="alternate" hreflang="en"
href="https://domain.com/" /><link rel="alternate"
hreflang="en-GB" href="https://domain.co.uk/"
/><link rel="alternate" hreflang="x-default"
href="https://domain.net/" /><link rel="alternate"
hreflang="es" href="https://domain.es/" />For https://domain.net/ :
<link rel="alternate" hreflang="en"
href="https://domain.com/" /><link rel="alternate"
hreflang="en-GB" href="https://domain.co.uk/"
/><link rel="alternate" hreflang="es"
href="https://domain.es/" /><link rel="alternate"
hreflang="x-default" href="https://domain.net/" />The order in which the tags are placed inside the container is not important.
We implement hreflang using an XML card
This is the preferred method, especially if there are a large number of alternative page options.
You need to add an xhtml:link-element to the map for each of the pages with an alternative option. These tags must point to alternate addresses, including the current one. Inside the <url> element, you should specify an xhtml:link-element with links to alternative versions of the pages.
For https://domain.com/ :
<?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://domain.com/</loc><xhtml:link rel="alternate"
hreflang="en-GB" href="https://domain.co.uk/"
/><xhtml:link rel="alternate" hreflang="es"
href="https://domain.es/" /><xhtml:link rel="alternate"
hreflang="x-default" href="https://domain.net/"
/><xhtml:link rel="alternate" hreflang="en"
href="https://domain.com/" /></url>...</urlset>For https://domain.co.uk/ :
<?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://domain.co.uk/</loc><xhtml:link rel="alternate"
hreflang="en" href="https://domain.com/" />
<xhtml:link rel="alternate" hreflang="es"
href="https://domain.es/" /><xhtml:link rel="alternate"
hreflang="x-default" href="https://domain.net/"
/><xhtml:link rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/" /></url>...</urlset>For https://domain.es/:
<?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://domain.es/</loc><xhtml:link
rel="alternate" hreflang="en" href="https://domain.com/"
/><xhtml:link rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/" /><xhtml:link
rel="alternate" hreflang="x-default"
href="https://domain.net/"
/><xhtml:link rel="alternate" hreflang="es"
href="https://domain.es/" /></url>...</urlset>For https://domain.net/ :
<?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://domain.net/</loc><xhtml:link rel="alternate"
hreflang="en" href="https://domain.com/" /><xhtml:link
rel="alternate" hreflang="en-GB" href="https://domain.co.uk/"
/><xhtml:link rel="alternate" hreflang="es"
href="https://domain.es/"
/><xhtml:link rel="alternate" hreflang="x-default"
href="https://domain.net/" /></url>...</urlset>We implement hreflang using HTTP headers
This method can be used for pages that are not HTML documents, but for example PDF files:
Link: <https://domain.com/document.pdf/>;
rel="alternate"; hreflang="en"Link:
<https://domain.co.uk/document.pdf/>;
rel="alternate"; hreflang="en-GB"Link:
<https://domain.es/document.pdf/>; rel="alternate";
hreflang="es"Link: <https://domain.net/document.pdf/>;
rel="alternate"; hreflang="x-default"Also read Google’s recommendations for using the hreflang attribute.
How to use the media tag?
When optimizing pages for mobile phones and tablets, the following are most often used:
- creating an adaptive version of the site;
- dynamic display;
- creating a mobile version of the site.
When using the first two methods, the URL remains identical for the desktop and mobile versions of the page. When using the mobile version of the site, different pages are created for different versions of the screens, which causes duplication of information from different URLs.
To avoid excluding such duplicate pages from search results, you must use the media attribute. As in the case of hreflang, the use of the attribute is a recommendation of search engines and does not guarantee the presence in the output of two versions of the same page.
How to properly introduce the media tag?
Suppose that the desktop version of the website page is available at https://domain.com/page , and the mobile version is available at https://m.domain.com/page .
In this case, a pointer to the mobile version of the site must be placed on https://domain.com/page :
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.domain.com/page">On the mobile version of the page, that is, on https://m.domain.com/page , you should place the code:
<link rel="canonical" href="https://domain.com/page">Read also Google’s additional recommendations for implementing the media attribute.
Conclusions
- A single <link rel=”alternate” /> tag is required to specify language variants and a mobile version of the same site page.
- When used in combination with the type attribute and a value other than “text/html”, rel=”alternate” indicates an alternative version of the page in a different format.
- The hreflang tag indicates the presence of two identical pages, but in different languages or for different regions. Hreflang prevents pages from sticking together and is most often used in the body of pages. There are three ways to implement the hreflang tag: HTML tags, XML maps, and HTTP headers.
- To avoid excluding duplicate pages from search results , you need to implement the media tag. As in the case of hreflang, the use of the tag is a recommendation of search engines and does not give a 100% guarantee that duplicate pages will appear in the output.
