# Metadata & SEO trong Next.js (React / Next.js) > Metadata API, OpenGraph, Twitter cards, sitemap, robots.txt, lược đồ JSON-LD - 18 câu hỏi phỏng vấn - Mid-Level - [Câu hỏi phỏng vấn: React / Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van.md) ## 1. Phương pháp được khuyến nghị để định nghĩa metadata trong Next.js App Router là gì? **Câu trả lời** Next.js App Router giới thiệu đối tượng `metadata` được export từ layouts và pages để định nghĩa metadata theo cách type-safe và tối ưu. Cách tiếp cận này thay thế các component `` từ Next.js 12 và cho phép render metadata phía server. Export `metadata` là tĩnh và được phân tích tại build time để có hiệu suất SEO tốt hơn. ## 2. Làm thế nào để tạo metadata động dựa trên các tham số route trong Next.js? **Câu trả lời** Hàm `generateMetadata` là bất đồng bộ và nhận `params` cùng `searchParams` làm tham số, cho phép tải dữ liệu để xây dựng metadata một cách động. Hàm này chạy phía server tại thời điểm render và có thể thực hiện các lệnh gọi API. Điều này cho phép tạo metadata duy nhất cho mỗi trang động, rất cần thiết cho SEO của các trang chi tiết. ## 3. Next.js xử lý việc hợp nhất metadata giữa các layouts lồng nhau và pages như thế nào? **Câu trả lời** Next.js tự động hợp nhất metadata từ các layouts cha sang các pages con, với ưu tiên cho các giá trị gần nhất với page. Các trường bị ghi đè (title, description) ngoại trừ `openGraph.images` và `twitter.images` được hợp nhất dưới dạng mảng. Cơ chế cascade này cho phép định nghĩa metadata mặc định ở cấp root và ghi đè ở cấp page. ## Còn 15 câu hỏi nữa - Lợi ích của việc sử dụng `title.template` trong metadata của Next.js là gì? - Phương pháp được khuyến nghị để định nghĩa favicon trong Next.js App Router là gì? Đăng ký miễn phí: https://sharpskill.dev/vi/login ## Các chủ đề phỏng vấn React / Next.js khác - [Nền tảng JavaScript](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/javascript-essentials.md): 25 câu hỏi, Junior - [Nền tảng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-fundamentals.md): 20 câu hỏi, Junior - [React Hooks](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-hooks.md): 22 câu hỏi, Junior - [Vòng đời component](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/component-lifecycle.md): 18 câu hỏi, Junior - [React Router](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-router.md): 20 câu hỏi, Junior - [Quản lý state với Context](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/state-management-context.md): 18 câu hỏi, Junior - [Biểu mẫu và Controlled Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/forms-controlled-components.md): 20 câu hỏi, Mid-Level - [Lấy dữ liệu & API](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/fetching-data-api.md): 20 câu hỏi, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-query-tanstack.md): 20 câu hỏi, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/styling-css-in-js.md): 18 câu hỏi, Mid-Level - [Nền tảng Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-fundamentals.md): 25 câu hỏi, Mid-Level - [TypeScript với React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/typescript-react.md): 20 câu hỏi, Mid-Level - [Data Fetching trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-data-fetching.md): 24 câu hỏi, Mid-Level - [Server Actions trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-server-actions.md): 20 câu hỏi, Mid-Level - [Định tuyến & Điều hướng trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-routing-navigation.md): 22 câu hỏi, Mid-Level - [API Routes trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-api-routes.md): 20 câu hỏi, Mid-Level - [Middleware & Auth trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-middleware-auth.md): 22 câu hỏi, Mid-Level - [Kiểm thử React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-testing.md): 20 câu hỏi, Mid-Level - [Zustand State Management](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/zustand-state-management.md): 18 câu hỏi, Mid-Level - [Tối ưu hiệu năng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-performance-optimization.md): 22 câu hỏi, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-error-boundaries.md): 18 câu hỏi, Senior - [Advanced React Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/advanced-react-patterns.md): 20 câu hỏi, Senior - [Tính năng nâng cao của Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-advanced-features.md): 24 câu hỏi, Senior - [Triển khai & Môi trường Production với Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-deployment-production.md): 20 câu hỏi, Senior - [Architecture & Design Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-architecture-patterns.md): 22 câu hỏi, Senior - [React Server Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-server-components.md): 26 câu hỏi, Senior - [Quốc tế hóa Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-internationalization.md): 20 câu hỏi, Senior - [React Bảo mật & Thực hành tốt nhất](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-security-best-practices.md): 22 câu hỏi, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-metadata-seo