دليل SEO لـ Next.js 2026: البيانات الوصفية والـ Schema والأداء في App Router

دليل SEO لـ Next.js 2026: البيانات الوصفية والـ Schema والأداء في App Router

كيف تُحسّن موقع Next.js لمحركات البحث؟ Next.js 15 App Router يوفر generateMetadata لإدارة البيانات الوصفية ديناميكياً، وsitemap.ts لخرائط الموقع الآلية، وJSON-LD للبيانات المنظمة. الدليل يغطي كل طبقات SEO التقني من البنية إلى Core Web Vitals مع أمثلة كود قابلة للتطبيق الفوري. استشارة مجانية ←

تحسين محركات البحث في Next.js App Router يختلف جوهرياً عن Pages Router. إذا كنت تبني موقعاً بـ Next.js 15 وتريد التصدر في نتائج بحث Google، فهذا الدليل يأخذك عبر كل طبقة تقنية ضرورية.

جدول المحتويات

• لماذا يُعدّ SEO في App Router مختلفاً؟
• generateMetadata API: البيانات الوصفية الديناميكية
• JSON-LD Schema: البيانات المنظمة
• sitemap.ts وrobots.ts الآليان
• hreflang للمواقع متعددة اللغات
• ISR والأداء
• Core Web Vitals: أهداف Lighthouse 100
• جدول مقارنة Pages Router vs App Router
• دليل تطبيقي خطوة بخطوة
• الأسئلة الشائعة
• الخلاصة

لماذا يُعدّ SEO في App Router مختلفاً؟ {#لماذا-app-router}

مع إطلاق Next.js 13 وما تلاه، انتقل الفريق في Vercel من نموذج getStaticProps/getServerSideProps إلى نموذج React Server Components. هذا التحول أفرز واجهة برمجية جديدة كلياً للـ SEO:

• generateMetadata: دالة غير متزامنة تُعيد كائن Metadata بديلاً عن Head component
• generateStaticParams: تحدد المسارات الثابتة لوقت البناء
• sitemap.ts / robots.ts: ملفات تُولّد خرائط الموقع وملف robots تلقائياً
• opengraph-image.tsx: صور Open Graph مُولّدة ديناميكياً عبر Vercel OG

هذه التغييرات تجعل كل صفحة قابلة للتخصيص الدقيق دون الحاجة إلى مكتبات خارجية مثل next-seo.

generateMetadata API: البيانات الوصفية الديناميكية {#generatemetadata}

بنية generateMetadata الأساسية

في كل ملف page.tsx داخل App Router، يمكنك تصدير دالة generateMetadata أو كائن metadata ثابت:

```typescript // app/blog/[slug]/page.tsx import type { Metadata } from 'next';

export async function generateMetadata({ params }: Props): Promise<Metadata> { const post = await getPost(params.slug); return { title: post.title, description: post.description, alternates: { canonical: https://modernwebseo.com/blog/${params.slug}, languages: { 'ar': https://modernwebseo.com/ar/blog/${params.slug}, 'tr': https://modernwebseo.com/tr/blog/${params.slug}, }, }, openGraph: { title: post.title, description: post.description, images: [{ url: post.image, width: 1200, height: 630 }], type: 'article', publishedTime: post.publishedAt, }, twitter: { card: 'summary_large_image', title: post.title, description: post.description, images: [post.image], }, }; } ```

حقول Metadata الأكثر أهمية لـ SEO

JSON-LD Schema: البيانات المنظمة {#json-ld-schema}

البيانات المنظمة تساعد Google على فهم محتوى صفحتك وعرضها في نتائج Rich Results. في App Router، تُضاف كـ script tag داخل layout.tsx أو page.tsx:

``typescript // components/SchemaOrg.tsx export function ArticleSchema({ post }: { post: BlogPost }) { const schema = { "@context": "https://schema.org", "@type": "Article", "headline": post.title, "description": post.description, "author": { "@type": "Person", "name": post.author.name, }, "datePublished": post.publishedAt, "image": post.image, "publisher": { "@type": "Organization", "name": "Modern Web SEO", }, }; return ( <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> ); } ``

أنواع Schema الأكثر استخداماً في المواقع التجارية

لمعرفة المزيد عن خدمات SEO التقني لدينا، راجع صفحة خدمات SEO.

sitemap.ts وrobots.ts الآليان {#sitemap-robots}

sitemap.ts

Next.js App Router يدعم توليد خريطة الموقع برمجياً:

```typescript // app/sitemap.ts import type { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> { const posts = await getAllPosts(); const postUrls = posts.map((post) => ({ url: https://modernwebseo.com/ar/blog/${post.slug}, lastModified: post.updatedAt ?? post.publishedAt, changeFrequency: 'monthly' as const, priority: 0.8, }));

return [ { url: 'https://modernwebseo.com/ar', priority: 1.0 }, { url: 'https://modernwebseo.com/ar/services', priority: 0.9 }, { url: 'https://modernwebseo.com/ar/blog', priority: 0.9 }, ...postUrls, ]; } ```

robots.ts

```typescript // app/robots.ts import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/', disallow: '/api/' }, sitemap: 'https://modernwebseo.com/sitemap.xml', }; } ```

hreflang للمواقع متعددة اللغات {#hreflang}

hreflang يُخبر Google بالنسخة اللغوية الصحيحة لكل صفحة. في generateMetadata:

``typescript alternates: { canonical: 'https://modernwebseo.com/ar/blog/nextjs-seo', languages: { 'ar': 'https://modernwebseo.com/ar/blog/nextjs-seo', 'tr': 'https://modernwebseo.com/tr/blog/nextjs-seo', 'en': 'https://modernwebseo.com/blog/nextjs-seo', 'x-default': 'https://modernwebseo.com/blog/nextjs-seo', }, }, ``

نفّذنا هذا النموذج في مشاريع متعددة عبر خدمات تصميم الويب لدينا لضمان صحة الفهرسة متعددة اللغات.

ISR والأداء {#isr-performance}

Incremental Static Regeneration يسمح لك بإعادة توليد الصفحات في الخلفية دون إيقاف الموقع:

```typescript // app/blog/[slug]/page.tsx export const revalidate = 3600; // إعادة توليد كل ساعة

// أو للصفحات الحساسة للوقت: export const revalidate = 60; // كل دقيقة ```

للصفحات التسويقية التي نبنيها في خدماتنا، نستخدم revalidate = 86400 (يوم كامل) للحد من استهلاك موارد الخادم مع الحفاظ على تحديث المحتوى.

Core Web Vitals: أهداف Lighthouse 100 {#core-web-vitals}

أهداف الأداء

تحسينات Next.js للـ Core Web Vitals

• next/image: تحسين تلقائي للصور مع lazy loading وWebP
• next/font: تحميل خطوط محلي يمنع layout shift
• next/script: تحكم دقيق في تحميل سكريبتات الطرف الثالث
• Turbopack: تجميع أسرع في وضع التطوير والبناء

جدول مقارنة Pages Router vs App Router {#مقارنة}

دليل تطبيقي خطوة بخطوة {#دليل-تطبيقي}

الخطوة 1: إعداد هيكل Metadata في layout.tsx الجذري

ابدأ بتعريف metadata افتراضية في app/layout.tsx تُطبَّق على جميع الصفحات، ثم استبدلها في كل صفحة عبر generateMetadata.

الخطوة 2: إنشاء sitemap.ts وrobots.ts

أضف الملفين إلى جذر app/ وتأكد من شمول جميع الصفحات المهمة في خريطة الموقع مع الأولويات الصحيحة.

الخطوة 3: تطبيق JSON-LD Schema في الصفحات المناسبة

أضف Schema للمقالات في صفحات المدونة، وSchema للأعمال المحلية في الصفحة الرئيسية، وSchema للأسئلة الشائعة في الصفحات التي تحتوي FAQ.

الخطوة 4: إعداد hreflang في المواقع متعددة اللغات

استخدم حقل alternates.languages في generateMetadata لكل صفحة، مع التأكد من وجود x-default يشير إلى النسخة الافتراضية.

الخطوة 5: قياس وتحسين Core Web Vitals

استخدم Lighthouse CI في CI/CD pipeline لمنع تراجع الأداء قبل النشر. راجع صفحة المحفظة لأمثلة على مواقع حققت Lighthouse 100.

الخطوة 6: مراقبة مستمرة عبر Search Console

ربط الموقع بـ Google Search Console ومراقبة تقارير Core Web Vitals وأخطاء الزحف وصحة الفهرسة أسبوعياً. تواصل مع فريقنا إذا احتجت مساعدة في إعداد التقارير.

الأسئلة الشائعة {#أسئلة-شائعة}

ما الفرق بين metadata الثابتة وgenerateMetadata الديناميكية؟ metadata الثابتة تُصدَّر ككائن JavaScript ثابت وتُحسب في وقت البناء فقط. generateMetadata هي دالة غير متزامنة تُنفَّذ في كل طلب أو عند revalidation، مما يتيح جلب بيانات من قاعدة البيانات أو API وتضمينها في الـ metadata. للصفحات الثابتة مثل الصفحة الرئيسية، استخدم النوع الثابت. للمقالات والمنتجات، استخدم generateMetadata.

هل يدعم Next.js 15 OG images الديناميكية؟ نعم، عبر ملفات opengraph-image.tsx داخل مجلد كل route. يستخدم Vercel OG مكتبة @vercel/og لتوليد صور PNG ديناميكياً من مكونات React مع دعم الخطوط والتخطيطات المخصصة. الصور تُولَّد في Edge Runtime لأسرع استجابة.

كيف أتحقق من صحة JSON-LD Schema الخاص بي؟ استخدم أداة Rich Results Test من Google على عنوان schema.org/richresults أو Google Search Console. يمكنك أيضاً استخدام validator.schema.org للتحقق من صحة البنية. تأكد من اختبار كل نوع schema بشكل منفصل.

هل أحتاج إلى مكتبة next-seo في App Router؟ لا. next-seo مصمّمة أساساً لـ Pages Router. App Router يوفر generateMetadata API مدمجة تغني عن أي مكتبة خارجية. الانتقال إلى next-seo في App Router يضيف تعقيداً غير ضروري.

ما الفرق بين canonical وalternates.canonical؟ في App Router، تستخدم alternates.canonical داخل كائن Metadata لتحديد URL الكانوني للصفحة. هذا يمنع Google من فهرسة نسخ متعددة من نفس المحتوى (مثل الصفحات مع query parameters). تأكد من أن canonical يشير إلى الـ URL الأساسي الصحيح.

كيف تؤثر ISR على SEO؟ ISR (Incremental Static Regeneration) يوفر أفضل ما في SSG (أداء عالٍ) وSSR (محتوى محدّث) في آن واحد. الصفحة تُولَّد وتُخزَّن مؤقتاً ثم تُجدَّد في الخلفية بعد انتهاء وقت revalidate. Google تُفضّل الصفحات السريعة التحميل، وISR يضمن ذلك مع تحديث المحتوى تلقائياً.

هل يجب تحسين sitemap.xml يدوياً؟ مع sitemap.ts في App Router، لا حاجة للتحديث اليدوي. الملف يُولَّد تلقائياً من قاعدة بياناتك أو نظام إدارة المحتوى. المهم تحديد priority و changeFrequency بشكل واقعي — لا تضع priority: 1.0 لجميع الصفحات لأن Google تتجاهل ذلك.

كيف أُنفّذ hreflang في موقع متعدد اللغات؟ في generateMetadata، استخدم حقل alternates.languages لتحديد جميع الترجمات المتاحة. تأكد من أن كل صفحة في كل لغة تشير إلى النسخ الأخرى (bidirectional hreflang). أضف x-default يشير عادةً إلى النسخة الإنجليزية أو الافتراضية لجمهور لم يُحدَّد لهم لغة بعينها.

الخلاصة {#الخلاصة}

Next.js 15 App Router يوفر أدوات SEO تقنية متكاملة: generateMetadata للبيانات الوصفية، sitemap.ts وrobots.ts للزحف، JSON-LD للبيانات المنظمة، وhreflang للمواقع متعددة اللغات. تطبيق هذه الطبقات بشكل صحيح يضع موقعك في موقع تنافسي قوي في نتائج البحث.

إذا كنت تبني موقعاً بـ Next.js وتريد التأكد من تطبيق أفضل ممارسات SEO من اليوم الأول، تواصل مع فريق SEO التقني لدينا للحصول على تدقيق مجاني. احصل على عرض مجاني ←