Bagaimanakah cara menetapkan metadata halaman (tajuk, penerangan) di Next.js?

Question

Accepted Answer

App Router mempunyai **Metadata API** terbina untuk tag SEO (``, `<meta>`, Open Graph, dsb.) — anda mengeksport metadata daripada `layout.tsx` atau `page.tsx` dan Next.js menjadualkan tag `<head>` yang betul. ## Metadata statik ```tsx // 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 membaca objek `metadata` yang dieksport dan menghasilkan `<title>`, `<meta name="description">`, tag OG, dsb. — tanpa perlu mengedit `<head>` secara manual. ## Metadata dinamik (bergantung pada data) Untuk halaman yang tajuknya bergantung pada kandungan yang diambil (siaran blog, produk), eksport fungsi `generateMetadata` asinkron: ```tsx // 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 berjalan di pelayan dan membenarkan setiap halaman dinamik mempunyai metadata yang tepat dan spesifik kandungan — penting untuk SEO dan perkongsian sosial kandungan dinamik. ## Metadata bergabung ke bawah pohon ```tsx // 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 yang ditakrifkan dalam susun atur **digabung** dengan (dan boleh dipangkat semula oleh) halaman anak — jadi anda menetapkan nilai lalai seluruh laman sekali dan nilai per-halaman di mana diperlukan. `template` secara automatik menambahkan nama laman. ## Metadata berdasarkan fail ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Fail khas menghasilkan metadata/laluan yang sesuai secara automatik. ## Mengapa ini penting Metadata yang baik mendorong pratonton SEO dan perkongsian sosial. API Metadata menjadikannya deklaratif dan selamat jenis — `metadata` statik untuk halaman tetap, `generateMetadata` asinkron untuk halaman yang didorong data, dan lalai peringkat susun atur dengan templat — menggantikan pengurusan `<head>` manual dengan sistem yang bersih dan dijadualkan pelayan.