Router aplikacji ma wbudowany API metadanych dla tagów SEO (<title>, <meta>, Open Graph itp.) — eksportujesz metadane z layout.tsx lub page.tsx, a Next.js renderuje prawidłowe tagi <head>.
Router aplikacji ma wbudowany API metadanych dla tagów SEO (<title>, <meta>, Open Graph itp.) — eksportujesz metadane z layout.tsx lub page.tsx, a Next.js renderuje prawidłowe tagi <head>.
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js odczytuje wyeksportowany obiekt metadata i generuje <title>, <meta name="description">, tagi OG itp. — nie jest wymagana ręczna edycja <head>.
Do stron, których tytuł zależy od pobieranej zawartości (wpis bloga, produkt), eksportuj asynchroniczną funkcję generateMetadata:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Działa na serwerze i pozwala każdej dynamicznej stronie mieć dokładne, specyficzne dla zawartości metadane — niezbędne dla SEO i dzielenia się dynamiczną zawartością w mediach społecznościowych.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
Metadane zdefiniowane w układzie są scalane z (i mogą być zastępowane przez) strony podrzędne — więc ustawisz domyślne wartości dla całej witryny raz i wartości dla poszczególnych stron, gdzie potrzeba. template automatycznie dodaje nazwę witryny.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Specjalne pliki automatycznie generują odpowiednie metadane/ścieżki.
Dobre metadane napędzają SEO i podglądy udostępniania w mediach społecznościowych.
API metadanych czyni to deklaratywnym i bezpiecznym dla typów — statyczne metadata dla stałych stron, asynchroniczna generateMetadata dla stron opartych na danych i domyślne wartości na poziomie układu z szablonami — zastępując ręczne zarządzanie <head> czystym systemem renderowanym po stronie serwera.