App Router ima vgrajen Metadata API za SEO oznake (<title>, <meta>, Open Graph itd.) — izvozite metapodatke iz layout.tsx ali page.tsx in Next.js prikazuje pravilne <head> oznake.
App Router ima vgrajen Metadata API za SEO oznake (<title>, <meta>, Open Graph itd.) — izvozite metapodatke iz layout.tsx ali page.tsx in Next.js prikazuje pravilne <head> oznake.
// 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 prebere izvoženi metadata objekt in ustvari <title>, <meta name="description">, OG oznake itd. — nobena ročna urejanja <head>.
Za strani, katerih naslov je odvisen od pridobljene vsebine (blog objava, proizvod), izvozite async funkcijo 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] },
};
}
To se izvede na strežniku in omogoči vsaki dinamični strani točne, vsebini specifične metapodatke — bistveni za SEO in družabno deljenje dinamične vsebine.
// 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 v postavitvi, so spojeni z (in jih lahko preglasijo) otroške strani — zato nastavite privzete vrednosti celotnega spletnega mesta enkrat in vrednosti na ravni strani, kjer je potrebno. template samodejno doda ime spletnega mesta.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Posebne datoteke samodejno ustvarijo ustrezne metapodatke/poti.
Dobri metapodaci vozijo SEO in predogled delitve po družabnih omrežjih.
Metadata API naredi to deklarativno in tipo varno — statični metadata za fiksne strani, async generateMetadata za strani, vožene s podatki, in privzete vrednosti na ravni postavitve s predlogami — zamenjava ročnega upravljanja <head> s čistim, strežniku renderiranim sistemom.