App Router มี Metadata API ที่สร้างมาสำหรับแท็ก SEO (<title>, <meta>, Open Graph ฯลฯ) — คุณส่งออกข้อมูลเมตาจาก layout.tsx หรือ page.tsx และ Next.js จะแสดง <head> แท็กที่ถูกต้อง
App Router มี Metadata API ที่สร้างมาสำหรับแท็ก SEO (<title>, <meta>, Open Graph ฯลฯ) — คุณส่งออกข้อมูลเมตาจาก layout.tsx หรือ page.tsx และ Next.js จะแสดง <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 อ่านอ็อบเจกต์ metadata ที่ส่งออกมาและสร้าง <title>, <meta name="description">, แท็ก OG ฯลฯ — ไม่จำเป็นต้องแก้ไข <head> ด้วยตนเอง
สำหรับหน้าที่ชื่อเรื่องขึ้นอยู่กับเนื้อหาที่ดึงมา (โพสต์บล็อก สินค้า) ให้ส่งออกฟังก์ชัน 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] },
};
}
ฟังก์ชันนี้ทำงานบนเซิร์ฟเวอร์และให้แต่ละหน้าแบบไดนามิกมีข้อมูลเมตาที่ถูกต้องและเฉพาะเจาะจงกับเนื้อหา — สำคัญสำหรับ SEO และการแชร์โซเชียลของเนื้อหาแบบไดนามิก
// 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"
};
ข้อมูลเมตาที่กำหนดในเลย์เอาต์จะ ผสาน กับ (และอาจถูกแทนที่ด้วย) หน้าลูก — ดังนั้นคุณจึงตั้งค่าเริ่มต้นสำหรับทั้งไซต์ครั้งเดียวและค่าระดับหน้าที่ต้องการ template จะเพิ่มชื่อไซต์โดยอัตโนมัติ
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
ไฟล์พิเศษสร้างข้อมูลเมตา/เส้นทางที่สอดคล้องกันโดยอัตโนมัติ
ข้อมูลเมตาที่ดีจะขับเคลื่อน SEO และการแสดงตัวอย่างการแชร์โซเชียล
Metadata API ทำให้มันเป็นการประกาศและป้องกันประเภท — metadata คงที่สำหรับหน้าคงที่ async generateMetadata สำหรับหน้าที่ขับเคลื่อนด้วยข้อมูล และค่าเริ่มต้นระดับเลย์เอาต์ที่มีแม่แบบ — แทนที่การจัดการ <head> ด้วยตนเองด้วยระบบการเรนเดอร์บนเซิร์ฟเวอร์ที่สะอาด