بطبّق نصيحتي
على نفسي.
خبير السيو والذكاء الاصطناعي ماطبّقش نفس المعايير دي على موقعه هو مش Expert — هو بائع. الصفحة دي بتوثّق كل قرار تقني وراء abdallahmekky.com، مع السبب وراء كل واحد.
آخر تحديث: يونيو 2026
أهداف الأداء
الصور الرئيسية preloaded، من غير موارد مانعة للـrendering
حد أدنى من جافاسكريبت جانب العميل، من غير معالجات أحداث ثقيلة
كل الصور ليها أبعاد صريحة، الخطوط مستضافة ذاتيًا
Vercel Edge، تخزين مؤقت ISR، من غير cold-start SSR على الروابط الشائعة
تقسيم كود لكل رابط، RSC بيقلل حمل الـhydration
الأداء، إمكانية الوصول، أفضل الممارسات، السيو — الأربعة
كل أداة. وكل سبب.
الـFramework والـRendering
3 أدواتApp Router، RSC، استراتيجية rendering مخصصة لكل رابط (SSR/SSG/ISR). تحكم دقيق في بالظبط أي HTML بوتات البحث بتستقبله.
Server Components بتقلل جافاسكريبت من جانب العميل للحد الأدنى الضروري — INP أحسن، حمل hydration أقل.
أمان الأنواع عبر كل الـcomponents والـmetadata وكائنات البيانات المنظمة. بيمنع فئة الأخطاء وقت التشغيل اللي بتكسر الـHTML المُرندر.
التصميم والستايل
3 أدواتCSS بصفر تكلفة وقت التشغيل. بيتنقّى وقت البناء — من غير أنماط غير مستخدمة في الإنتاج. بيدعم نظام رموز التصميم المخصص بشكل نظيف.
أنيميشن FadeIn مبني على التمرير. كل الأنيميشن بيحترم prefers-reduced-motion ومش بيمنع الـrendering.
الخطوط والطباعة
3 أدواتخط serif عالي التباين بشخصية قوية للنصوص الكبيرة. مستضاف ذاتيًا عن طريق next/font — صفر FOUT، صفر طلب خارجي.
محايد وسهل القراءة جدًا في الأحجام الصغيرة. محسّن لـrendering الشاشة عبر كل قيم DPR.
مستخدم لـURL slugs، عينات الكود، والمعرّفات التقنية. تمييز حروف واضح في الأحجام الصغيرة.
البنية التحتية والاستضافة
3 أدواتشبكة حافة بتحديث ISR تلقائي. TTFB أقل من 200ms عالميًا. دعم أصلي لـNext.js من غير أي تكلفة إعداد إضافية.
Core Web Vitals متقاسة من جلسات مستخدمين حقيقيين عبر أنواع أجهزة مختلفة — مش بيانات معملية اصطناعية.
السيو والبيانات المنظمة
5 أدواتكل نوع صفحة عنده Schema.org markup مناسب — Person، WebPage، Article، FAQPage، DefinedTermSet. متسلّم من جانب السيرفر في <head>.
metadata مرندرة من جانب السيرفر — العنوان، الوصف، canonical، Open Graph، Twitter Card — مولّدة بشكل ثابت لكل رابط وقت البناء.
ملف نصي بسيط في جذر الدومين بيوجّه بوتات الذكاء الاصطناعي (GPTBot، Google-Extended، PerplexityBot) للصفحات المهمة وبعيد عن المحتوى الضعيف.
مضبوط بشكل منفصل لبوتات البحث وبوتات الذكاء الاصطناعي. Noindex مطبّق على صفحات الأدوات ونسخ المعاملات.
مقدَّمة لـGoogle Search Console بقيم lastmod وpriority وchangefreq دقيقة. مقسّمة حسب نوع المحتوى.
الأدوات والجودة
3 أدواتإعداد Next.js بقواعد صارمة. بيلتقط مشاكل إمكانية الوصول (jsx-a11y)، الاستيرادات الغير مستخدمة، وأخطاء الأنواع وقت التطوير.
كل التغييرات متتبّعة. معاينات Vercel بتنشر مع كل push — كل PR بياخد رابط مطابق للإنتاج للاختبار عليه.
مقصودة بشكل افتراضي
من غير CSS-in-JS
صفر حقن أنماط وقت التشغيل. Tailwind بيولّد CSS ثابت وقت البناء — من غير منع rendering إضافي، من غير خطر تعارض hydration، من غير عقوبة جافاسكريبت للتنسيق.
Server Components افتراضيًا
كل الصفحات React Server Components إلا لو التفاعلية مطلوبة. ده بيخلي حزم الجافاسكريبت صغيرة وHTML قابل للتحليل فورًا من بوتات البحث وبوتات الذكاء الاصطناعي.
خطوط مستضافة ذاتيًا بس
كل خط بيتقدّم من الدومين ده عن طريق next/font. صفر طلبات خطوط من طرف تالت معناه صفر FOUT، صفر تكلفة اتصال إضافية، وصفر مكالمات خارجية بتسرّب خصوصية.
بيانات منظمة في كل صفحة
JSON-LD مولّد من جانب السيرفر لكل رابط. صفر حقن من جانب العميل معناه إن البيانات المنظمة متاحة فورًا للبوتات من غير تنفيذ جافاسكريبت.
الوضع الداكن عن طريق متغيرات CSS
نظام رموز متغيرات CSS بيقود لوحة الألوان كلها. الوضع الداكن بيبدّل طبقة الرموز — صفر تكرار، تبديل فوري من غير Flash of Unstyled Content.
إمكانية الوصول كأساس
HTML دلالي في كل حتة. تسميات ARIA على كل العناصر التفاعلية. إدارة تركيز في الـcomponents التفاعلية. تباين ألوان بيطابق WCAG AA عبر الوضعين.
"أحسن دليل توظّف خبير السيو والذكاء الاصطناعي هو تشوف بيعمل إيه في موقعه هو. لو بياخد 4 ثواني يحمّل ومفيهوش بيانات منظمة، دوّر على غيره."
— عبدالله مكيالـstack بتاعك. مدقّق صح.
سواء بتشتغل على Next.js أو Laravel أو ووردبريس أو stack مؤسسي مخصص — نفس الدقة الهندسية بتنطبق. التدقيق التقني بيبدأ بفهم بنيتك التحتية.