موقع ويب Strapi CMS + Next.js ببنية متقدمة لتحسين محركات البحث

قمنا ببناء بنية Strapi + Next.js لا مركزية (headless) مع طبقة نمذجة محتوى مرنة في Strapi، وواجهة أمامية لـ Next.js مولدة بشكل ثابت (statically generated) مع ISR لتحديثات شبه فورية، ونظام SEO شامل يغطي التحسينات التقنية وعلى الصفحة وبيانات Structured Data.

البنية

• نظام إدارة المحتوى (CMS): Strapi (مستضاف ذاتيًا) بأنواع محتوى مخصصة ومناطق ديناميكية (Dynamic Zones)
• الواجهة الأمامية (Frontend): Next.js مع App Router و React Server Components و TypeScript
• التصميم (Styling): Tailwind CSS مع رموز نظام التصميم
• طبقة SEO: Next.js Metadata API ومولدات JSON-LD وخريطة موقع/robots.txt آلية
• الوسائط: مكتبة وسائط Strapi مع موفر Cloudinary للتسليم الأمثل
• الاستضافة: Vercel (للواجهة الأمامية)، وواجهة خلفية Strapi مستضافة سحابيًا، و Cloudinary (شبكة توصيل المحتوى للوسائط CDN)
• قاعدة البيانات: PostgreSQL لتخزين محتوى Strapi
• التخزين المؤقت (Cache): ISR مع إعادة التحقق عند الطلب عبر Strapi webhooks

نمذجة المحتوى في Strapi

أنواع المحتوى

تم هيكلة نظام إدارة المحتوى (CMS) حول أنواع المحتوى التي تغطي جميع احتياجات العمل: صفحات التسويق، منشورات المدونة مع الفئات والمؤلفين، صفحات الحملات المقصودة، عروض الخدمة/المنتجات، السير الذاتية لأعضاء الفريق، الأسئلة المتكررة (FAQs)، الشهادات، وإعدادات عامة (singleton) لتكوين الموقع بالكامل.

المناطق الديناميكية (Dynamic Zones) (منشئ الصفحات)

تسمح Strapi Dynamic Zones للمحررين بإنشاء محتوى الصفحة من مكونات قابلة لإعادة الاستخدام — حيث يتم ربط كل إدخال منطقة بمكون React على الواجهة الأمامية. تتضمن الكتل المتاحة الأقسام البارزة (heroes)، وشبكات الميزات (feature grids)، وتخطيطات النص مع الصورة، وأقسام الشهادات، ولافتات الدعوة إلى الإجراء (CTA banners)، وأكورديونات الأسئلة المتكررة (FAQ accordions)، وعدادات الإحصائيات، وجداول الأسعار، وشبكات الشعارات، والتضمينات (embeds)، وأبرز المدونات، ونماذج الاتصال — لتغطية جميع أنماط صفحات التسويق الشائعة.

مكون SEO (قابل لإعادة الاستخدام)

يوفر مكون SEO مشترك، مرفق بكل نوع محتوى، حقولاً لـ meta title مخصص، و meta description، وتجاوز URL الكنسي (canonical URL override)، وصورة Open Graph، وتوجيهات الفهرسة (indexing directives)، والكلمة المفتاحية المستهدفة (focus keyword)، وتجاوز اختياري للبيانات المنظمة (structured data override) — مما يضمن إدارة متسقة لتحسين محركات البحث عبر جميع المحتوى.

بنية الواجهة الأمامية لـ Next.js

هيكل المكونات

تتبع الواجهة الأمامية بنية طبقية:

• مكونات الكتل (Block components) تتوافق مباشرة مع إدخالات Strapi Dynamic Zone
• عناصر واجهة المستخدم الأساسية (UI primitives) توفر عناصر نظام تصميم متناسقة
• مكونات التخطيط (Layout components) تتعامل مع الرأس والتذييل والتنقل
• أدوات SEO المساعدة (SEO utilities) تولد بيانات منظمة وعلامات وصفية (meta tags)

يقوم محرك عرض Dynamic Zone مركزي بالتكرار عبر مصفوفة الكتل من Strapi ويعرض مكون React المقابل لكل إدخال.

استراتيجية جلب البيانات

تستخدم جميع المسارات Incremental Static Regeneration (ISR) مع إعادة التحقق عند الطلب (on-demand revalidation) التي يتم تشغيلها بواسطة Strapi webhooks. عندما يقوم محرر بنشر أو تحديث محتوى، يقوم Strapi بإطلاق webhook يقوم بتشغيل إعادة التحقق للصفحة المتأثرة المحددة، مما يضمن ظهور التحديثات مباشرة في غضون ثوانٍ دون الحاجة إلى إعادة بناء كاملة.

تنفيذ SEO

SEO التقني

• البيانات الوصفية لكل صفحة (Per-page metadata) — يتم إنشاء Title و description و canonical URL و Open Graph و Twitter Card tags من حقول SEO في Strapi مع خيارات احتياطية ذكية
• خريطة موقع آلية (Automated sitemap) — يتم إنشاؤها برمجيًا من جميع المحتويات المنشورة مع قيم تردد التغيير والأولوية المناسبة
• Robots.txt — إنشاء حساس للبيئة (الإنتاج يسمح بالزحف، بيئة الاختبار تمنعه)
• Canonical URLs — يتم إنشاؤها تلقائيًا مع تطبيع الشرطة المائلة اللاحقة (trailing slash normalization)، ويمكن تجاوزها من نظام إدارة المحتوى (CMS)

البيانات المنظمة (Structured Data) (JSON-LD)

يغطي إنشاء المخطط الآلي ما يلي:

• المؤسسة (Organization) — مخطط على مستوى الموقع من الإعدادات العامة
• المقالة (Article) — منشورات المدونة مع العنوان والمؤلف والتواريخ والناشر
• الأسئلة المتكررة (FAQ) — يتم إنشاؤها تلقائيًا عند استخدام كتل الأسئلة المتكررة في الصفحة
• مسار التنقل (Breadcrumb) — يتم إنشاؤها تلقائيًا من تسلسل مسار URL
• الخدمة (Service) — صفحات الخدمة مع المزود والمنطقة التي يتم خدمتها
• الأعمال المحلية (Local Business) — اختياري، للشركات ذات المواقع الفعلية

تحسين محركات البحث للأداء (Core Web Vitals)

• LCP — صور Hero يتم تحميلها مسبقًا، تنسيق Cloudinary التلقائي (WebP/AVIF)، CSS الحيوي مضمن، React Server Components تقضي على JavaScript الزائد من جانب العميل
• CLS — أبعاد صور واضحة من مكتبة الوسائط، تحميل خطوط محسّن مع size-adjust، عناصر نائبة للهيكل (skeleton placeholders)، حاويات تضمين ثابتة الأبعاد
• INP — الحد الأدنى من JavaScript من جانب العميل، معالجات تفاعلية خفيفة الوزن، تقسيم الكود لكل مسار

أدوات SEO على الصفحة

يتضمن نظام إدارة المحتوى (CMS) إرشادات للمحررين مع مؤشرات عدد الأحرف لحقول البيانات الوصفية (meta fields)، والتحقق من الحقول المطلوبة لضمان عدم نشر أي صفحة بدون بيانات وصفية لتحسين محركات البحث (SEO metadata)، والتعبئة التلقائية لحقول SEO من عناوين المحتوى والمقتطفات مع خيارات التجاوز اليدوي.

خط أنابيب الوسائط

يتم تخزين الصور التي يتم تحميلها إلى Strapi على Cloudinary CDN، حيث تطلب الواجهة الأمامية لـ Next.js نسخًا محسّنة مع تحديد التنسيق التلقائي، وتغيير الحجم المتجاوب، والتخزين المؤقت عند الحافة (edge caching)، والتحميل الكسول (lazy loading) مع عناصر نائبة ضبابية (blur placeholders) للتحميل ذي الأولوية فوق الطية (above-fold).

الميزات الرئيسية

1. منشئ الصفحات بالمناطق الديناميكية (Dynamic Zone Page Builder) — أكثر من 12 كتلة قابلة للتركيب لإنشاء صفحات بدون الحاجة لمطور
2. مكون SEO قابل لإعادة الاستخدام — مرفق بكل نوع محتوى لإدارة البيانات الوصفية المتسقة
3. بيانات منظمة آلية (Automated Structured Data) — JSON-LD للمؤسسة (Organization)، المقالة (Article)، الأسئلة المتكررة (FAQ)، مسار التنقل (Breadcrumb)، الخدمة (Service)
4. ISR + Webhooks — تحديثات المحتوى فورية في ثوانٍ بدون إعادة بناء كاملة
5. خريطة موقع برمجية (Programmatic Sitemap) — يتم إنشاؤها تلقائيًا من جميع محتوى Strapi المنشور
6. خط أنابيب الوسائط Cloudinary — تنسيق تلقائي، تغيير حجم متجاوب، تسليم عبر CDN
7. مُحسّن لـ Core Web Vitals — React Server Components، تحميل مسبق للصور، تحسين الخطوط، الحد الأدنى من JavaScript
8. معاينة المسودة (Draft Preview) — زر معاينة Strapi يعرض المحتوى المسود في Next.js قبل النشر
9. جاهز لـ i18n — دعم Strapi المدمج للتدويل (internationalization) للتوسع المستقبلي متعدد اللغات
10. إرشادات للمحررين (Editor Guardrails) — عداد الأحرف، الحقول المطلوبة، وتوجيه الكلمات المفتاحية في لوحة تحكم Strapi