App Router má vestavěné Metadata API pro SEO značky (<title>, <meta>, Open Graph atd.) — exportujete metadata ze souboru layout.tsx nebo page.tsx a Next.js vykreslí správné značky v <head>.
App Router má vestavěné Metadata API pro SEO značky (<title>, <meta>, Open Graph atd.) — exportujete metadata ze souboru layout.tsx nebo page.tsx a Next.js vykreslí správné značky v <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 čte exportovaný objekt metadata a generuje <title>, <meta name="description">, OG značky atd. — není potřeba ruční úprava <head>.
Pro stránky, jejichž titul závisí na načtených datech (příspěvek blogu, produkt), exportujete async funkci 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] },
};
}
Tato funkce se spouští na serveru a umožňuje každé dynamické stránce mít přesná, obsahu specifická metadata — nezbytná pro SEO a sdílení na sociálních sítích.
// 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"
};
Metadata definovaná v layoutu se slučují s (a mohou být přepsána) podřízenými stránkami — takže jednou nastavíte výchozí hodnoty v rámci celého webu a konkrétní hodnoty na jednotlivých stránkách. template automaticky přidá název webu.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Speciální soubory automaticky generují odpovídající metadata/routy.
Qualitní metadata zvyšují SEO a náhledy při sdílení v sociálních sítích.
Metadata API to dělá deklarativním a typově bezpečným — statické metadata pro pevné stránky, async generateMetadata pro stránky závislé na datech, a výchozí hodnoty na úrovni layoutu se šablonami — nahrazuje ruční správu <head> čistým, na serveru vykresleným systémem.