Next.js - Jak dodać meta tagi?

Generowanie tagów meta

W przypadku statycznych stron możemy użyć po prostu zmiennej metadata, aby stworzyć odpowiednie tagi dla konkretnej strony.

export const metadata = {
  title: "Tytuł strony",
  description: "Opis strony",
  // można dodać więcej tagów np:
  alternates: {
    canonical: "adres kanoniczny",
  },
  // generowanie open graph
  openGraph: {
    type: "website",
    title: "",
    description: "",
    images: [{ url: "adres URL obrazka" }],
  },
};

Aby wygenerować domyślny tytuł wraz z końcówką np. Next.js: Jak dodać Meta Tagi? | Marcin Zogrodnik trzeba nieco zmodyfikować metadata.

Domyślny tytuł najlepiej dodać w pliku app/layout, gdzie zamiast tekstu w polu title dodajemy obiekt:

export const metadata = {
  title: {
    template: "%s | Marcin Zogrodnik",
    default: "Marcin Zogrodnik - Programista Front End - Katowice",
  },
};

Teraz już nie musimy za każdym razem dodawać "| Marcin Zogrodnik", na koniec bo Next.js już wie, że musi go dodać automatycznie. Tworząc nową stronę dodajemy tylko tytuł np. O mnie.

Dynamiczne generowanie meta tagów

Generowanie dynamicznych tagów jest również łatwe, tym razem z pomocą przychodzi funkcja generateMetadata.

export async function generateMetadata({ params }) {
  const slug = params.slug;
  const blogPost = await // tutaj funkcja, która pobiera mi dane dla konkretnego posta

  return {
    title: `${blogPost.title}`,
    description: `{blogPost.description}`
  }
}

To w jaki sposób pobierasz dane postów zależy od Ciebie, tutaj uprościłem nieco, jednak koncepcja jest taka sama. Pobierasz konkretny post i w zależności od typu zmieniasz wartości np. title, description czy adres kanoniczny.