Next.js • المستوى الثالث • الدرس 4

تحسينات محركات البحث والبيانات الوصفية (Metadata API)

أهداف الدرس العلمية

تخصيص البيانات الوصفية ثابتة وتفاعلية ديناميكياً باستخدام Metadata API.
تحسين ظهور روابطك عند المشاركة على منصات التواصل الاجتماعي عبر openGraph.
إضافة الكلمات المفتاحية keywords لتحسين محركات البحث.
استخدام generateMetadata() للبيانات الديناميكية.

1. إتاحة البيانات الوصفية مع Next.js

بفضل المكونات المعتمدة على الخادم، يمكنك توليد عناوين ودعم محركات البحث تلقائياً وديناميكياً لكل صفحة على حدة.

javascript

// app/about/page.js
export const metadata = {
  title: 'من نحن | منصة نهضة',
  description: 'تعلم البرمجة بالعربية',
  keywords: ['تعلم', 'برمجة'],
  openGraph: {
    title: 'منصة نهضة',
    images: ['/og-image.png'],
  },
};

2. metadata الثابتة vs الديناميكية

📌 Static Metadata

يُصدَّر ككائن ثابت — مناسب للصفحات العامة.

javascript

export const metadata = {
  title: '...',
};

⚡ Dynamic Metadata

دالة async تُعيد metadata بناءً على params.

javascript

export async function generateMetadata({ params }) {
  return { title: `مقال ${params.id}` };
}

التطبيق العملي المباشر

تحدي الدرس الرابع: تحسين البيانات الوصفية

قم بالتعديل على الكود في المحرر أدناه:

غيّر metadata.title إلى "فريق نهضة | تعلم البرمجة بالعربية".
غيّر metadata.description إلى وصف جديد يحتوي على كلمة "مشاريع عملية".
أضف مصفوفة keywords تحتوي على 4 كلمات مفتاحية على الأقل.
أضف خاصية images داخل openGraph تحتوي على رابط صورة واحد.
أضف عرض الكلمات المفتاحية كوسوم أسفل الصفحة (اختياري — يظهر التأثير بصرياً).

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للمستوى الرابع