Skip to content

language-alternates.md

Latest commit

 

History

History
98 lines (84 loc) · 2.52 KB

language-alternates.md

File metadata and controls

98 lines (84 loc) · 2.52 KB

LanguageAlternates

Renders <link rel="alternate" hreflang> tags for multilingual sites. Tells search engines which language version to serve for a given region.

Import

---
import { LanguageAlternates } from "@mannisto/astro-metadata"
---

Usage

Basic

<LanguageAlternates
  alternates={[
    { href: "https://example.com/en", hreflang: "en" },
    { href: "https://example.com/fi", hreflang: "fi" },
    { href: "https://example.com", hreflang: "x-default" },
  ]}
/>

Regional variants

<LanguageAlternates
  alternates={[
    { href: "https://example.com/en-us", hreflang: "en-US" },
    { href: "https://example.com/en-gb", hreflang: "en-GB" },
    { href: "https://example.com", hreflang: "x-default" },
  ]}
/>

With Head component

<Head
  title="My Page"
  languageAlternates={[
    { href: "https://example.com/en", hreflang: "en" },
    { href: "https://example.com/fi", hreflang: "fi" },
    { href: "https://example.com", hreflang: "x-default" },
  ]}
/>

<!-- Disabled -->
<Head title="My Page" languageAlternates={false} />

With Metadata API

---
import { Metadata } from "@mannisto/astro-metadata"

Metadata.set({
  title: "About",
  languageAlternates: [
    { href: "https://example.com/en/about", hreflang: "en" },
    { href: "https://example.com/fi/about", hreflang: "fi" },
    { href: "https://example.com/about", hreflang: "x-default" },
  ],
})
---

Dynamic alternates in a layout

---
import { LanguageAlternates } from "@mannisto/astro-metadata"

const currentPath = Astro.url.pathname
const baseUrl = "https://example.com"
---

<html>
  <head>
    <LanguageAlternates
      alternates={[
        { href: `${baseUrl}/en${currentPath}`, hreflang: "en" },
        { href: `${baseUrl}/fi${currentPath}`, hreflang: "fi" },
        { href: `${baseUrl}${currentPath}`, hreflang: "x-default" },
      ]}
    />
  </head>
  <body>
    <slot />
  </body>
</html>

Props

Prop Type Description
alternates LanguageAlternate[] List of alternate language pages
alternates[].href string Full URL of the alternate page
alternates[].hreflang string Language or region code, e.g. en, fi, en-US, x-default