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

Instradamento

Scegli un modello di percorso che i motori di ricerca possano indicizzare

La localizzazione dovrebbe essere parte integrante dell'URL o della struttura del dominio, non solo un cookie o una preferenza del browser. I layout di App Router consentono di condividere la struttura della pagina risolvendo al contempo i contenuti per [localizzazione].

• 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

Risolvere il contenuto linguistico prima della risposta

Il testo statico dell'interfaccia, il contenuto del database, le risposte delle API e i metadati devono essere coerenti con le impostazioni locali attive. I componenti server e gli helper lato server rendono esplicita questa relazione e mantengono le credenziali separate dal 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 },
]);

Metadati

Mantieni allineati titoli, descrizioni, canonici e alternativi

Una pagina in francese dovrebbe avere metadati in francese e un URL canonico in francese. Genera le sue alternative linguistiche dagli stessi dati di percorso utilizzati per visualizzare la pagina, in modo che un percorso rinominato o non pubblicato non crei collegamenti obsoleti.

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

Scoperta

Inserisci il link e invia il set completo di lingue

I link interni, la mappa del sito e una mappa del sito tradotta supplementare devono puntare a percorsi effettivamente pubblicati. Non utilizzare una mappa del sito tradotta per nascondere percorsi applicativi mancanti o metadati errati.

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