Next.js hreflang: implement language alternatives in the App Router

Comece com URLs

Dê a cada versão de idioma uma rota estável

Utilize uma estrutura de rotas como /fr/pricing ou /de/products/widget. A página deve ser acessível diretamente, renderizar o idioma correspondente no servidor e permanecer válida quando um rastreador a solicitar, sem a necessidade de cookies do navegador ou da preferência Accept-Language.

• Keep one canonical URL per language version.
• Use stable slugs or a documented localized-slug strategy for dynamic pages.
• Return a real 200 response for every published language route.

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

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

Gerar metadados

Criar relações linguísticas recíprocas

Os metadados do Next.js suportam um objeto `alternatives.languages`. Isto permite gerar o mesmo conjunto completo de idiomas em cada página de localização, garantindo que as versões em inglês, francês e alemão apontam umas para as outras.

• Include the current page in its own language map.
• Use fully qualified HTTPS URLs in production.
• Keep language codes consistent with the locale values used by your application.

import { headers } from "next/headers";
import { altified } from "@/lib/altified";

export async function generateMetadata() {
  const locale = (await headers()).get("x-altified-locale") || "en";

  return altified.translatedMetadata({
    locale,
    path: "/pricing",
    origin: "https://example.com",
    locales: ["en", "fr", "de"],
    title: "Pricing",
    description: "Plans for your product.",
  });
}

Renderize o conteúdo

Faça com que o idioma da página corresponda ao URL.

O hreflang não é um mecanismo de tradução. A página em /fr/products/widget deve renderizar o conteúdo em francês, os metadados, a navegação, os dados estruturados e os valores dinâmicos relevantes. A localidade ativa deve ser determinada antes da resposta chegar ao navegador.

• Translate titles, descriptions, Open Graph fields, and visible headings together.
• Forward the active locale to backend APIs.
• Use source-language fallbacks while a translation is pending.

const response = await altifiedFetch(BACKEND_URL + path);

// The active Altified locale is forwarded to the backend.
const product = await response.json();

Valide o cluster

Verifique ambas as direções antes do lançamento.

Os motores de busca podem ignorar agrupamentos linguísticos incompletos ou contraditórios. Teste cada página publicada num idioma específico, inspecione o cabeçalho renderizado e confirme se os links são recíprocos e se cada página tem um URL autocanónico.

• English points to French, German, and English.
• French points to English, German, and French.
• Each canonical uses the same language as the page content.
• Unpublished or incomplete locales are not advertised as live alternatives.