تحسين للموبايل - Mobile SEO

ليه تحسين الموقع للموبايل مهم؟#

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

التصميم المتجاوب هو الأساس#

تصميم واحد يتكيف مع كل الشاشات، بنفس الرابط ونفس HTML. هذا ما توصي به جوجل صراحةً، وهو أبسط ما يمكن صيانته.

البدائل ومشاكلها:

• نطاق منفصل m.: يضاعف عملك، ويتطلب ضبط canonical و alternate بدقة، وأي خطأ يكلف كثيراً
• العرض الديناميكي: نفس الرابط بمحتوى مختلف حسب الجهاز. يتطلب ترويسة Vary: User-Agent صحيحة وسهل الخطأ فيه

إن كنت تبدأ من جديد، فالمتجاوب هو الخيار الوحيد المعقول.

قائمة تحقق عملية#

• وسم العرض: <meta name="viewport" content="width=device-width, initial-scale=1"> موجود وصحيح
• حجم الخط: 16 بكسل فأكثر للنص الأساسي، حتى لا يضطر المستخدم للتكبير
• مساحات اللمس: 44 بكسل على الأقل، وبمسافة كافية بين الأزرار المتجاورة
• لا تمرير أفقي: اختبر بعرض 360 بكسل. الجداول والأكواد يجب أن تمرر داخل حاويتها لا أن تمدّ الصفحة
• نفس المحتوى: النص والصور والبيانات المنظمة متطابقة بين النسختين
• لا نوافذ منبثقة اقتحامية: النافذة التي تغطي المحتوى فور الدخول تضر الترتيب والتجربة معاً
• السرعة: اختبر على شبكة بطيئة، لا على واي فاي المكتب

العربية على الموبايل#

• اتجاه صحيح: dir="rtl" على مستوى الصفحة، مع استخدام الخصائص المنطقية في CSS بدل left وright
• النص المختلط: المصطلحات الإنجليزية داخل جملة عربية قد تنقلب. استخدم عزل الاتجاه للأكواد والروابط
• ارتفاع السطر: العربية تحتاج تباعداً أكبر من اللاتينية. 1.8 مناسب، و1.5 ضيق ومتعب
• الخط: اختر خطاً عربياً واضحاً على الشاشات الصغيرة، وتجنب الخطوط الزخرفية في النص الأساسي

أدوات مساعدة#

• وضع الجهاز في Chrome DevTools: أسرع اختبار أثناء التطوير
• أداة فحص الرابط في Search Console: تعرض ما يراه جوجل فعلاً بعد تنفيذ JavaScript
• PageSpeed Insights بتبويب الموبايل: هو التبويب الذي يهم
• جهاز حقيقي: لا بديل عن فتح موقعك على هاتف فعلي بشبكة بيانات عادية