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

Roteamento

Escolha um modelo de rota que os motores de busca possam rastrear.

A localização deve fazer parte da estrutura do URL ou do domínio, e não apenas de um cookie ou de uma preferência do browser. Os layouts do App Router permitem partilhar a estrutura da página enquanto resolvem o conteúdo para [localidade].

• 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

Renderização

Resolva o conteúdo do idioma antes da resposta.

O conteúdo estático da interface, o conteúdo da base de dados, as respostas da API e os metadados devem estar de acordo com a localidade ativa. Os componentes do servidor e os auxiliares do lado do servidor tornam esta relação explícita e mantêm as credenciais longe do 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 },
]);

Metadados

Mantenha os títulos, descrições, versões canónicas e alternativas alinhados.

Uma página em francês deve ter metadados em francês e um URL canónico em francês. Gere as alternativas de idioma a partir dos mesmos dados de rota utilizados para renderizar a página, para que uma rota renomeada ou não publicada não crie ligações obsoletas.

• 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}`,
      },
    },
  };
}

Descoberta

Envie o conjunto completo de idiomas.

Os links internos, o mapa do site e um mapa do site traduzido complementar devem apontar para rotas publicadas reais. Não utilize um mapa do site traduzido para ocultar rotas de aplicação em falta ou metadados corrompidos.

• 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.