دليل السيو - الخطوة 5: تجربة المستخدم (UX)

هذه الخطوة 5 من دليل السيو المكوّن من 13 خطوة. Google تقيس جودة التفاعل — المواقع البطيئة وغير المستقرة تخسر تصنيفها.

يقيّم Google الموقع ليس فقط بالمحتوى، بل أيضاً بكيفية تفاعل المستخدمين معه. معدل الارتداد المرتفع، وقت البقاء القصير، والنقرات العكسية كلها إشارات سلبية. تحسين تجربة المستخدم يحسّن كل من التصنيف ومعدل التحويل.

1. Core Web Vitals

المقاييس الثلاثة الأساسية التي يقيسها Google:

| المقياس | ما يقيسه | الحد الجيد | الحد السيئ | |---|---|---|---| | LCP | سرعة تحميل أكبر عنصر | < 2.5 ثانية | > 4 ثانية | | CLS | استقرار التصميم المرئي | < 0.1 | > 0.25 | | INP | استجابة التفاعل | < 200ms | > 500ms |

تحسين LCP

ضغط الصور (WebP/AVIF)
تحميل CSS الحرج أولاً (Critical CSS)
للصور الكبيرة
CDN للملفات الثابتة
تقليل حظر العرض (render-blocking resources)

تحسين CLS

<!-- دائماً حدد أبعاد الصور -->
<img src="photo.jpg" width="800" height="600" alt="..." />

<!-- احجز مساحة للإعلانات -->
<div style="min-height: 250px;"><!-- إعلان --></div>

<!-- استخدم font-display -->
<style>
@font-face { font-display: swap; }
</style>

تحسين INP

تقسيم المهام الطويلة (Long Tasks > 50ms)
استخدام requestAnimationFrame للرسوم المتحركة
will-change للعناصر المتحركة
تأجيل JavaScript غير الضروري

2. تحسين الهاتف المحمول

أكثر من 60% من عمليات البحث تتم من الهاتف. Google يستخدم Mobile-First Indexing.

قائمة التحقق

| العنصر | المطلوب | |---|---| | Viewport meta | width=device-width, initial-scale=1 | | أحجام النصوص | ≥ 16px للنص الأساسي | | أهداف اللمس | ≥ 44×44px | | المسافات بين العناصر | ≥ 8px | | بدون تمرير أفقي | 100% عرض الشاشة | | محتوى متطابق | نفس المحتوى على الهاتف والحاسوب |

أنماط التصميم المتجاوب

/* Mobile-first approach */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 1200px; }
}

3. إمكانية الوصول (Accessibility)

إمكانية الوصول ليست فقط التزاماً أخلاقياً — بل هي عامل ترتيب. المواقع غير القابلة للوصول تفقد شريحة كبيرة من المستخدمين.

الأساسيات

بنية عناوين صحيحة (H1 → H2 → H3)
نص بديل (alt) لجميع الصور
تباين ألوان كافٍ (نسبة 4.5:1 على الأقل)
تنقل بلوحة المفاتيح
تسميات ARIA للعناصر التفاعلية
لتعريف اللغة

أدوات الفحص

Lighthouse Accessibility audit
axe DevTools
WAVE Web Accessibility Evaluator

4. الإشارات السلوكية

| الإشارة | ما تعنيه | كيف تحسّنها | |---|---|---| | معدل الارتداد | مغادرة بدون تفاعل | محتوى جذاب + سرعة | | وقت البقاء | مدة الزيارة | محتوى مفيد + وسائط متعددة | | الصفحات/الزيارة | عمق التصفح | روابط داخلية + محتوى ذو صلة | | النقرة العكسية | العودة لنتائج البحث | تلبية نية البحث | | CTR | معدل النقر | عناوين جذابة + rich snippets |

5. سرعة التحميل

كل ثانية تأخير = -7% تحويل = -11% مشاهدات صفحة

استراتيجيات السرعة

الخادم: Time to First Byte < 200ms
الشبكة: CDN + HTTP/2 + ضغط Brotli
الأصول: تحسين الصور + تصغير CSS/JS
العرض: Critical CSS + defer JS
التخزين: Cache-Control headers

6. تحسين النماذج والتحويل

النماذج هي نقطة التحويل الحاسمة:

تقليل عدد الحقول (الضروري فقط)
تقسيم النماذج الطويلة إلى خطوات
رسائل خطأ واضحة ومحددة
أنواع حقول مناسبة (type="email", type="tel")
زر إرسال واضح ومرئي
ملء تلقائي عبر autocomplete

7. قياس تجربة المستخدم

أدوات Google المجانية

| الأداة | البيانات | الاستخدام | |---|---|---| | PageSpeed Insights | CWV + اقتراحات | تحسين سرعة الصفحة | | Search Console | CWV حقيقي | مراقبة الأداء | | Chrome UX Report | بيانات ميدانية | مقارنة بالمنافسين | | Lighthouse | تدقيق شامل | تحسين تقني |

القائمة السريعة

[ ] Core Web Vitals في المنطقة الخضراء (LCP<2.5s, CLS<0.1, INP<200ms)
[ ] الهاتف المحمول مُحسّن (أهداف لمس ≥44px)
[ ] جميع الصور لها width/height
[ ] إمكانية الوصول (تباين + alt + عناوين)
[ ] سرعة التحميل < 3 ثوانٍ
[ ] لا يوجد تمرير أفقي على الهاتف
[ ] النماذج بسيطة وواضحة

الخطوة التالية: الخطوة 6: المراقبة والترتيب — كيف تتابع تصنيفاتك وتكتشف المشاكل مبكراً.

أطلق تدقيق SEO مجاني وتحقق من أداء تجربة المستخدم في موقعك.

دليل السيو - الخطوة 5: تجربة المستخدم — إشارات السلوك التي تحدد ترتيبك