Skip to content

LanguageAlternates - Component

LanguageAlternates renders one or more <link rel="alternate"> tags with hreflang values for localized or regional URL variants.

Props

prop	type	default	required	description
`languages`	`Record<string, string \| URL>`	-	Yes	Map of `hreflang` values (for example `es`, `fr`, `x-default`) to URL values rendered as `href`.

Usage & Examples

Input

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

Output

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

Decisions Made

This component only handles language alternates. Feed alternates like RSS or Atom are intentionally outside this component’s responsibility. This was made to keep concerns separated from feed discovery metadata and reduce prop-surface overlap between components.

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} />)}

Reference