الهدف
بعد هالدرس تقدر تضيف metadata كاملة لكل صفحة في Next.js، تولّد OG images ديناميكية بـ ImageResponse، وتبني sitemap.xml وrobots.txt — كل اللي يحتاجه Google و Twitter عشان يعرضون تطبيقك بشكل صح.
ليش هذا الحين؟
الـ background jobs جاهزة. الحين نتأكد إن اللي تبنيه يلاقيه الناس. ترى أغلب المطورين يأجلون الـ SEO لآخر لحظة — وهذا خطأ. كل يوم بدون metadata = أيام ضايعة من الـ indexing. Google يحتاج وقت يـ crawl الموقع، فكل ما ضفت الـ metadata بدري، الـ traffic المجاني يبدأ أسرع.
الفكرة
ليش SEO مهم لـ SaaS مستقل؟
الـ paid ads مكلفة وتوقف لما تخلص الميزانية. الـ SEO traffic مجاني، يزيد مع الوقت، وما يحتاج تدفع كل شهر. وايد مؤسسين يبنون أداتهم وما يفكرون في الـ SEO إلا لما يكتشفون إن ما عندهم مستخدمين — المفروض تبدأ من اليوم الأول.
Metadata في Next.js App Router:
layout.tsx (site-wide defaults)
└── page.tsx (per-page override)
كل page.tsx يقدر يـ export metadata object أو generateMetadata() function (للـ dynamic pages).
OG Image:
الـ Open Graph image هو اللي يظهر لما تشارك رابط على X أو LinkedIn أو WhatsApp. Next.js يولّده بـ ImageResponse — JSX تحوّله صورة PNG. مو static image، ديناميكي حسب الـ page.
Sitemap:
ملف XML يقول لـ Google كل صفحات موقعك. بدونه، يمكن تفوته صفحات مهمة — خصوصا اللي ما فيها links من صفحات ثانية.