دليل السيو - الخطوة 9: تحسين التصميم

هذه الخطوة 9 من دليل السيو المكوّن من 13 خطوة. أين تضع العناصر يؤثر على الترتيب والتحويل أكثر مما يبدو.

---

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

1. المحتوى فوق خط الطي

الشاشة الأولى (بدون تمرير) تحدد إذا كان المستخدم سيبقى أم سيغادر. 57% من وقت المستخدمين يُقضى فوق خط الطي.

العناصر الضرورية في الشاشة الأولى

• عنوان H1 مع القيمة الأساسية
• زر CTA الرئيسي
• وصف مختصر (ما الموقع/المنتج)
• عنصر بصري (صورة أو فيديو)
• التنقل

ما يجب تجنبه

• سلايدرات ضخمة بدون محتوى
• فيديو يعمل تلقائياً
• نوافذ منبثقة عند التحميل
• خيارات كثيرة جداً

2. استراتيجية موضع CTA

| القاعدة | الوصف | |---|---| | الشاشة الأولى | CTA مرئي بدون تمرير | | التكرار | تكرار CTA كل 3-4 شاشات | | الختام | CTA في نهاية كل صفحة | | الهاتف | زر ثابت في أسفل الشاشة |

أفضل المواضع (بناءً على خرائط الحرارة)

• سطح المكتب: الزاوية العلوية اليمنى > مركز الشاشة الأولى > أعلى الشريط الجانبي
• الهاتف: مركز الشاشة الأولى > شريط سفلي ثابت > بعد المحتوى

3. أنماط التصميم للهاتف

منطقة الإبهام

معظم المستخدمين يمسكون الهاتف بيد واحدة. المنطقة المريحة:

• سهل: الجزء السفلي المركزي من الشاشة
• عادي: منتصف الشاشة
• صعب: الزاوية العلوية اليسرى

العناصر التفاعلية الأساسية يجب أن تكون في النصف السفلي.

قائمة تحقق الهاتف

• مساحة نقر ≥ 44×44 بكسل
• مسافات كافية بين العناصر
• بدون تمرير أفقي
• أكورديون للمحتوى الطويل
• أنواع حقول إدخال مناسبة

4. أنماط مسح الصفحة

نمط F (الصفحات النصية)

العين تتحرك: أفقياً في الأعلى → أفقياً أسفل → عمودياً على الحافة اليمنى (للعربية)

نمط Z (الصفحات البصرية)

العين تتحرك: أعلى يمين → أعلى يسار → قطرياً → أسفل يمين → أسفل يسار

التطبيق

• الكلمات المفتاحية والعناوين في "المناطق الساخنة"
• مرساة بصرية (أيقونات، صور) لإيقاف النظر
• CTA على مسار حركة العين الطبيعي

5. CLS واستقرار التصميم

Cumulative Layout Shift (CLS) — مقياس Google لقياس "قفز" العناصر:

<!-- دائماً حدد الأبعاد -->
<img src="banner.jpg" width="1200" height="400" alt="..." />

<!-- احجز مساحة للمحتوى الديناميكي -->
<div style="min-height: 90px;"><!-- إعلان --></div>

<!-- font-display للخطوط -->
@font-face { font-display: swap; }

الهدف: CLS < 0.1

6. تحسين التحويل

التسلسل الهرمي البصري

1. الحجم — الأهم = الأكبر
2. اللون — CTA بلون متباين
3. المساحة البيضاء — تركيز حول العناصر الرئيسية
4. الاتجاه — أسهم/نظرات نحو CTA

عناصر الثقة

| العنصر | أفضل موضع | التأثير | |---|---|---| | شعارات العملاء | تحت الشاشة الأولى | +15% ثقة | | التقييم/المراجعات | بجانب CTA | +12% تحويل | | الضمانات | تحت CTA | +11% نقرات | | الأمان | بجانب نموذج الدفع | +8% إتمام |

7. نموذج صفحة عالية التحويل

[تنقل — مبسّط]
[بطل: H1 + عنوان فرعي + CTA + عناصر ثقة]
[دليل اجتماعي]
[المشكلة → الحل]
[الميزات / المزايا]
[مراجعات / دراسات حالة]
[الأسعار]
[أسئلة متكررة]
[CTA نهائي]
[تذييل — مختصر]

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

• [ ] H1 و CTA مرئيان في الشاشة الأولى
• [ ] أزرار الهاتف ≥ 44×44 بكسل
• [ ] جميع الصور لها width/height (CLS<0.1)
• [ ] CTA يتكرر كل 3-4 شاشات
• [ ] الإجراءات الأساسية في منطقة الإبهام
• [ ] عناصر الثقة بجانب CTA
• [ ] لا يوجد فيديو يعمل تلقائياً

---

الخطوة التالية: الخطوة 10: السيو متعدد اللغات — كيف تصل للجمهور العالمي دون فقدان المواقع.

أطلق تدقيق SEO مجاني وتحقق من تقييم تصميم موقعك.