Working With Document Alternates
There are circumstances in which we may want to provide our website users alternate versions of the same content. These cases usually fall into one of the following categories -
- Providing themed versions of a website with alternate stylesheets
- Providing versions of the website in different languages
- Serving a syndication feed for use by rss readers
- Providing the content of the page in alternate media formats
In most of these cases, the alternate value of link tag is used.
The alternate value tells the user agent or web crawler that the linked page or document has essentially the same content as the main page, but with some peripheral difference.
The alternate value should be distinguished from the
canonical value, which specifies which page is the "preferred" version. This is relevant when you may have the exact same content on more than one page.
Alternate Stylesheets #
One way the alternate link tag can be used is to provide alternate stylesheets for a page. This allows us to, for example, provide a light or dark alternative theme for the website.
<link rel="stylesheet" href="main.css" title="Light Theme">
<link rel="alternate stylesheet" href="dark.css" title="Dark Theme">
Pairing the alternate value with the stylesheet value is not like just adding another stylesheet. The stylesheet marked as alternate is not actually loaded until it is called by some external factor. For example, in Firefox, users are given the option to choose a stylesheet in the settings (View > Page Style). In other browsers, this option is non existent.
By just writing this -
<button onclick="setActiveStyleSheet('Light Theme')">Light Theme</button>
<button onclick="setActiveStyleSheet('Dark Theme')">Dark Theme</button>
Although this is not something that is very widely used, especially for regular websites, it does make for an interesting design if used properly.
Alternate Stylesheets dependent on Media #
If we want to provide different stylesheets dependent on the media type or screen size, the
rel="alternate" value should not be used. As mentioned above, this will cause the alternate stylesheet to not be loaded at all.
Instead, we only need to define the media attribute, and let the browser determine which stylesheet should be used.
<link rel="stylesheet" href="screen.css" media="screen">
<!-- For smaller devices -->
<link rel="stylesheet" href="screen-small.css" media="only screen and (max-device-width: 480px)">
<!-- For print -->
<link rel="stylesheet" href="print.css" media="print">
This way, all stylesheets are loaded, but which stylesheet is active will be dependent on the relevant media.
Alternate Languages #
It is becoming more common to have several versions of a site translated in different languages. Even with tools like Google translate, it is more accurate to provide a self-translated version. So, for example, you might have
https://example.com as the main version of the site in your native language and
https://example.com/fr for a version of the same website translated in French.
To specify what different language versions of a site are available, we use the
hreflang attribute paired with
<link rel="alternate" href="https://example.com/fr" hreflang="fr" />
The hreflang attribute must be set to a valid BCP 47 language tag, optionally suffixed with a region code and/or script variation. For example -
|de||German language, no specified region|
|de-es||German language, users in Spain|
|de-fr-latn||German language, users in France, Latin script|
|fr-be||French language, users in Belgium|
|zh-Hant||Chinese language, traditional script|
|zh-Hans||Chinese language, simplified script|
|en-gb||English language, users in Great Britain|
|x-default||Used if there are multiple languages on the same page|
The purpose of the tag is not necessarily to tell the browser what language the page is in. In fact, browsers are not supposed to consider it authoritative. What it is useful for is in search results. Google uses it to serve the correct regional URL in search results based on where the user is searching from.
However, you should be careful not to go to specific. The W3C recomends that the script subtags should only be used to distinguish varieties of a language that would normally vary.
Syndication Feed #
The rss/atom feed is essentially the same content of the site written in a format that can be read by syndication readers. Therefore, the alternate value is used to link to the document.
<!-- RSS Feed -->
<link rel="alternate" type="application/rss+xml" href="path/to/rss">
<!-- Atom Feed -->
<link rel="alternate" type="application/atom+xml" href="path/to/data.xml">
Alternate Format #
If a page on the site is also provided in another format, the alternate link tag can be used. The format of the document, in a valid MIME type, must also be provided. For example, if the content of a page is also available in PDF, we could write -
<link rel="alternate" type="application/pdf" href="path/to/application.pdf" title="PDF Version">