اختبار الموقع على الجوال: هل صفحتك جاهزة للهواتف؟

تؤرشف جوجل النسخة المحمولة من صفحاتك. وبعد اكتمال الأرشفة بحسب الجوال أولًا (mobile-first indexing) أصبح Googlebot الخاص بالهواتف الذكية هو الزاحف الذي يقرر ما يُؤرشف، فالصفحة التي لا تعمل إلا على شاشة سطح المكتب لديها مشكلة مع البحث ومع معظم زوارها.

أوقفت جوجل أداتها Mobile-Friendly Test في 1 ديسمبر 2023. ويسد اختبار التوافق هذا الفراغ بفحوص ثابتة لشيفرة الصفحة: وسم viewport، وCSS المتجاوب مع media queries، والعناصر ذات العرض الثابت، وحجم الخط الأساسي المقروء، وتلميحات أهداف اللمس، والصور المتجاوبة، والإضافات (plugins)، وتلميحات النوافذ المنبثقة المزعجة.

كيف تختبر توافق صفحة مع الجوال

1. أدخل رابط الصفحة

   اختبر كل قالب رئيسي (الرئيسية، المقال، المنتج، الاتصال)، لأن مشكلات الجوال تأتي عادةً من القالب.

2. راجع كل فحص

   اعرف أي أساسيات الجوال تنجح وأيها تفشل، مع العنصر أو القاعدة وراء كل تحذير.

3. أصلح وتأكد

   طبّق الإصلاحات، وأعد الاختبار، ثم شاهد الصفحة على هاتف حقيقي.

ما الذي حلّ محل أداة جوجل Mobile-Friendly Test

في 1 ديسمبر 2023 أغلقت جوجل أداة Mobile-Friendly Test وواجهتها البرمجية وتقرير Mobile Usability في Search Console، وأحالت أصحاب المواقع إلى Lighthouse. أمامك اليوم ثلاثة خيارات جيدة:

• هذا الاختبار لفحص سريع لأساسيات الجوال في شيفرة الصفحة.
• Lighthouse في Chrome DevTools، أو PageSpeed Insights، لتشغيل محمول مع العرض الفعلي.
• فحص الرابط (URL Inspection) في Search Console، الذي يعرض اختباره المباشر لقطة شاشة للصفحة كما يعرضها Googlebot الخاص بالهواتف.

تجد شرحًا لكيفية زحف جوجل لصفحات الجوال في مدخل الأرشفة بحسب الجوال أولًا في قاموسنا.

وسم viewport وCSS المتجاوب

بدون وسم viewport، تعرض الهواتف الصفحة بعرض سطح مكتب يقارب 980px ثم تصغّرها لتناسب الشاشة. وهذا السطر مكانه <head> في كل صفحة:

<meta name="viewport" content="width=device-width, initial-scale=1">

لا تضف maximum-scale=1 ولا user-scalable=no؛ فمنع التكبير يخذل من يحتاجون إلى نص أكبر. ثم دع التخطيط يتكيف بـ media queries وعروض مرنة:

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}
img, video { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }

العروض الثابتة مثل width: 1200px على حاوية، أو جدول بيانات عريض، أو iframe مضمّن، هي السبب المعتاد للتمرير الجانبي على الهواتف.

النص وأهداف اللمس والصور

• حجم الخط: استخدم 16px لنص المتن؛ فأصغر بكثير يضطر القراء إلى التكبير.
• أهداف اللمس: يطلب WCAG 2.2 أهدافًا لا تقل عن 24 × 24 CSS pixels (معيار النجاح 2.5.8)، وتوصي أنظمة تصميم كثيرة، منها Material Design من جوجل، بـ 48 × 48. اترك مسافة بين الروابط المتجاورة.
• الصور المتجاوبة: قدّم ملفات أصغر للشاشات الصغيرة بـ srcset وsizes؛ وتنبّه أداة فحص سيو الصور إلى الملفات الضخمة.
• الإضافات (Plugins): لم يعد Flash وما شابهه يعمل في المتصفحات الحديثة؛ استخدم <video> أو مشغلًا مضمّنًا قياسيًا.

<img src="cake-800.jpg"
     srcset="cake-400.jpg 400w, cake-800.jpg 800w, cake-1600.jpg 1600w"
     sizes="(max-width: 640px) 100vw, 800px"
     width="800" height="533" alt="Slice of lemon cake">

النوافذ المنبثقة (Interstitials)

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

نصائح لتجربة أفضل على الجوال

• اختبر على هاتف حقيقي إضافة إلى المحاكي؛ فاللمس والخطوط وأشرطة المتصفح تتصرف بشكل مختلف على الجهاز الفعلي.
• أبقِ المحتوى والعناوين والبيانات المنظمة ووسوم الميتا نفسها على الجوال كما على سطح المكتب، لأن النسخة المحمولة هي ما تؤرشفه جوجل.
• استخدم وحدات نسبية مثل rem و% وvw للتخطيط والخطوط لتتكيف الصفحة مع أي شاشة.
• أعطِ حقول النماذج أنواع الإدخال المناسبة مثل email وtel لتعرض الهواتف لوحة المفاتيح المطابقة.
• افحص الترويسات الثابتة وأزرار الدردشة على الشاشات الصغيرة؛ فقد تغطي معًا جزءًا كبيرًا من منطقة العرض.

حدود يجب مراعاتها

هذا فحص ثابت لشيفرة HTML في الصفحة، لا لقطة شاشة معروضة: لا ننفّذ JavaScript ولا نعرض الصفحة على شاشة بحجم هاتف، لذلك قد تفوتنا العناصر الطافحة أو المتداخلة التي لا تظهر إلا بعد العرض. استخدم Lighthouse أو PageSpeed Insights أو فحص الرابط في Search Console لرؤية العرض الفعلي، وأنهِ الفحص بجهاز حقيقي. ولصورة أوسع عن أداء الصفحة في البحث، شغّل أداة تحليل السيو.

آخر تحديث: 30‏/10‏/2026 بواسطة فريق Yes SEO.