What is <LINK rel="alternate" type="text/html" href=""> doing?

Learn what is doing? with practical examples, diagrams, and best practices. Covers html development techniques with visual explanations.
Tags:
Categories:

Understanding the <LINK rel="alternate" type="text/html" href=""> Tag

Hero image for What is <LINK rel="alternate" type="text/html" href=""> doing?

Explore the purpose and usage of the <LINK rel="alternate" type="text/html" href=""> tag in HTML, its role in SEO, and how it helps define alternative versions of a document.

The <link> tag in HTML is a powerful element used to define the relationship between the current document and an external resource. While it's commonly associated with stylesheets (rel="stylesheet") or favicons (rel="icon"), its rel="alternate" attribute, combined with type="text/html" and an href attribute, serves a very specific and important purpose: indicating alternative versions of the current document. This is particularly crucial for internationalization (i18n) and search engine optimization (SEO).

What rel="alternate" type="text/html" href="" Signifies

When you encounter a <link> tag with rel="alternate" type="text/html" href="", it tells browsers and search engines that the linked URL (href attribute) points to an alternative version of the current HTML document. This alternative version is also an HTML document, as specified by type="text/html".

The most common use case for this specific combination is to signal different language versions of a page, often in conjunction with the hreflang attribute. However, it can also be used for other types of alternate versions, such as a print-friendly page, a mobile-specific version (though less common now with responsive design), or even a different content format like a PDF (though the type would change then).

flowchart TD
    A[Current HTML Page] --> B{"Has Alternate Versions?"}
    B -- Yes --> C[<link rel="alternate" type="text/html" href="...">]
    C --> D[Browser/Search Engine]
    D --> E[Identifies Alternate HTML Page]
    E --> F{Uses for SEO/User Experience}
    F --> G[Language Targeting (hreflang)]
    F --> H[Content Syndication]
    F --> I[Print-friendly Version]
    B -- No --> J[No Alternate Link Found]

Flowchart illustrating the role of <link rel="alternate" type="text/html" href="">

Key Attributes and Their Roles

To fully understand this tag, it's essential to break down its attributes:

  • rel="alternate": This attribute defines the relationship of the linked document to the current document. alternate specifically means that the linked document is an alternative version of the current one.

  • type="text/html": This specifies the MIME type of the linked resource. In this case, it explicitly states that the alternative resource is another HTML document. This is important because rel="alternate" can also be used for other types, like RSS feeds (type="application/rss+xml").

  • href="[URL]": This attribute provides the URL of the alternative document. This is where the browser or search engine will find the alternative version.

  • hreflang="[language_code]" (Optional, but crucial for i18n): When dealing with language alternatives, this attribute is vital. It specifies the language of the linked document using ISO 639-1 language codes (e.g., en, fr, de) and optionally ISO 3166-1 Alpha 2 country codes (e.g., en-US, en-GB). This tells search engines which language and optional region the alternate page is intended for.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My English Page</title>
    <link rel="alternate" type="text/html" href="https://example.com/fr/my-french-page.html" hreflang="fr">
    <link rel="alternate" type="text/html" href="https://example.com/de/my-german-page.html" hreflang="de">
    <link rel="alternate" type="text/html" href="https://example.com/es/my-spanish-page.html" hreflang="es">
    <link rel="alternate" type="text/html" href="https://example.com/my-english-page.html" hreflang="en">
    <link rel="alternate" type="text/html" href="https://example.com/my-english-page.html" hreflang="x-default">
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is the English version of the page.</p>
</body>
</html>

Example of <link rel="alternate" type="text/html" hreflang="" for multiple language versions.

Impact on SEO and User Experience

The proper implementation of rel="alternate" type="text/html" (especially with hreflang) has significant benefits:

  1. Improved SEO for International Sites: It helps search engines like Google understand the relationship between different language or regional versions of your content. This prevents duplicate content issues and ensures that the correct language version is served to users based on their location and language preferences.

  2. Better User Experience: Users are directed to the most appropriate version of a page, improving their experience and reducing bounce rates.

  3. Correct Indexing: Search engines can correctly index all language versions of your site, rather than potentially ignoring or penalizing them as duplicates.

  4. Content Syndication: While less common for type="text/html", rel="alternate" can also be used to point to alternative formats for content syndication, though typically with different type values (e.g., application/atom+xml for Atom feeds).