App Router ima ugrađeni Metadata API za SEO tagove (<title>, <meta>, Open Graph, itd.) — izvozite metapodatke iz layout.tsx ili page.tsx i Next.js renderira ispravne <head> tagove.
App Router ima ugrađeni Metadata API za SEO tagove (<title>, <meta>, Open Graph, itd.) — izvozite metapodatke iz layout.tsx ili page.tsx i Next.js renderira ispravne <head> tagove.
// 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 čita izvezeni metadata objekt i generira <title>, <meta name="description">, OG tagove, itd. — bez ručnog uređivanja <head>.
Za stranice čiji se naslov ovisi o preuzetom sadržaju (blog post, proizvod), izvezite asinkronu generateMetadata funkciju:
// 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] },
};
}
Ovo se izvršava na serveru i omogućava svakoj dinamičkoj stranici da ima točne, sadržaju specifične metapodatke — bitno za SEO i društveno dijeljenje dinamičkog sadržaja.
// 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"
};
Metapodaci definirani u layout-u se spajaju s (i mogu biti nadjačani od strane) child stranica — što znači da postavite site-wide zadane vrijednosti jednom i per-page vrijednosti gdje je potrebno. template automatski dodaje naziv stranice.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Specijalne datoteke automatski generiraju odgovarajuće metapodatke/rute.
Dobri metapodaci pokreću SEO i pretpreglede društvenog dijeljenja.
Metadata API čini ga deklarativnim i type-safe — statički metadata za fiksne stranice, asinkrona generateMetadata za stranice vođene podacima, i layout-level zadane vrijednosti sa template-ima — zamjenjujući ručno upravljanje <head> sa čistim, server-renderiranim sustavom.