ربط الصفحات وتسريع الموقع وتجهيزه لمحركات البحث (Next.js & SEO)
كيف يظهر موقعك في بحث جوجل وكيف تظهر بطاقته الترحيبية عند مشاركة الرابط في واتساب؟
ماذا ستتعلم وتنجز في هذه الجلسة؟ (اضغط للعرض)▼
- تحقيق نتيجة 95+ في مؤشرات أداء Google Lighthouse
النشاط 01: إعداد وسوم الميتا ومشاركة السوشيال ميديا (Metadata & OpenGraph)
اجعل رابط موقعك يظهر بصورة جذابة وعنوان أنيق عند مشاركته في واتساب وتويتر ولينكد إن
أكتب كائن metadata في Next.js متضمناً العنوان، الوصف، الكلمات المفتاحية، وصورة المعاينة openGraph image.
الروابط التي تظهر بدون صورة أو وصف تبدو كروابط مشبوهة ويتجاهلها الناس، بينما البطاقة الأنيقة تضاعف النقرات 5 أضعاف.
2. خطوات التنفيذ خطوة بخطوة:
صدّر كائن metadata في app/layout.tsx أو app/page.tsx.
حدد title جذاب ووصف description دقيق لا يتجاوز 160 حرفاً.
حدد openGraph مع رابط صورة مقاس 1200x630 بكسل.
معاينة تواصل اجتماعي احترافية تظهر صورة وعنوان الموقع فور لصق الرابط.
📄 قالب البداية أو الكود المساعد (اضغط للعرض أو النسخ)▼
export const metadata: Metadata = {
title: 'برجر زون | أفضل وجبات سريعة في المدينة',
description: 'اطلب ألذ شطائر البرجر الطازجة مع توصيل سريع حتى باب بيتك خلال 20 دقيقة.',
openGraph: {
title: 'برجر زون | طعم لا يقاوم',
description: 'خصم 20% على طلبك الأول عبر الموقع الرسمي.',
url: 'https://burgerzone.dev',
images: [{ url: '/banner.jpg', width: 1200, height: 630 }],
locale: 'ar_SA',
},
};تلميحات مساعدة (1)▼
- • 💡 استخدم موقع opengraph.xyz لفحص بطاقة المعاينة والتأكد من ظهورها في كل الشبكات.
4. مساحة الحل وتسليم النتيجة عبر واتساب
اكتب إجابتك أو الكود أو رابط عملك في الصندوق أدناه. تُحفظ مسودتك تلقائيًا في متصفحك، وعند الضغط على «إرسال النتيجة عبر واتساب» سيتم حفظ الإجابة في سجل تقدمك وفتح رسالة واتساب جاهزة لإرسالها للمدرب (+90 538 201 50 72).