Entity Tracking: 1. rel attribute -> An HTML attribute that defines the relationship between a linked resource and the current document. 2. rel="alternate" -> A specific value of the rel attribute indicating that the linked resource is an alternative version of the current page. 3. hreflang -> An attribute used alongside rel="alternate" to specify the language and geographical region of an alternative page. 4. x-default -> A reserved value for hreflang used to identify a fallback page for users whose language settings do not match any specific localized versions. 5. ISO 639-1 -> The standardized format used to define language codes in hreflang tags. 6. ISO 3166-1 Alpha 2 -> The standardized format used to define region codes in hreflang tags. 7. Canonical -> A rel attribute value that identifies the preferred URL for a document to prevent duplicate content issues.
The rel="alternate" attribute identifies alternative versions of a current document. It tells search engines and browsers that a different URL contains the same essential content but in a different format, language, or for a different device. Using this attribute helps prevent duplicate content issues and ensures users reach the most appropriate version of a page.
What is the Rel Alternate Attribute?
The rel="alternate" attribute is a specific link relation used in HTML code. While the rel attribute itself defines the relationship between a link and a document, the "alternate" value specifically signals that the target is a substitute representation.
According to web standards, this attribute is valid on <link>, <a>, and <area> elements. When machines or search engine spiders crawl a page, they use these tokens to understand the semantic connection between different URLs. The attribute has no default value; if it is missing, the browser treats the link as a standard hyperlink without a specific relationship.
Why Rel Alternate Attribute matters
Implementing this attribute correctly provides several benefits for site performance and user experience:
- Identifies Localized Content. It signals to search engines which pages are translated or targeted to specific regions so they can serve the right version to the right audience.
- Reduces Duplicate Content Risk. By grouping similar pages together as "alternates," it prevents them from competing against each other in search results.
- Improves Device-Specific Experience. It allows you to point mobile users to a dedicated mobile site if you do not use responsive design.
- Supports Multiple Formats. It identifies non-HTML versions of content, such as PDF downloads or RSS and Atom syndication feeds.
- Assists Browser Rendering. It can be used to provide alternate stylesheets, such as high-contrast versions for accessibility.
How Rel Alternate Attribute works
The attribute works by providing metadata about a link. Its meaning changes based on the other attributes provided alongside it.
- For Translations: It is paired with
hreflang. The browser looks at the language code to decide if it should offer a translation or if a search engine should surface that URL for a specific user. - For Mobile Sites: It is paired with the
mediaattribute. This specifies the screen size or device type intended for that specific URL. Only Google and Yandex support the use of the mobile attribute for this purpose. - For Digital Feeds: It is paired with the
typeattribute (likeapplication/rss+xml) to help browsers discover site feeds. - For Different Formats: It uses the
typeattribute to signal if the alternate version is a PDF or other file type.
Implementation Methods
There are three main ways to communicate alternate versions to search engines. Each is considered equivalent, but you should choose one and stick to it for consistency.
HTML Tags
You place <link rel="alternate"> tags in the <head> section of your HTML. This is the most common method for language and regional variants.
HTTP Headers
You can return a "Link" header with your GET response. This is particularly useful for non-HTML files like PDFs where you cannot place tags in a header section.
XML Sitemaps
You can list every language or locale variant in your sitemap using the xhtml:link child element. This keeps the HTML code cleaner but makes the sitemap file much larger.
Best practices
Use fully qualified URLs. Always include the transport method (http or https). Never use relative paths like /page or protocol-relative links like //example.com.
Enable bidirectional linking. If Page A points to Page B as its alternate, Page B must point back to Page A. If these links do not point to each other, search engines may ignore the tags.
Provide a catchall with x-default. include a fallback page for users whose language settings do not match any of your specific localized versions. This is typically used for country selectors or auto-redirecting homepages.
Use correct codes. For localized versions, use ISO 639-1 for language and ISO 3166-1 Alpha 2 for regions. Using incorrect codes like "UK" instead of "GB" will cause the tags to be ignored.
Common mistakes
Mistake: Using regional codes alone. Fix: You must always include a language code. A region code by itself is not valid in an hreflang attribute.
Mistake: Combining multiple attributes in one tag incorrectly.
Fix: Do not combine hreflang annotations with other attributes like "media" in a single <link> tag. Use separate tags for separate functions.
Mistake: Forgetting the self-referential link. Fix: The list of alternate links on a page must always include a link to the page itself.
Mistake: Using non-standard icon values.
Fix: While rel="icon" is standard for favicons, Apple iOS uses the non-standard apple-touch-icon value instead.
Examples
Language and Region Variation
In this scenario, a site has three versions: generic English, English for the UK, and German. Every page would include these three tags:
<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/" />
Alternate Format (PDF)
To signal that a document is available as a PDF for a French-speaking audience:
<link rel="alternate" type="application/pdf" hreflang="fr" href="https://example.com/french-guide.pdf" />
Separate Mobile URL
If a site uses a dedicated "m.example.com" subdomain:
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page">
Rel Alternate vs Rel Canonical
| Feature | Rel Alternate | Rel Canonical |
|---|---|---|
| Goal | To show there are other versions. | To show which version is the official "master." |
| When to use | When content is translated or formatted differently. | When content is identical or very similar on different URLs. |
| Search Engine Action | Serves the specific version that matches the user. | Consolidates ranking signals to the master URL. |
| Required Input | Rel="alternate" + hreflang/media/type. | Rel="canonical" + href. |
Rule of Thumb: Use rel="alternate" to tell the search engine "Serve this version to this specific user" and rel="canonical" to say "This is the original version, please index it."
FAQ
Do I need rel="alternate" if I have a responsive website?
If your website automatically adjusts its layout for mobile and desktop on the same URL, you do not need to use the rel="alternate" media tag. This is only necessary for sites that use separate URLs for mobile and desktop versions.
Can I use alternate tags for different domains?
Yes. Your alternate URLs do not need to be on the same domain. For example, your English site could be on .com while your German site is on .de.
What is the x-default code for?
The x-default value is used to specify a page that is not targeted at any specific language or region. It is most commonly used for landing pages where users can select their preferred language or for homepages that automatically redirect users.
How many alternate links can I have on one page?
There is no hard limit, but every language version must list itself and every other version. If you have 20 languages, every one of those 20 pages must contain 20 rel="alternate" tags.
Does Google use the HTML lang attribute for language detection?
No. Google uses its own algorithms to determine the language of a page. It uses hreflang to understand the relationship between localized versions, but it does not rely on the lang attribute in the HTML tag to decide what language is on the page.
