คุณกำหนดข้อมูลเมตา (ชื่อ คำอธิบาย) ในหน้าอย่างไรใน Next.js?

Question

Accepted Answer

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