LanguageAlternates

LanguageAlternates renders one or more <link rel="alternate"> tags for localized or regional page variants. Each entry maps a hreflang value such as es, en-US, or x-default to an absolute alternate URL.

Props

prop	type	default	required	description
`languages`	`Record<string, string \| URL>`	-	Yes	Map of `hreflang` values to alternate URLs rendered as `href`. Accepts either URL strings or `URL` objects as values.

Examples

Basic

Input:

<LanguageAlternates
  languages={{
    es: "https://example.com/es",
    "x-default": "https://example.com",
  }}
/>

Output:

<link rel="alternate" hreflang="es" href="https://example.com/es" />
<link rel="alternate" hreflang="x-default" href="https://example.com" />

Complete

Input:

<LanguageAlternates
  languages={{
    es: "https://example.com/es",
    "en-US": new URL("https://example.com/en-us"),
    "x-default": "https://example.com",
  }}
/>

Output:

<link rel="alternate" hreflang="es" href="https://example.com/es" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us" />
<link rel="alternate" hreflang="x-default" href="https://example.com" />

Decisions Made

LanguageAlternates preserves the insertion order of the languages object when rendering tags. Define entries in the same order you want them emitted in the document head.

This component only handles localized page alternates. Other rel="alternate" uses such as feed discovery remain outside its scope to keep the API focused on hreflang metadata.

Source code

---
interface Props {
  languages: Record<string, string | URL>;
}

const { languages } = Astro.props;
---

{
  Object.entries(languages).map(([hreflang, href]) => (
    <link rel="alternate" hreflang={hreflang} href={href} />
  ))
}