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

لقد قمنا ببناء بنية Strapi + Next.js بدون واجهة أمامية (headless architecture) مع طبقة نمذجة محتوى مرنة في Strapi، وواجهة أمامية (frontend) تم إنشاؤها بشكل ثابت باستخدام Next.js مع ISR لتحديثات شبه فورية، ونظام شامل لتحسين محركات البحث (SEO) يغطي التحسين الفني وداخلي الصفحة والبيانات المهيكلة.

البنية

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

نمذجة محتوى Strapi

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

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

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

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

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

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

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

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

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

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

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

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

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

تنفيذ SEO

SEO التقني

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

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

يشمل إنشاء المخطط التلقائي ما يلي:

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

أداء SEO (Core Web Vitals)

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

أدوات SEO داخل الصفحة

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

مسار الوسائط

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

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

1. منشئ صفحات المناطق الديناميكية (Dynamic Zone Page Builder) — أكثر من 12 كتلة قابلة للتركيب لإنشاء الصفحات بدون تدخل مطور
2. مكون SEO قابل لإعادة الاستخدام — مرفق بكل نوع محتوى لإدارة البيانات الوصفية (meta) بشكل متسق
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 — مكونات الخادم (Server Components)، التحميل المسبق للصور، تحسين الخطوط، الحد الأدنى من JS
8. معاينة المسودة (Draft Preview) — زر معاينة Strapi يعرض المحتوى المسود في Next.js قبل النشر
9. جاهز للـ i18n — دعم Strapi المدمج للتدويل (internationalization) للتوسع المستقبلي متعدد اللغات
10. إرشادات المحرر (Editor Guardrails) — تعداد الأحرف، الحقول المطلوبة، وتوجيه الكلمات المفتاحية في لوحة تحكم Strapi