تخطَّ إلى المحتوى

شرح Next.js

البيانات الوصفية و SEO

الدرس 16 من 25· ⏱ 1 دقائق قراءة

بيانات وصفية ثابتة

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "من نحن",
  description: "تعرّف على فريقنا",
};

بيانات ديناميكية

export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { title: post.title, images: [post.cover] },
    alternates: { canonical: `/blog/${slug}` },
  };
}

خريطة الموقع

// app/sitemap.ts
export default function sitemap() {
  return [
    { url: "https://site.com", lastModified: new Date() },
    { url: "https://site.com/blog" },
  ];
}

robots

// app/robots.ts
export default function robots() {
  return {
    rules: { userAgent: "*", allow: "/" },
    sitemap: "https://site.com/sitemap.xml",
  };
}

💡 الرابط الأساسي (canonical) المميّز لكل صفحة يمنع مشاكل المحتوى المكرّر.

🎯 التالي: التنسيق (Styling).

هل كان هذا الدرس مفيدًا؟