Hreflang Tags

30-60 minAdvanced

Implement hreflang attributes for multi-language or multi-regional sites.

Prerequisites

Next.js Middleware knowledge (optional but recommended for routing)

Intermediate Recommended

Metadata API

Adding headers via Metadata.

Define Alternates

Use the alternates key in your generateMetadata function.

Map language codes to their respective URLs.

Example

export function generateMetadata() {
  return {
    alternates: {
      canonical: 'https://acme.com',
      languages: {
        'en-US': 'https://acme.com/en-US',
        'de-DE': 'https://acme.com/de-DE',
      },
    },
  }
}

Verification Checklist

Inspect the page source for <link rel="alternate" hreflang="..." /> tags.
Use a tool like 'Hreflang Tags Testing Tool' to validate bi-directional linking.
Ensure a self-referencing hreflang tag exists.