Mobile Friendly Checker
يقرأ هذا الفاحص المجاني لتوافق الهاتف المحمول HTML الصفحة ويختبر العوامل التي تحدد ما إذا كانت تعمل على الهاتف: علامة viewport meta صحيحة، عدم تعطيل التكبير، عدم وجود علامات Flash أو مكونات إضافية، عدم وجود أحجام خطوط صغيرة جداً أو تخطيطات ذات عرض ثابت، سمات الصور المتجاوبة وأهداف نقر بحجم معقول. إنه فحص HTML استكشافي، لذا تشير كل نتيجة إلى ما يمكنه وما لا يمكنه إثباته.
Mobile Friendly Checker
Technical SEO
عن هذه الأداة
يفهرس Google نسخة الهاتف المحمول من الصفحة أولاً، ومعظم الزوار يصلون إلى معظم المواقع عبر الهاتف. الصفحة التي تتطلب قرصاً للقراءة، أو التي تتجاوز الشاشة، أو التي تكون روابطها صغيرة جداً للنقر عليها تفقدهم في ثوان. أوقف Google اختبار Mobile-Friendly الخاص به في عام 2023، لذا يحتاج مالكو المواقع إلى طريقة سريعة أخرى للتحقق من الأساسيات قبل فحص الصفحة على هاتف حقيقي.
يجلب الفاحص HTML الذي يرسله الخادم ويبحث عن الإشارات التي تحدد سلوك الهاتف المحمول: علامة viewport meta وما إذا كانت تعيّن width=device-width بدون حجب التكبير، علامات المكونات الإضافية مثل Flash التي لا يمكن للهواتف تشغيلها، أحجام الخطوط أقل من 12 بكسل في الأنماط المضمنة وكتل الأنماط، الجداول والعناصر ذات العروض الثابتة الأوسع من شاشة الهاتف، الصور ذات سمات srcset أو sizes، استعلامات الوسائط في الأنماط المضمنة، الروابط التي يكون نصها قصيراً جداً للنقر بسهولة، علامات الخطوط القديمة، وروابط AMP أو mobile-alternate.
لا يمكنه عرض الصفحة أو قراءة أوراق الأنماط الخارجية، لذا لا يمكنه قياس كيفية ظهور التخطيط فعلياً، أو ما إذا كان النص قابلاً للقراءة حقاً أو ما إذا كانت العناصر متداخلة. الصفحة التي تجتاز كل فحص هنا قد تكون محرجة على الهاتف، والصفحة التي تستخدم CSS خارجي لكل شيء قد تؤدي إلى تحذيرات لا تستحقها. تعامل مع النتيجة كقائمة تحقق، ثم افتح الصفحة على هاتف حقيقي وفي وضع جهاز Chrome DevTools.
الأسئلة الشائعة
ما علامة viewport meta التي يجب أن تحتويها كل صفحة؟
المعيار هو <meta name="viewport" content="width=device-width, initial-scale=1">. يخبر الهواتف بتخطيط الصفحة بعرض الشاشة بدلاً من التظاهر بأنها سطح مكتب بعرض 980 بكسل وتقليص كل شيء. بدونها، يكون النص صغيراً جداً ويجب على الزوار التكبير للقراءة.
هل من السيء تعطيل التكبير باستخدام user-scalable=no؟
نعم. يمنع الأشخاص ذوي الرؤية الضعيفة من تكبير النص وهو فشل في إمكانية الوصول بموجب WCAG. iOS الحديث يتجاهله على أي حال. أزل user-scalable=no و maximum-scale=1 ما لم تكن الصفحة تطبيق ملء الشاشة بأدوات تكبير خاصة به.
ماذا حدث لاختبار Mobile-Friendly من Google؟
أغلقته Google في ديسمبر 2023، جنباً إلى جنب مع تقرير قابلية الاستخدام للهاتف المحمول في Search Console. لا يزال Lighthouse في Chrome DevTools و PageSpeed Insights يبلغان عن مشاكل الهاتف المحمول مثل viewport وحجم الخط وأهداف النقر، ويغطي هذا الفاحص أساسيات مستوى HTML للنظرة الأولى السريعة.
ما حجم أهداف النقر؟
48 في 48 بكسل CSS على الأقل مع حوالي 8 بكسل من المسافة بينها، بحيث تصيب الإصبع هدفاً واحداً وليس جاره. قوائم الملاحة من الروابط المكدسة بإحكام والروابط التي تحتوي على رموز فقط هي المخالفون المعتادون. الحشو على الرابط، وليس فقط النص، يجعل الهدف أكبر دون تغيير المظهر.
لماذا لا يعرض الفاحص كيف تبدو الصفحة على الهاتف؟
لأنه يقرأ HTML بدون عرضه أو تنزيل أوراق الأنماط، مما يحافظ على سرعة الفحص والأمان ولكن يعني أنه لا يمكنه رؤية التخطيط النهائي. للتحقق البصري، افتح الصفحة في Chrome، اضغط F12، بدّل شريط أدوات الجهاز واختر هاتفاً، أو ببساطة افتحها على هاتفك الخاص.