يوفر 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> يدوياً.
للصفحات التي يعتمد عنوانها على محتوى مجلوب (منشور مدونة، منتج)، صدّر دالة 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"
};
البيانات الوصفية المُعرّفة في layout يتم دمجها مع (وقد يتم تجاوزها من قبل) صفحات فرعية — لذا تعيّن الافتراضيات على مستوى الموقع مرة واحدة والقيم الخاصة بكل صفحة حيث هو مطلوب. يُضيف template اسم الموقع تلقائياً.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
الملفات الخاصة تُنشئ البيانات الوصفية والمسارات المقابلة تلقائياً.
البيانات الوصفية الجيدة تدفع SEO ومعاينات المشاركة الاجتماعية.
تجعل واجهة Metadata API ذلك تعريفياً وآمناً من حيث النوع — metadata ثابت للصفحات الثابتة، generateMetadata غير متزامن للصفحات المدفوعة بالبيانات، والافتراضيات على مستوى layout مع القوالب — بدلاً من إدارة <head> اليدوية برنظام نظيف وتم عرضه من خادم.