App Router turi integruotą Metadata API SEO žymoms (<title>, <meta>, Open Graph ir kt.) — jūs eksportuojate metaduomenis iš layout.tsx arba page.tsx, o Next.js suteikia tinkamas <head> žymas.
App Router turi integruotą Metadata API SEO žymoms (<title>, <meta>, Open Graph ir kt.) — jūs eksportuojate metaduomenis iš layout.tsx arba page.tsx, o Next.js suteikia tinkamas <head> žymas.
// 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 nuskaito išeksportavimo metadata objektą ir sukuria <title>, <meta name="description">, OG žymas ir kt. — nereikia rankiniu būdu redaguoti <head>.
Puslpiams, kurių pavadinimas priklauso nuo gauto turinio (blogas, produktas), eksportuokite asinchroninę generateMetadata funkciją:
// 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] },
};
}
Tai veikia serveryje ir leidžia kiekvienam dinaminiam puslapiui turėti tikslus, turinio specifinį metaduomenis — gyvybiškai svarbu SEO ir socialiniam dinaminės turinio dalijimui.
// 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"
};
Metaduomenys, apibrėžti maketoje, yra sujungiami su (ir gali būti nepaisomi) vaikinių puslapių — todėl vieną kartą nustatote visos svetainės numatytas reikšmes ir konkretaus puslapio reikšmes, jei reikia. template automatiškai prideda svetainės pavadinimą.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Specialūs failai automatiškai generuoja atitinkamus metaduomenis/maršrutus.
Geri metaduomenys paskatina SEO ir socialinės pasidalinimo peržiūras.
Metadata API tai daro deklaratyvu ir tipo saugiu — statinis metadata fiksuotiems puslapiams, asinchroninis generateMetadata duomenimis varomais puslapiams, ir maketo lygio numatytos reikšmės su šablonais — keičia rankinį <head> valdymą švariu, serveryje rendiuotu sistema.