آموزش Mobile Usability گوگل سرچ کنسول و رفع خطاهای ریسپانسیو
چند سالی می‌شود که گوگل به کاربران موبایلی اهمیت بیشتری داده و الگوریتم‌های خود را طوری تغییر می‌دهد که سایت خود را برای این کاربران بهینه‌تر کنید. برای همین بخشی با عنوان Mobile Usability را به کنسول جستجوی گوگل اضافه کرد تا گزارشات بهینه بودن سایت برای دستگاه‌های موبایلی را در این بخش نمایش دهد.
شما به کمک این بخش می‌توانید رفتار کاربران را که با موبایل به سایت شما وارد می‌شوند را بررسی کرده و مشکلات موجود را به کمک گزارش‌هایی که وجود دارد رفع کنید. در ادامه این مقاله قصد داریم به معرفی گزارشات Mobile Usability در گوگل سرچ کنسول بپردازم و با بررسی انواع خطا و وضعیتی که برای صفحات وجود دارد، ببینیم که چطور می‌توانیم ریسپانسیو سایت را برای کاربران بهینه‌تر کنیم.
گزارشات Mobile Usability گوگل سرچ کنسول چیست؟
گزارش Mobile Usability یا همان «قابلیت استفاده در موبایل» یا «موبایل فرندلی» در کنسول جستجوی گوگل مشخص می‌کند که سایت ما تا چه میزان برای دستگاه‌های موبایل بهینه است. همانطور که پیش بینی شده بود در سال ۲۰۱۶ تعداد دستگاه‌های موبایل از دستگاه‌های رومیزی بیشتر شده و از همان سال کاربران تمایل بیشتری به وگردی با موبایل پیدا کردند.
تغییرات در الگوریتم‌های گوگل نیز به شدت بالا گرفت و گوگل در طی چندین تغییری که در الگوریتم خود ایجاد کرده، اهمیت داده‌ها را به سمت موبایل معطوف کرده است. طوری که صراحتا اعلام کرد اولویت رتبه بندی سایت‌ها با موبایل است. تا پیش از این اگر در موبایل جستجویی انجام می‌دادید، نتایج همان کلمه در دسکتاپ نیز یکی بود. اما حالا وضعیت فرق کرده و در موبایل و دسکتاپ به سایت‌هایی که تمرکز خود را روی کاربران موبایلی قرار داده باشند بهای بیشتری داده می‌شود.
این بخش از کنسول جستجوی گوگل هم برای همین ایجاد شده تا خطاهایی که در نسخه موبایل سایت شما وجود دارد را برطرف کنید. این خطاها عموما مواردی هستند که باعث می‌شوند سایت از حالت ریسپانسیو خارج شود یا اینکه المان‌های موجود در صفحه استاندارد نیست و باعث شده وقتی کاربری در حال مطالعه صفحه است، مجبور به زوم کردن برای خواندن متن با فونت بزرگ یا انتخاب دکمه‌ها به دلیل نزدیکی باشد.
لپ کلام اینکه گوگل به کمک این بخش ریسپانسیو بودن سایت شما را بررسی خواهد کرد و گزارشات را طوری تنظیم می‌کند که مشکلاتی که در نسخه موبایل یا تبلت وجود دارد را رفع کنید. حالا که صحبت از ریسپانسیو شد، بیایید ابتدا ببینیم که چطور باید ریسپانسیو یا موبایل فرندلی بودن سایت خود را بررسی کنیم.
چطور ریسپانسیو بودن سایت در موبایل را بررسی کنیم؟
همانطور که احتمالا می‌دانید، گوگل به کمک مرورگر گوگل کروم همواره اطلاعات سایت‌های ثبت شده را به کمک chrome UX بررسی کرده و از نظر سرعت و ریسپانسیو بودن نیز سایت شما را بررسی می‌کند. مرورگر گوگل کروم کمک می‌کند تا گوگل دقیقا به آنچه کاربران در نسخه موبایل با سایت شما مشکل دارند را درک کرده و به شما اطلاع دهد که چه مشکلاتی در سایت شما وجود دارد.
بنابراین مثل سایر بخش‌های کنسول جستجوی گوگل باید به این بخش نیز اهمیت داد. اطلاعاتی که در اینجا برای خطاها یا اینکه صفحاتی که مشکلی ندارند نمایش داده می‌شوند، لحظه‌ای نیست. پس اگر در حال تغییرات در نسخه ریسپانسیو سایت هستید، لازم است که به صورت لحظه‌ای به کمک سایر ابزار گوگل آنها را بررسی کنید.
یکی از این ابزار Mobile-Friendly Test خود گوگل است که با مراجعه به آن می‌توانید آدرس صفحه مورد نظر خود را برای بررسی وارد کرده و ببینید که آیا به صورت کامل برای موبایل بهینه است یا نه؟
بعد از اینکه آدرس صفحه خود را وارد کردید، روی دکمه‌ی TEST URL کلیک کرده و چند لحظه منتظر بمانید تا صفحه بررسی شود. در این صورت نتیجه را به شکل زیر خواهید دید.
همانطور که می‌بینید نتیجه بررسی شده و در صورتی که صفحه با موبایل سازگار باشد، پیغام «Page is mobile friendly» نمایش داده می‌شود. اگر هم خطایی در اینجا وجود داشته باشد پیغام با رنگ زرد و به صورت «Page is not mobile friendly» نمایش داده خواهد شد.
خطاهای Mobile Usability سرچ کنسول گوگل چه اطلاعاتی به ما می‌دهند؟
به صورت کلی خطاهایی که در بخش گزارش Mobile Usability نمایش داده می‌شوند، علاوه بر وضعیت خطا صفحات و نوع خطا را به ما نمایش می‌دهند که می‌توانیم آنها را برطرف کنیم. بعد از ارسال درخواست برای برطرف کردن، وضعیت خطاها تغییر پیدا کرده و چند روزی که بگذرد و بسته به اینکه در چه تعداد صفحه خطاهای موجود وجود داشته باشند، وضعیت آنها نیز تغییر پیدا می‌کند. برای درک بهتر موضوع به تصویر زیر دقت کنید.
- status: در این ستون نوع خطا مشخص می‌شود. همانطور که در بخش چیستی بررسی کردیم، این خطاها می‌توانند خطا باشند که در دسته‌بندی Error قرار دارد، یا خطایی نباشند که با نام Valid نمایش داده می‌شوند.
- type: این ستون نوع خطا را به ما نشان می‌دهد. عموما ۶ نوع خطا برای بخش موبایل فرندلی گوگل سرچ کنسول داریم که هر یک خطاهای خاصی را برای ما مشخص می‌کنند.
- validation: این ستون هم وضعیت خطا را به ما نشان می‌دهد که به چند گروه زیر تقسیم می‌شوند:
- Not Started: زمانی که هنوز برای بررسی و رفع خطا درخواستی ارسال نکرده باشید.
- started: درخواست خود را برای رفع خطا ارسال کردید، اما هنوز صفحه به صورت کامل بررسی نشده که نتیجه نمایش داده شود.
- Failed: نتیجه درخواست شما با شکست مواجه شده و همچنان خطا را دارید.
- Passed: خطا بررسی و رفع شده است.
- trend: این ستون هم به صورت نمودار تعداد صفحات را در بازه زمانی مشخصی نمایش می‌دهد که صعودی بوده یا نزولی.
- pages: در این ستون هم می‌توانید تعداد صفحاتی که هر یک از خطاها را دارند بررسی کنید.
با کلیک روی ردیف هر یک از موارد پنج گانه بالا، وارد صفحه‌ای می‌شوید که این خطاها را دارند. برای نمونه من خطای Content wider than screen را که در تصویر بالا می‌بینید انتخاب می‌کنم.
همانطور که در تصویر می‌بینید دوتا از صفحات من خطای Content wider than screen را دریافت کردند که بعد از ارسال درخواست خطا رفع نشده و به صورت failed نمایش داده شده است. اما قبل از اینکه با نحوه چگونگی رفع خطاهای Mobile Usability آشنا شوید، ببینیم که چند نوع خطا داریم و هر یک چه چیزی را به ما نشان می‌دهند.
چند نوع خطا در Mobile Usability گوگل داریم؟
خطاهایی که در کنسول جستجوی گوگل برای Mobile Usability نمایش داده می‌شوند همگی برای این هستند که ریسپانسیو و موبایل فرندلی بودن سایت در برخی صفحات به هم ریخته که باید آنها را برطرف کنید. این به هم ریختگی می‌تواند از کدهای استایل، تغییرات در اندازه تصاویر و… رخ دهد.
صرفا هم موضوع برای به هم ریختگی نیست. گاهی اوقات المان‌ها نزدیک به هم هستند و باعث می‌شوند تا در موبایل به دلیل کوچک بودن ابعاد صفحه، کاربر مجبور به زوم کردن برای انتخاب دکمه، تصویر یا چیزهای دیگری باشد که تجربه ناخوشایندی برای کاربر محصوب می‌شود.
viewport not set
با تنظیم کردن مقدار viewport not می‌توانید کادری که در نمایشگر برای نمایش سایت‌ها در دیوایس‌های مختلف ایجاد می‌شود را تنظیم کنید که متناسب با اندازه نمایشگر سایت نمایش داده شود. این کد در بخش head سایت قرار می‌گیرد تا قبل از شروع بارگذاری کدهای CSS اندازه صفحه مشخص شده و سپس بر اساس استایل سایت، برای نمایشگرهای مختلف تنظیم شود.
اگر چنین خطایی دارید احتمالا این مقدار در سایت شما تنظیم نشده که با قرار دادن کد زیر در بخش head صفحات می‌توانید آن را تنظیم کنید.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
viewport not set to “device-width”
این خطا هم زمانی ایجاد می‌شود که شما یک عرض ثابت برای سایت تعریف کرده باشید که در این صورت با تغییر اندازه صفحه نمایش در موبایل و تبلت باعث می‌شود که بخشی از صفحه خالی شده و محتوای کلی سایت در همان عرض تعیین شده نمایش داده شود.
برای رفع این خطا هم باید کدهای css خود را بررسی کرده و این عرض را به حالت خودکار تغییر دهید تا بر اساس اندازه نمایشگر موبایل، تبلت یا دسکتاپ نمایش داده شود.
content wider than screen
wider than اشاره به اسکرول افقی صفحه دارد. یعنی صفحه شما به خوبی ریسپانسیو نیست و بخاطر وجود المان‌هایی باعث شده تا اسکرول افقی در آن ایجاد شود و برای همین هم برخی از محتوا بیرون از کادر اصلی محتوا قرار گرفته است.
برای رفع این خطا در Mobile Usability باید صفحه را در موبایل بررسی کرده و ببینید که استفاده از تصویر یا المان دیگری که معمولا گاهی با قرار دادن لینک‌های طولانی این اتفاق هم رخ می‌دهد باعث این اسکرول افقی شده است. سپس آن را رفع کنید تا اسکرول افقی از سایت حذف شود.
text too small to read
این خطا هم به اندازه فونت نوشته‌ها اشاره دارد که کوچک انتخاب شده است. برای رفع این مشکل باید اندازه فونت نوشته‌ها در صفحه خود را در هر جایی که گوگل به آن ایراد گرفته، کمی بزرگ‌تر کنید. به این نکته هم دقت کنید که از فونت مناسب مثل regular استفاده کنید که ضخامت آن هم مناسب باشد. مثلا استفاده از فونت thin که کمترین ضخامت را دارد، باعث می‌شود این خطا را در بیشتر صفحات ببینید.
uses incompatible Plugins
در اینجا منظور از پلاگین، افزونه‌های وردپرس نیست. بلکه منظور این است که از پلاگین‌های آماده که برای کد نویسی استفاده کردید، با موبایل ناسازگار هستند. یا باید آنها را رفع کنید یا اینکه از پلاگین‌های سازگار استفاده کنید که ریسپانسیو سایت با موبایل سازگار باشد.
clickable elements too close together
این خطا همانطور که از عنوانش مشخص است به ما می‌گوید که برخی المان‌ها که در صفحه قرار دارند، به هم نزدیک هستند. به عنوان مثال دکمه‌ها یا لینک‌هایی که لمس آنها کاربر را به بخش خاصی اسکرول می‌کند یا اینکه اگر از آکاردئون استفاده کردید، چون زیاد نزدیک به هم هستند باعث شده در موبایل نتوان به خوبی آنها را انتخاب کرد.
برای رفع این مشکل شما باید به کمک CSS فاصله و نزدیکی آنها را استاندارد کنید تا به راحتی در موبایل و بدون نیاز به زوم کردن کاربر قادر باشد المان‌ها را انتخاب کند.
چطور خطاهای Mobile Usability گوگل سرچ کنسول را رفع کنیم؟
برای برطرف کردن خطاهای موجود در اینجا ابتدا مشابه تصویر زیر به منوی Mobile Usability مراجعه کنید، سپس باید بررسی کرده و ببینید که آیا در تب Error خطاهایی وجود دارد یا نه؟
اگر خطایی وجود داشته باشد در بخش Details مشابه تصویر زیر نمایش داده می‌شود. برای رفع هر یک از خطاها که در بخش قبل انواع آنها را توضیح دادم کافی است روی ردیف خطا کلیک کنید تا وارد مرحله‌ای که صفحات دارای این خطا هستند شده و پس از رفع کردن در سایت، درخواست خود را برای رفع خطا ارسال کنید.
در اینجا من برای نمونه خطایی که از نوع Text too small to read است را انتخاب می‌کنم. این خطا در اینجا نشان می‌دهد که در ۴ تا از صفحات، دارای بخشی هستند که فونت در آنها کوچک بوده و باعث شده تا کاربران برای مطالعه در موبایل زوم کنند.
- در این بخش آدرس صفحاتی که این خطا را دارند می‌بینید. با کلیک روی هر لینک می‌توانید ببینید که خطا در سورس کدهای صفحه مربوط به چه بخشی است.
- حالا برای رفع این خطا باید روی VALIDATE FIX کلیک کنید.
با کلیک روی این دکمه، فرآیند بررسی آغاز شده و می‌توانید با کلیک روی دکمه See Details ببینید که در چه وضعیتی قرار دارد.
در صورتی که خطا در سایت رفع شده باشد و گوگل مجددا آن را بررسی کند، لیبل passed که در توضیحات قبلی به بررسی آنها پرداختیم را دریافت می‌کنید. اما اگر همچنان خطا وجود داشته باشد، لیبل failed را دریافت می‌کنید که باید مجددا خطا را در سایت بررسی کرده و مشکل را رفع کنید، سپس درخواست خود را دوباره برای بررسی ارسال کنید.
جمع بندی
در این مقاله به بررسی گزارش Mobile Usability در گوگل پرداخته و با هم بررسی کردیم که این بخش چه اطلاعاتی را در اختیار ما قرار می‌دهد. سپس به معرفی ابزاری برای تست آنلاین ریسپانسیو سایت پرداخته و به شما آموزش دادم که در صورت ایجاد تغییرات در سنسخه ریسپانسیو چطور عمل کنید که بعد از تغییرات خطاها را در کنسول گوگل دریافت نکنید.
در نهایت انواع خطا و وضعیت را مورد بررسی قرار داده و با چگونگی مشاهده و درخواست بررسی مجدد صفحات برای رفع خطاهای Mobile Usability کنسول جستجوی گوگل پرداختیم.
