App Router có sẵn một Metadata API cho các thẻ SEO (<title>, <meta>, Open Graph, v.v.) — bạn export metadata từ một layout.tsx hoặc page.tsx và Next.js render đúng các thẻ <head>.
App Router có sẵn một Metadata API cho các thẻ SEO (<title>, <meta>, Open Graph, v.v.) — bạn export metadata từ một layout.tsx hoặc page.tsx và Next.js render đúng các thẻ <head>.
// 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 đọc object metadata được export và sinh ra <title>, <meta name="description">, các thẻ OG, v.v. — không cần chỉnh <head> bằng tay.
Với các trang có title phụ thuộc nội dung được fetch (một bài blog, một sản phẩm), export một hàm async generateMetadata:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch bài viết
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Hàm này chạy trên server và cho phép mỗi trang động có metadata chính xác, đặc thù theo nội dung — thiết yếu cho SEO và chia sẻ mạng xã hội của nội dung động.
// app/layout.tsx — mặc định + một title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // title con thành "About | My Site"
};
Metadata định nghĩa trong một layout được gộp với (và có thể bị ghi đè bởi) các trang con — nên bạn đặt các giá trị mặc định cho toàn site một lần và giá trị riêng theo trang khi cần. template tự động nối thêm tên site.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Các file đặc biệt tự động sinh ra metadata/route tương ứng.
Metadata tốt thúc đẩy SEO và bản xem trước khi chia sẻ.
Metadata API làm cho việc này mang tính khai báo và type-safe — metadata tĩnh cho trang cố định, generateMetadata async cho trang dựa trên dữ liệu, và các mặc định ở cấp layout với template — thay thế việc quản lý <head> thủ công bằng một hệ thống sạch sẽ, render trên server.