# Metadata & SEO ใน Next.js (React / Next.js) > Metadata API, OpenGraph, Twitter cards, sitemap, robots.txt, JSON-LD schema - 18 คำถามสัมภาษณ์ - Mid-Level - [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md) ## 1. วิธีที่แนะนำในการกำหนด metadata ใน Next.js App Router คืออะไร? **คำตอบ** Next.js App Router แนะนำอ็อบเจกต์ `metadata` ที่ export จาก layouts และ pages เพื่อกำหนด metadata อย่าง type-safe และเพิ่มประสิทธิภาพ วิธีนี้แทนที่คอมโพเนนต์ `` จาก Next.js 12 และเปิดใช้งานการ render metadata ฝั่งเซิร์ฟเวอร์ การ export `metadata` เป็นแบบ static และถูกวิเคราะห์ใน build time เพื่อประสิทธิภาพ SEO ที่ดีขึ้น ## 2. วิธีสร้าง metadata แบบไดนามิกตามพารามิเตอร์ route ใน Next.js ทำอย่างไร? **คำตอบ** ฟังก์ชัน `generateMetadata` เป็นแบบ async และรับ `params` กับ `searchParams` เป็นอาร์กิวเมนต์ ทำให้สามารถโหลดข้อมูลเพื่อสร้าง metadata แบบไดนามิกได้ ฟังก์ชันนี้ทำงานฝั่งเซิร์ฟเวอร์ในเวลา render และสามารถเรียก API ได้ สิ่งนี้ช่วยให้สร้าง metadata เฉพาะสำหรับแต่ละหน้าแบบไดนามิก ซึ่งจำเป็นสำหรับ SEO ของหน้ารายละเอียด ## 3. Next.js จัดการการรวม metadata ระหว่าง layouts ซ้อนกันและ pages อย่างไร? **คำตอบ** Next.js รวม metadata จาก layouts แม่ไปยัง pages ลูกโดยอัตโนมัติ โดยให้ความสำคัญกับค่าที่ใกล้เคียงกับ page มากที่สุด ฟิลด์จะถูกเขียนทับ (title, description) ยกเว้น `openGraph.images` และ `twitter.images` ที่จะถูกรวมเป็น array กลไก cascade นี้ช่วยให้กำหนด metadata เริ่มต้นที่ระดับ root และเขียนทับที่ระดับ page ได้ ## มีอีก 15 คำถาม - ประโยชน์ของการใช้ `title.template` ใน metadata ของ Next.js คืออะไร? - วิธีที่แนะนำในการกำหนด favicon ใน Next.js App Router คืออะไร? สมัครฟรี: https://sharpskill.dev/th/login ## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ - [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior - [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior - [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior - [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior - [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior - [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior - [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level - [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level - [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level - [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level - [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level - [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level - [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level - [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level - [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level - [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level - [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level - [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior - [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior - [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior - [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior - [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior - [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior - [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior - [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior - [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo