App Router memiliki Metadata API bawaan untuk tag SEO (<title>, <meta>, Open Graph, dll.) — Anda mengekspor metadata dari layout.tsx atau page.tsx dan Next.js merender tag <head> yang benar.
App Router memiliki Metadata API bawaan untuk tag SEO (<title>, <meta>, Open Graph, dll.) — Anda mengekspor metadata dari layout.tsx atau page.tsx dan Next.js merender tag <head> yang benar.
// 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 diekspor dan menghasilkan <title>, <meta name="description">, tag OG, dll. — tanpa perlu mengedit <head> secara manual.
Untuk halaman yang judulnya tergantung pada konten yang diambil (postingan blog, produk), ekspor fungsi async 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] },
};
}
Fungsi ini berjalan di server dan memungkinkan setiap halaman dinamis memiliki metadata yang akurat dan spesifik untuk konten — sangat penting untuk SEO dan berbagi 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 yang didefinisikan dalam layout digabungkan dengan (dan dapat ditimpa oleh) halaman anak — jadi Anda menetapkan default di seluruh situs sekali dan nilai per-halaman di mana diperlukan. template secara otomatis menambahkan nama situs.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
File khusus menghasilkan metadata/rute terkait secara otomatis.
Metadata yang baik mendorong SEO dan pratinjau berbagi sosial.
Metadata API membuatnya deklaratif dan type-safe — metadata statis untuk halaman tetap, generateMetadata async untuk halaman berbasis data, dan default tingkat layout dengan template — menggantikan manajemen <head> manual dengan sistem yang bersih dan di-render server.