SEO والتصميم المتجاوب

💡 المواضيع الرئيسية:

Metadata API لـ SEO، generateMetadata لل dinamikus صفحات، صور Open Graph، التصميم المتجاوب مع نقاط توقف Tailwind، تحسين next/image.

💡 خصائص Metadata:

title مع نمط القالب، description لمقتطفات البحث، keywords لمحركات البحث، openGraph للمشاركة الاجتماعية، canonical لمنع المحتوى المكرر.

💡 نمط generateMetadata:

صدّر دالة غير متزامنة تجلب بيانات المقال وترجع كائن metadata مع العنوان والوصف وصور openGraph من المقال.

💡 توليد صور OG:

استخدم app/api/og/route.js مع ImageResponse، مرر العنوان والعنوان الفرعي كمعلمات URL، أعد صورة 1200x630.

💡 نقاط توقف Tailwind:

sm: الأجهزة الصغيرة، md: الأجهزة اللوحية، lg: أجهزة الحاسوب المحمولة، xl: الشاشات الكبيرة.

💡 ميزات الصور:

التحميل الكسول التلقائي، تحويل الصيغة إلى WebP/AVIF، خاصية الأحجام المتجاوبة، placeholder ضبابي، الأولوية للصور فوق السطر.

💡 إضافات SEO:

sitemap.js يولد خريطة XML، robots.js ينشئ robots.txt، JSON-LD يوفر بيانات منظمة لمحركات البحث.