generateMetadata() – Generarea dinamică a metadatelor SEO în Next.js

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await preiaArticol(params.slug);
  return { title: post.titlu, description: post.rezumat };
}

Ce face generateMetadata() - Generarea dinamică a metadatelor SEO

Pentru paginile dinamice (cum ar fi `/articole/[slug]`), titlul și descrierea depind de datele din baza de date.

Funcția generateMetadata() se execută pe server înainte de randarea paginii, având acces la parametrii rutei (`params`).

Next.js deduplică automat cererile `fetch()` efectuate atât în `generateMetadata` cât și în componenta paginii `Page()`, garantând că baza de date este interogată o singură dată.

Exemple

Exemplul 1: Generarea dinamică a titlului și a imaginii Open Graph pentru un articol

Preia titlul și imaginea reprezentativă din baza de date.

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const articol = await preiaArticolDinBaza(params.slug);

  return {
    title: `${articol.titlu} - dexblog.ro`,
    description: articol.excerpt,
    openGraph: {
      images: [articol.imagine_principala_url],
    },
  };
}

Ieșire în terminal

Fiecare articol va avea propriul său titlu și previzualizare Facebook unică.

Greșeli frecvente

• Exportarea atât a unei constante statice ‘metadata’, cât și a funcției ‘generateMetadata()’ în același fișier (cele două sunt reciproc exclusive pe aceeași pagină).

Comenzi înrudite

• Obiectul metadata - Configurarea etichetelor SEO statice: Definește metadatele paginii (title, description, Open Graph, Twitter Cards, canonical) direct în fișierele layout.tsx sau page.tsx.
• Segmente dinamice [id] - Crearea rutelor parametrizate: Generează rute dinamice unde segmentul definit între paranteze drepte [parametru] capturează valoarea din URL.