Introduction to the Link relation Attribute
In order to satisfy the search intent of the user, it is vital for Google to understand the various relationships between pages on a website and on the internet. Once such tool that is used to explicitly tell search engines about these relationships is the rel=” alternate” tag implemented as
<link rel=”value”> .
However, link-related attributes have been used for many other purposes for over a decade, including loading a CSS stylesheet, favicon, and displaying a printable version of the page.
In this blog, we will be talking about the rel=” alternate” tag and its application in search engine optimization.
Exploring the rel=”alternate” hreflang
The rel=”alternate” hreflang=”x” attribute, hreflang attribute is used to indicate to search engine the desired audience for which the page is intended. It is one of the most important steps while optimizing your site for International SEO. This can be solely based on language (e.g. “English”), or a combination of language and geographical location (e.g. “English in Canada”).
What does it look like?
Here’s an example defining two alternate versions of the same page for the United States and Spain.
Benefits of the rel=”alternate” hreflang tag
- It allows you to present separate language variations of a page to specific audience demographics.
- It also allows you to present different versions of a page to a specific audience based on your preferred targeting.
- By indicating to Search Engines that they are different versions of the same page, they provide the added benefit of resolving duplicate content issues.
Using rel=”alternate” hreflang=”x”
Simply put, the best use of this specifier is when the same website has the same content in different languages.
So let’s say you have an English website at http://www.example.com
You also have a Japanese version of that webpage at http://www.example.com/ja/
Google has developed three ways to show that a Japanese URL is Japanese, which is the equivalent of an English page.
HTML Link Element
<link rel=”alternate” hreflang=”es” href=”http://es.example.com/” />
HTTP Header
If you have non-HTML content on your web pages, a good example is a PDF file, you can use rel=”canonical” HTTP headers to indicate the canonical URL for HTML documents.
Link: <http://es.example.com/>; rel=”alternate”; hreflang=”es”
Sitemap
Instead of using markup, you can submit a language specific version via a sitemap.
<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
<loc>http://www.example.com/english/</loc>
<xhtml:link
rel=”alternate”
hreflang=”de”
href=”http://www.example.com/deutsch/”
/>
<xhtml:link
rel=”alternate”
hreflang=”de-ch”
href=”http://www.example.com/schweiz-deutsch/”
/>
For each supported language to identify all language variants, including itself, rel=”alternate” hreflang=”x” must be set.
Regarding regional content: defining content for a certain language and a particular region can be quite difficult,
For example, a website that serves the U.S., Germany, and Japan could very well have the following regional variations:
- http://www.example.com/en/page (Generic English version of content – language-specific; English)
- http://www.example.com/en-gb/page (English language, displays prices in pounds, example of regional specific content)
- http://www.example.com/en-us/page (English language displays prices in U.S. dollars, example of regional specific content)
- http://www.example.com/ja/page (Japanese version of the content)
Markup
This is what the actual tag markup should look like:
<link rel=”alternate” hreflang=”en”
href=”http://www.example.com/en/page” />
<link rel=”alternate” hreflang=”en-us”
href=”http://www.example.com/en-us/page” />
<link rel=”alternate” hreflang=”ja”
href=”http://www.example.com/ja/page” />
You need to update the HTML for each URL in the set of alternates. The markup above tells Google to consider all of these pages as alternate versions of one another.
Supported Values
There are specific values for both languages and regions, which fall into the ISO 6391-1 format for languages and the ISO 3166-1 format for regions.
Make sure you use the proper syntax for both countries and regions to ensure the proper functionality of your rel=“alternate” tags.
Defining Mobile Versions of Desktop Websites using the rel=” alternate” media tag
The rel=” alternate” media attribute is used to differentiate and relate desktop and mobile pages. It indicates to the search engines when to show the mobile page and when to show the desktop version.
This tag is only important when you have separate mobile and desktop websites.
What does it look like?
Here’s an example of how the tag works to define a mobile website and sets the condition when to show it.
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.com/”>
Benefits of using the Mobile Attribute
- Helps to differentiate the website based on its intended device.
- Helps to prevent duplicate content issues.
Final Thoughts
There are many SEO benefits to the rel=” alternate” tag. To summarise, it mainly helps in resolving the various relationships between different web pages, and hence helps search engines create semantic relationships between similar web pages.
In this way, it can show the right type of content to the right user, hence enhancing the user experience.
