Next.js 15 Fullstack Web Apps · درس

البيانات الوصفية وSEO ورأس المستند

اضبط عناوين الصفحات وأوصافها ووسوم Open Graph والأيقونات المفضلة باستخدام Metadata API في Next.js 15 لتحسين SEO والمشاركة على الشبكات الاجتماعية.

الدرس 4 من 413 خطوة

البيانات الوصفية وSEO ورأس المستند درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Metadata Matters

Search engines and social platforms read your metadata to build results and link previews — so titles and descriptions drive clicks and ranking.

The Metadata API

Next.js 15 replaces manual <head> edits with a declarative Metadata API: export a metadata object or generateMetadata and it renders the tags.

Static Metadata Export

For metadata that never changes, export a typed metadata object — Next.js merges it into the document head automatically.

export const metadata = {
  title: 'My Dashboard',
  description: 'Manage your account and settings',
};

export default function Page() {
  return <h1>Dashboard</h1>;
}

Title Templates

In a layout, set a title template so child pages share a suffix. The %s placeholder is swapped for each page's own title.

export const metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme',
  },
};

Dynamic Metadata

When the title depends on data, export an async generateMetadata function — it gets the route params and can fetch before rendering.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

Open Graph Tags

Open Graph metadata controls how a link looks when shared. Add an openGraph field with a title, description, and image.

export const metadata = {
  openGraph: {
    title: 'Acme Launch',
    description: 'The new way to build apps',
    images: ['/og-launch.png'],
  },
};

Twitter Cards

Twitter/X uses its own card metadata. Set the twitter field to control the preview shown when your link gets posted.

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Acme Launch',
    images: ['/og-launch.png'],
  },
};

Favicons and Icons

Drop special files in app/ and Next.js wires them up: favicon.ico for the tab, icon.png for the app, apple-icon.png for iOS.

Dynamic OG Images

Next.js can generate social images on the fly: an opengraph-image.tsx using ImageResponse renders JSX to a PNG per page.

import { ImageResponse } from 'next/og';
export default function Image() {
  return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}

Robots and Sitemaps

Steer crawlers with a robots.ts file and publish a sitemap.ts so search engines find every route — both export plain serializable data.

export default function robots() {
  return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}

Best Practices

For strong SEO: unique title and description per page, titles under ~60 chars, always an Open Graph image, and generateMetadata for dynamic routes.

Quick Check

Test your metadata knowledge.

أجب عليها في الدرس التفاعلي

Recap

You learned the Metadata API: static metadata vs generateMetadata, title templates, openGraph/twitter previews, and the special icon/SEO files.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «البيانات الوصفية وSEO ورأس المستند» مجاني؟

نعم — نص درس «البيانات الوصفية وSEO ورأس المستند» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «البيانات الوصفية وSEO ورأس المستند»؟

اضبط عناوين الصفحات وأوصافها ووسوم Open Graph والأيقونات المفضلة باستخدام Metadata API في Next.js 15 لتحسين SEO والمشاركة على الشبكات الاجتماعية. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «البيانات الوصفية وSEO ورأس المستند»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Next.js 15 Fullstack Web Apps