Next.js i18n SEO: routing, metadata, hreflang, and sitemaps

Routing

Choose a route model that search engines can crawl

A locale should be part of the URL or domain structure, not only a cookie or browser preference. App Router layouts let you share page structure while resolving content for [locale].

• Use /fr/page, fr.example.com/page, or a documented country-domain model.
• Avoid serving multiple languages from one URL based only on detection.
• Keep route and locale validation in one boundary.

app/
  [locale]/
    products/
      [slug]/
        page.js
        opengraph-image.js
    layout.js
    sitemap.js

// /fr/products/widget
// /de/products/widget

Rendering

Resolve language content before the response

Static interface copy, database content, API responses, and metadata should agree on the active locale. Server Components and server-side helpers make that relationship explicit and keep credentials away from the browser.

• Use stable translation keys for runtime values.
• Forward the locale from Next.js to separate APIs.
• Return source-language content when a translation is not ready.

const copy = await altified.resolve(locale, [
  { key: `product.${product.id}.name`, defaultValue: product.name },
  { key: `product.${product.id}.description`, defaultValue: product.description },
]);

Metadata

Keep titles, descriptions, canonicals, and alternates aligned

A French page should have French page metadata and a French canonical URL. Generate its language alternatives from the same route data used to render the page so a renamed or unpublished route does not create stale links.

• Translate title and description fields.
• Add a self-canonical URL for every locale page.
• Add reciprocal alternates for the complete published language set.

export async function generateMetadata({ params }) {
  const { locale, slug } = await params;
  const product = await getProduct(slug);
  const path = `/products/${product.slug}`;

  return {
    title: product.seoTitle[locale],
    description: product.seoDescription[locale],
    alternates: {
      canonical: `https://example.com/${locale}${path}`,
      languages: {
        en: `https://example.com/en${path}`,
        fr: `https://example.com/fr${path}`,
        de: `https://example.com/de${path}`,
      },
    },
  };
}

Discovery

Link and submit the full language set

Internal links, the site sitemap, and a supplemental translated sitemap should all point to real published routes. Do not use a translation sitemap to hide missing application routes or broken metadata.

• Link language versions from navigation or a language switcher.
• Include dynamic pages in the site-owned sitemap.
• Submit the relevant sitemap URLs in Search Console.