App Router duwe API Metadata sing dibangun kanggo tag SEO (<title>, <meta>, Open Graph, lsp.) — sampeyan ngeksport metadata saka layout.tsx utawa page.tsx lan Next.js ngrenderke tag <head> sing bener.
App Router duwe API Metadata sing dibangun kanggo tag SEO (<title>, <meta>, Open Graph, lsp.) — sampeyan ngeksport metadata saka layout.tsx utawa page.tsx lan Next.js ngrenderke tag <head> sing bener.
// 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 maca obyek metadata sing dieksport lan nghasilake <title>, <meta name="description">, tag OG, lsp. — ora perlu sunting <head> kanthi manual.
Untuk kaca sing judule gumantung saka konten sing dijupuk (post blog, produk), eksport fungsi generateMetadata sing asincrone:
// 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] },
};
}
Ini kacakran ing server lan ngidini saben kaca dinamis duwe metadata akurat lan spesifik konten — krusial kanggo SEO lan pembagian sosial konten dinamis.
// 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 sing ditetapake ing layout digabung karo (lan bisa ditindihake dening) kaca anak — mula sampeyan nyetel standar tingkat situs sapisan lan nilai per-kaca yen diperlu. template nambahi nami situs kanthi otomatis.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Berkas khusus nghasilake metadata/rute sing cocog kanthi otomatis.
Metadata sing apik nyetir SEO lan priksa pratonton berbagi sosial.
API Metadata dianggep deklaratif lan jenis-aman — metadata statis kanggo kaca tetep, generateMetadata asincrone kanggo kaca sing didorong data, lan standar tingkat layout karo template — ngganti pengurusan <head> manual karo sistem bersih sing dirender ing server.