در این قسمت از آموزش گوگل سرچ کنسول به گزارشات Mobile Usability می رسیم. در چند سال اخیر تعداد کاربرانی که با دیوایس هایی مختلف به خصوص موبایل وارد گوگل شدند به سرعت در حال افزایش بوده. این مساله برای گوگل هم حائز اهمیت شده. اینکه وب سایت شما در سایز و دیوایس های دیگر قابل نمایش باشد، یکی از عوامل مهم در رتبه بندی گوگل می باشد. به همین دلیل گزارش Mobile Usability به سرچ کنسول گوگل اضافه شد. شاید براتون سوال پیش بیاد که چطوری بفهمیم کاربران وب سایتمان با چه دیوایسی وارد سایت می شوند؟ یکی از راه هایی که میتوانید این مساله را بفهمید، استفاده از گزارش performance google search console می باشد. برای آموزش بخش performance به آموزش مربوطه مراجعه کنید.

حتما بخوانید: آموزش گزارش عملکرد performance report در سرچ کنسول گوگل

شما در گزارش mobile usability می توانید متوجه بشید کدام صفحات وب سایتتون در دیوایس های دیگر دچار مشکل هست یا به قول معروف not mobile friendly می باشند. شما در این گزارش می توانید حتی بفهمید در هر کدام از صفحات سایتتون، چه عاملی باعث شده که در موبایل به درستی نمایش داده نشود. برای مثال یکی از عواملی که در این گزارش به شما اخطار می دهد، نزدیک بدون دکمه ها در صفحه سایتتون در میابل هست. همه این موارد به خاطره عدم ریسپانسیو بودن وب سایتتان به وجود می آید.

گزارش mobile usability در گوگل سرچ کنسول

شاید تا به حال دفعات زیادی این قسمت و ارور ها را در گوگل سرچ کنسول دیده باشید. من خودم اوایل هر بار که این قسمت رو می دیدم دنیا رو سرم خراب میشد. چون واقعا نمیدونستم چطوری باید این مشکلات رو حل کنم. یک روز خیلی کنجکاو شدم و وارد گزازش شدم. دیگه واقعا نمیخواستم این ارور هار را ببینم. بعد از بررسی های زیادی که کردم فهمیدم در هدر سایتم دکمه ها بسیار کوچک هستند و کاربران نمی توانند به آسانی بر رویشان کلیک کنند. بعد از حل این مشکل تمام صفحات سایتم بدون ارور در موبایل لود میشد. حل شدن اینگونه مشکلات خیلی در پیشرفت سئو وبسایتتون کمک میکند.

ابزار های گوگل برای تست user friendly

بهترین ابزاری که میتونم بهتون معرفی کنم mobile friendly test google می باشد. این ابزار بسیار سریع و با دقت وب سایتتون را بررسی می کند و نتیجه رو بهتون همان احظه اعلام می کند. روش استفاده از این ابزار بسیار آسان است. پس بیاید ببینیم چطوری میشه باهاش کار کرد.

  1. از طریق لینک بالا وارد سایت بشید.
  2. url صفحه مورد نظر خود را در باکس وسط صفحه که در تصویر پایین مشخص شده وارد و بر روی test url کلیک کنید.
ابزار های گوگل برای تست user friendly

اگر مشکلی در ریسپانسیو صفحتون وجود نداشته باشد به صورت زیر بهتون پیغام می دهد.

و اگر صفحه سایتتان دچار اشکال باشد به شکل زیر به شما اطلاع می دهد.

داده های گزارش Mobile Usability در سرچ کنسول گوگل

گوگل سرچ کنسول در بخش mobile usability می تواند تا 1000 صفحه مورد دار از نظر ریسپانسیو را در وب سایت شما شناسایی و به شما اعلام کند.

تنها در 3 حالت این جدول به شما گزارشی اعلام نمی کند.

  1. شما بیش از 1000 صفحه دارید که از نظر ریسپانسیو دچار اشکال هستند. (مگه داریم؟ مگه میشه؟)
  2. سایت شما دچار اشکال جدیدی در قسمت ریسپانسیو خود می باشد.
  3. مثل سایت ویکی دمی همیشه سبز است و هیچ اشکالی ندارد.

اطلاعاتی که جدول Mobile Usability سرچ کنسول گوگل در اختیار ما قرار می دهد

  • وضعیت (status): شما در این قسمت صفحه شما دارای یکی از دو حالت پایین است.
    1. خطا (Error) : صفحه شما موبایل فرندلی و ریسپانسیو نیست.
    2. معتبر (Valid) : صفحه شما ریسپانسیو و موبایل فرندلی هست.
  • صفحات (Pages): تعداد صفحاتی که ریسپانسیو نیستند و در موبایل به خوبی نمایش داده نمی شوند.
  • نوع (Type): نوع مشکل در صفحه را به شما اطلاع می دهد.

در ادامه تمام این موضوعات را به صورت کامل برایتان شرح می دهیم.

آموزش جزئیات صفحه وبسایت در mobile usability

Valid و Error دو عنوانی هستند که گوگل بر اساس ریسپانسیو و موبایل فرندلی بودن صفحاتتون به شما می دهد. اگر صفحه شما موبایل فرندلی باشد در دسته Valid قرار می گیرد. اگر هم دارای اشکال و موبایل فرندلی نباشد در دسته Error قرار داده می شود.

  1. Error: اگر صفحه شما با پایین ترین سطوح موبایل فرندلی مطابقت نداشته باشد در این دسته قرار می گیرد.
  2. Valid: صفحاتی که در این دسته قرار می گیرند دارای حداقل سطوح استاندارد موبایل فرندلی می باشند. اما به این معنا نیست که هیچ اشکالی نداشته باشند. برای اینکه مطمعن شوید پیجتون هیچ اشکالی ندارد، از ابزار Mobile-Friendly Test Tool استفاده کنید.

نکته مهم: طبق تجربیات تیم ویکی دمی، گاهی ممکن است یک صفحه شما جزو صفحات Valid باشد اما هنوز یک سری مشکلات دارد. پس از مدتی ممکن است مشکلات صفحه شما بیشتر شود و وارد صفحات Error شود. باید توجه داشته باشید که همه اون مشکلات مختص همان زمان نیست و ممکن است از قبل این مشکلات در صفحه وجود داشته.

نکته مهم و جالب در مورد صفحات دارای Error

فرض کنید دو صفحه در سایت شما وجود دارد. در صفحه 1 دارای دو مشکل X , Y هستید. اما این صفحه به دلیل اینکه مشکلات کمی دارد، جزو صفحات Valid می باشد.

اما صفحه 2 دارای سه مشکل S , Y , Z می باشد. این صفحه به دلیل اینکه پایین ترین سطح mobile friendly را دارا نیست در دسته صفحات Error قرار گرفته است.

حال شما در جزئیات مشکلات صفحاتتان سایتتان را با  یک مشکل Y و یک مشکل Z و یک مشکل S میبینید و خبری از مشکل X نیست. چون در صفحه ای قرار دارد که Valid می باشد.

اولویت بندی مشکلات و رفع اشکال در Mobile Usability سرچ کنسول گوگل :

  1. در صفحه خلاصه گزارش Mobile Usability مشکلات بر اساس میزان اهمیت و تعداد صفحاتی که در سایت شما تاثیر گذار هستند مرتب میشوند. خود گوگل هم پیشنهاد میکند تا بر اساس همین اولویت ها اقدام به باگ گیری صفحاتتون کنید.
  2. ببینید که خطلاهای کلی که در اکثر صفحاتتون وجود دارد از یک اشتباه و خطای یکسان نشات میگیرد؟ برای مثال اگر هدر سایت شما در همه صفحات یکسان باشد و دچار اشکالات ریسپانسیو شود، این اشکال در همه صفحاتتون ایجاد می شود. در ادامه توضیح میدهیم که چطور این صفحات را بیابید و چگونه اقدام به باگ گیری آن کنید.
  3. با کلیک بر روی هر کدام از ردیف های جدول می توانید جزئیات بیشتری را مشاهده کنید.
    1. بعد از کلیک بر رو هر ردیف می توانید ببینید که این خطا بر روی کدام صفحات شما اشکال ایجاد کرده است. تا حداکثر 1000 صفحه را به شما نمایش می دهد.
    2. با کلیک بر روی هر url میتوانید جزئیات بیشتری را ببینید.
    3. بعد از کلیک بر روی هر url مانند تصویر زیر قسمت جدیدی برایتان باز می شود.

پس از لود شدن کامل دکمه ی TEST LIVE PAGE در آن قسمت ظاهر می شود. بر روی آن دکمه هم کلیک کنید.

پس از کلیک بر روی این قسمت ربات های گول در صفحه شما می خزند. ممکن است بعد از این کار مشکل صفحه برطرف شود. اما اگر بعد از این کار مشکل صفحه برطرف شد ولی همچنان این صفحه جزو صفحات Error بود جای نگرانی نیست. وقتی صفحه شما توسط ربات های گوگل recrawl شود، این پیج وارد صفحات Valid خواهد شد.

همچنین می توانید برای اطمینان خاطر، url صفحه را در google mobile friendly test tool تست کنید. پس از اینکه پیغام page is mobile friendly را دیدید به صفحه جزئیات خطا برگردید و بر روی VALIDATE  FIX کلیک کنید. شما با این کار از گوگل می خواهید تا صفحه شما را دوباره اعتبار سنجی کند. نکته ای که در اینجا باید به شما بگم این است که پروسه ی اعتبار سنجی مدت زمانی طول می کشد. در ادامه در این مورد بیشتر بهتون توضیح می دهیم.

باگ گیری و رفع خطاهای ریسپانسیو صفحات در mobile suability  سرچ کنسول

اگر یادتون باشد در قسمت های قبلی گفتیم که باید بررسی کنیم ببینیم آیا مشکلات صفحات واحد است یا خیر؟ یعنی ببینیم یک عامل واحد در همه صفحات ایجاد اشکال کرده یا نه؟ برای فهمیدن این مسئله باید بررسی کنید اگر صفحه ای از Error به Valid تغییر وضعیت داد یا برعکس این تغییر وضعیت به دلیل ویرایش های اخیری بوده که در صفحه ایجاد کردید یا خیر؟ یا اینکه یک مورد کلی و یکسان در همه صفحات مثل فوتر سایت را تغییر دادید. این عامل یاعث می شود صفحات دیگر هم دچار Error شوند.

آموزش خطاها و رفع خطاهای گرازش mobile usability در گوگل سرچ کنسول

خطای Uses incompatible Plugins

هنگامی که شما از پلاگین های صفحه ساز قدیمی و یا غیر استاندارد در طراحی سایتتون استفاده کنید با این خطا مواجه می شوید. برای رفع این خطا پیشنهاد می شود که پلاگین صفحه ساز خود را به روز کنید و یا تغییر دهید. همچنین از صفحه ساز های مطابق با HTML5 استفاده نمایید.

خطای Viewport not set

view port کادری در نمایشگر کاربرانتان است که سایت شما در آن نمایش داده می شود. شما با استفاده از کد زیر در قسمت Header صفحه می توانید قبل از فراخوانی کد های css همه آن ها در قالب کادر صفحه نمایش کاربرانتان تنظیم کنید.

<‘meta name=’viewport’ content=’width=device-width, initial-scale=1′>

خطای Viewport not set to”device-width”

این خطا در صورتی به وجود میاد که صفحات سایت شما برای دیوایس های مختلف مثل موبایل و … ریسپانسیو نشده باشد. یعنی همه المان های داخل صفحه شما دارای یک سایز می باشد و در سایز های دیگر مانند موبایل نمایش درستی ندارند. با استفاده از متا تگی که در قسمت قبلی خدمتتون گفتیم میتوانید این مشکل را حل کنید.

خطای Content wider than screen

این خطا زمانی رخ می دهد که طول محتوای صفحه شما بیش از سایز صفحه نمایش کاربرانتان باشد. برای حل این مشکل باید در css صفحه طول محتوا های صفحه را کاهش دهید. سعی کنید از سایز هایی مانند 980px استفاده نمایید تا در همه اسکرین ها قابل نمایش باشند.

خطای Text too small to read

همانطور که از اسمش پیداست این خطا به این معناست که سایز نوشته های شما بسیار کوچک است. برای حل این مشکل تنها کافیست سایز نوشته های خود را افزایش دهید.

خطای Clickable elements too close together

این خطا هم به این معناست که لینک ها و یا دکمه های موجود در صفحات شما بسیار به هم نزدیک هستند و لمس آن ها بسیار دشوار است. برای رفع این خطا هم باید صفحه خود را یک بازبینی دیگر بکنید و المان ها را از هم فاصله بیشتری دهید.