در گزارش Mobile Usability صفحاتی که از نظر موبایل فرندلی بودن دارای ایراد باشند به شما نمایش داده می شوند. همان طور که در تصویر بعد مشاهده می کنید، در این گزارش، تعداد ایرادهای مربوط به Mobile Friendly بودن صفحات به صورت نمودار نمایش داده می شود. نمودار به رنگ قرمز بیانگر صفحات دارای ایراد موبایل فرندلی و نمودار سبز بیانگر صفحات بدون ایراد موبایل فرندلی هستند.
گوگل در گزارش موبایل فرندلی علاوه بر نمودار، لیست ایرادها را نیز به صورت تفکیک شده به شما نمایش می دهد و شما می توانید با کلیک بر روی هر کدام از ایراد ها، لیست صفحاتی که دارای آن ایراد هستند را مشاهده کنید.
-
ارور Clickable elements too close together
این ارور هنگامی نمایش داده می شود که المان های قابل کلیک مانند آیکون شبکه های اجتماعی و یا آیتم های موجود در منوها خیلی به یکدیگر نزدیک باشند و این احتمال وجود داشته باشد که هنگامی که کاربر قصد دارد روی یک المان کلیک (تاچ) کند، روی المان دیگری تاچ شود. بنابراین تلاش کنید که المان ها از یکدیگر فاصله معقولی داشته باشند.
جهت جلوگیری از بروز این ارور، تلاش کنید که بین همه المان ها دست کم 8 پیکسل از نظر افقی و عمودی فاصله وجود داشته باشد و touch element ها دست کم دارای عرض و ارتفاع 48 پیکسل (معادل 9 میلی متر) باشند که تقریبا برابر با اندازه انگشت انسان خواهد بود. در صورتیکه به عنوان مثال یک آیکون با عرض 24 پیکسل داشتید، می توانید در اطراف آن padding با پهنای 10 پیکسل در نظر بگیرید که در نهایت به همان عرض المان 48 برسید.
-
ارور Content wider than Screen
این ارور برای صفحاتی نمایش داده می شود که عرض آنها از عرض صفحه نمایش موبایل بیشتر باشد و کاربر برای دیدن همه قسمت های صفحه مجبور به Zoom out باشد. این ایراد یکی از مشکلات رایج در قالب سایت ها است.
-
Uses incompatible plugins
این ارور هنگامی نمایش داده می شود که از پلاگین هایی مانند Flash که بسیاری از دستگاه ها از آن پشتیبانی نمی کنند در صفحه استفاده شده باشد. تلاش کنید که از این قبیل افزونه ها استفاده نکنید و از امکانات HTML5 استفاده کنید.
-
ارور Text too small to read
اگر اندازه فونت متن های استفاده شده در صفحات برای کاربران موبایل کوچک باشد و کاربر برای خواندن متن توسط موبایل نیاز به Zoom in داشته باشد، در گزارش Mobile Usability سرچ کنسول با ارور Text too small to read مواجه خواهید شد. تلاش کنید که کوچکترین سایز فونت استفاده شده در صفحات موبایل 16px یا معادل آن باشد.
-
ارور Viewport not set
ارور Viewport not set معمولا به دلیل پهن تر بودن عرض سایت از عرض صفحه نمایش به دلیل عدم وجود متا viewport صحیح در <head> نمایش داده می شود.
در تصویر زیر شاهد هستید که اگر viewport صحیح برای یک صفحه وجود نداشته باشد، آن صفحه در موبایل به صورت غیر صحیح نمایش داده می شود و کاربر برای خواندن محتوا، مجبور به زوم کردن روی صفحه است.
-
Viewport not set to “device-width”
این ارور هنگامی نمایش داده می شود که متا Viewport در <head> وجود داشته باشد ولی عرض ثابت برای آن تعریف شده باشد که باعث عدم تغییر عرض صفحه در وسایل مختلف مانند انواع موبایل و تبلت و دسکتاپ خواهد شد. جهت برطرف کردن این ارور، از متای زیر استفاده کنید:
<meta name="viewport" content="width=device-width, initial-scale=1">
همان طور که گفته شد، زمانی که روی یکی از ایرادها مانند Content wider than screen کلیک می کنید، در صفحه بعد، لیست صفحات دارای همان ایراد را مشاهده خواهید کرد و در صورتیکه مشکل را برطرف کرده اید می توانید در همان صفحه با کلیک بر روی دکمه VALIDATE FIX به سرچ کنسول اعلام کنید که مشکل برطرف شده است. سپس سرچ کنسول آن صفحات را در نوبت بررسی مجدد قرار می دهد و اگر برطرف شدن مشکل صفحات مورد تایید سرچ کنسول باشد، همانند تصویر قبل، کلمه Passed را در ستون Validation در روبروی ایراد مربوطه نمایش می دهد.
برای تست صفحات از نظر موبایل فرندلی بودن می توانید از ابزار تست موبایل فرندلی گوگل به آدرس زیر استفاده کنید:
https://search.google.com/test/mobile-friendly
همچنین جهت بررسی صفحات با user-agent موبایل گوگل می توانید از ابزار URL inspection در سرچ کنسول استفاده کنید.
با توجه به اهمیت موبایل فرندلی بودن صفحات در محاسبه رنکینگ جستجوهای انجام شده با موبایل، تلاش کنید که جهت سئوی اصولی، هیچ ایرادی در گزارش Mobile Usability نداشته باشید و ایرادهای احتمالی را در اسرع وقت برطرف نمایید.
همچنین می توانید در گزارش Search Analytics سرچ کنسول با استفاده از فیلتر دستگاه، ورودی های ارگانیک سایت از طریق موبایل را فیلتر و یا آن را با ورودی های ارگانیک از طریق دسکتاپ مقایسه کنید.
سلام سرچ کنسول من سه تا ارور میده Content wider than / screen / Clickable elements too close together / Text too small to read در صورتیکه صفحه من سایز فونت 16px هست و عرض صفحه اضافی نداره و کامل درسته و ایکن یا لینکی نزدیک بهم نداره. نمیدونم چرا ارور نمیره. live test گوگل رو میزنم صفحه منو فقط html میاره و css لود نمیکنه. مشکل کجاست؟
سلام، اگر در چند زمان مختلف، صفحات را با گوگل سرچ کنسول تست کردید و برخی از resource ها درست لود نمی شدند، به احتمال خیلی زیاد، همین موضوع باعث شده که گوگل نتواند صفحات شما را به درستی رندر کند و در نتیجه با ارور موبایل فرندلی مواجه شده اید. در نتیجه ابتدا باید مشکل عدم لود شدن کامل منابع را بررسی و برطرف کنید. تنظیمات سرور و فایل robots.txt و .htaccess را بررسی کنید. بررسی لاگ های سرور هم به شما کمک خواهد کرد. فرمودید صفحات مشکلی ندارند، آیا با گوشی های سخت افزاری مختلف تست کردید یا با شبیه ساز موبایل گوگل کروم صفحات را بررسی کردید؟ همیشه علاوه بر استفاده از شبیه ساز موبایل، با گوشی های مختلف سخت افزاری، مخصوصا گوشی های flagship نیز صفحات را تست بکنید بهتر است.
سلام من ارورهای زیر را تو سه تا از صفحاتم دارم. از کجا باید بفهمم دقیقا کدوم قسمت صفحه رو باید تصحیح کنم؟ چون فقط میگه این صفحه مشکل داره. کجای صفحه رو نمیگه.
لطفا میشه راهنمایی بفرمائید.
Content wider than screen
Clickable elements too close together
سلام، آدرس صفحاتی که دارای ارور هستند را از سرچ کنسول ببینید، سپس آن صفحات را ابتدا با شبیه ساز موبایل گوگل کروم، توسط گوشی های مختلفی که در شبیه ساز است تست کنید، اگر ایراد را پیدا کردید که بهتر و اگر با simulator موبایل کروم همه صفحات درست بودند، همان صفحات دارای ارور را با گوشی های واقعی اندرویدی و آیفون تست کنید. ترجیحا با گوشی های flagship هر برند سعی کنید که تست هایتان را انجام دهید.
اگر متوجه شدید که کدام قسمت از صفحه ایراد دارد ولی نتوانستید ارور آن را دیباگ کنید، می توانید از امکان ریموت دیباگینگ مرورگر کروم جهت پیدا کردن ارور صفحه استفاده کنید.
برخی مواقع نیز، هیچ ایرادی وجود ندارد و ارور Mobile Usability به خاطر لود نشدن مثلا یک فایل جاوااسکریپت یا CSS است که در آن صورت شما ارور را Validate fix کنید و اگر هنوز مشکل برطرف نشده بود، چک کنید ببینید علت اینکه گوگل بات نمی تواند به برخی از فایل ها دسترسی داشته باشد چیست.
سلام من سایتم در گوشی و دسکتاپ درست نمایش داده میشه ولی وقتی با کنسول سرچ گوگل تست میگیرم ارور میده که چنتا صفحه داری که برای موبایل بهینه نیست ولی همون لینک رو تو گوشی وا میکنم درست هستش . ممنون میشم راهنمایی کنید
سلام، توصیه می کنم که صفحاتی که دارای ارور هستند را با گوشی های مختلف مانند آیفون و چند مدل مختلف گوشی اندرویدی (ترجیحا flagship) تست کنید تا مطمئن شوید که روی همه گوشی ها بدون ایراد هستید. ممکن است برخی از صفحات سایت روی یک سیستم عامل خاص یا گوشی با عرض خاص، دارای ایراد موبایل فرندلی باشد که در آن صورت می توانید از قابلیت ریموت دیباگینگ گوگل کروم جهت دیباگ صفحه مورد نظرتان استفاده کنید.
سلام خسته نباشین
سایت من Content wider than Screen
سایز عکس ها رو ۴۵۰در۴۵۰ پیکسل گذاشتم ولی باز هم ارور میده
میشه لطفا راهنمایی کنید ؟
سلام، صفحه ای که ارور دارد را با ابزار تست موبایل فرندلی گوگل و شبیه ساز موبایل گوگل کروم بررسی کنید تا متوجه شوید ایراد از کجا است. ممکن است که ایراد از بابت عکس نباشد و مشکل CSS یا js داشته باشید.
اگر در شبیه ساز موبایل کروم با مشکل مواجه نشدید ولی در گوشی موبایل واقعی با ایراد مواجه شدید، می توانید از ریموت دیباگینگ گوگل کروم برای یافتن ایراد صفحه استفاده کنید.