برای دریافت آموزش رایگان سرچ کنسول کلیک کنید: آموزش رایگان سرچ کنسول
سلام! من نگینم، از وزیر سئو. تا حالا شده با موبایلت بری تو یه سایتی که خیلی منتظرش بودی، ولی اونقدر اذیت بشی که همون لحظه صفحه رو ببندی؟ مثلاً دکمه «خرید» اونقدر ریز باشه که انگشتت ده بار خطا بره، یا مجبور باشی برای خوندن یه خط، مدام زوم کنی؟
این یه تجربهی بد و بهشدت «اعتمادزدا»ست. این دقیقاً همون چیزیه که گوگل توی گزارش Experience (تجربه کاربری) سرچ کنسول سعی داره به ما بگه. امروز نمیخوایم یه گزارش فنی خشکوخالی رو بررسی کنیم؛ میخوایم با هم «نبض» سایت، یعنی همون گزارش Mobile Usability رو چک کنیم و یاد بگیریم چطور اون خطاهای قرمز رو به یه تجربهی سبز و لذتبخش برای کاربر تبدیل کنیم.
همونطور که گفتم، این گزارش پر از اصطلاحاته. بیا تو این جدول، رایجترین خطاها رو به زبان «خودمونی» و تجربی با هم مرور کنیم تا وقتی دیدیشون نترسی!
جدول کالبدشکافی خطاهای Mobile Usability: از زبان گوگل تا زبان نگین!
| نام خطای رسمی گوگل | معنی ساده و تجربیش چیه؟ | راه حل سریع و عملی (Quick Fix) |
| Text too small to read | فونتت اونقدر ریزه که کاربر داره با چشمای ریزکرده و با زحمت میخونه! | اندازه فونت پایه (Body) رو حداقل 16px تنظیم کن. |
| Clickable elements too close | مشکل «انگشت چاق» (Fat Finger)! دکمهها و لینکها رو مثل ساندویچ چسبوندی به هم. | دکمهها رو بزرگتر کن (حداقل 48×48 پیکسل) و بینشون «فضای تنفس» (Margin) بده. |
| Content wider than screen | یه چیزی (معمولاً عکس یا جدول) تو صفحه جا نشده و کاربر مجبوره اسکرول افقی کنه (مرگِ تجربه کاربری!). | برای عکسها و جداول max-width: 100% رو تو CSS تعریف کن. |
| Viewport not set | یادت رفته به مرورگر بگی: «هی! من نسخه موبایل دارم!» (در نتیجه سایتت مثل یه نقطه ریز نشون داده میشه). | تگ meta name="viewport" رو فوراً تو <head> سایتت کپی کن. |
گزارش Mobile Usability چیست و چرا نبض سئوی موبایل شماست؟
تعریف کاربری موبایل (Mobile Usability) به زبان ساده
ببین، Mobile Usability یعنی کاربرت وقتی با موبایل میاد تو سایتت، چقدر «راحت» میتونه به هدفش برسه.
تصور کن سایت تو یه اتاق پر از وسیلهست. حالا تصور کن کاربرت بخواد از طریق یه سوراخ کلید (یعنی صفحه موبایل) تمام اون وسایل رو ببینه، جابجا کنه و ازشون استفاده کنه!
کاربری موبایل یعنی:
- متنها اونقدری ریز نباشن که کاربر مجبور شه زوم کنه (Font size small).
- دکمهها و لینکها اونقدر به هم نچسبیده باشن که نشه با انگشت شست روشون کلیک کرد (Clickable elements too close).
- محتوا از کادر صفحه بیرون نزنه و کاربر مجبور به اسکرول افقی نشه (Content wider than screen).
خلاصه بگم: یعنی کاربرت بتونه بدون دردسر و زوم کردنهای مکرر، تو سایتت بچرخه و کارش رو انجام بده.
تفاوت Mobile-Friendly (سازگار با موبایل) و Mobile Usability (قابل استفاده در موبایل)
اینجا جاییه که خیلیا اشتباه میکنن. این دوتا یکی نیستن.
Mobile-Friendly (سازگار): یعنی سایت تو یه «نسخه» موبایلی هم داره. یعنی وقتی با موبایل بازش میکنی، همهچیز متناسب با اون صفحه کوچیک «چیده» میشه. شبیه یه ویترین مغازهست که از اونور خیابون قشنگ به نظر میاد.
Mobile Usability (قابل استفاده): یعنی وقتی وارد اون مغازه شدی (یعنی سایتت لود شد)، «واقعاً» میتونی خرید کنی. میتونی دکمه رو فشار بدی، فرم رو پر کنی، در رو باز کنی.
یه سایت میتونه Mobile-Friendly باشه (یعنی گوگل تشخیص بده نسخه موبایل داری)، ولی از نظر Usability افتضاح باشه (مثل همون سایت رزروی که من دیدم). اولی فقط یه چکباکس فنیه، دومی تجربه واقعی کاربره.
چرا این گزارش مستقیماً بر رتبه سئوی شما تأثیر میگذارد؟ (نگاهی به Mobile-First Indexing)
چند سال پیش گوگل یه مهمونی گرفت و همهمون رو به دنیای Mobile-First Indexing دعوت کرد. معنی این دعوتنامه چی بود؟
اینکه گوگل دیگه با لپتاپش نمیاد سایتت رو بررسی کنه؛ اون با موبایلش میاد.
ربات گوگل دقیقاً مثل یه کاربر موبایلی رفتار میکنه. اگه اون نتونه به راحتی تو سایتت بخزه (Crawl)، دکمهها رو ببینه و محتوا رو بخونه، چی میشه؟ به نظرش سایت تو تجربه خوبی ارائه نمیده.
وقتی گزارش Mobile Usability تو پر از خطای قرمز باشه، تو داری رسماً به گوگل میگی: «من برای کاربری که با موبایل میاد (یعنی تقریباً همهی کاربرای امروزی) ارزش قائل نیستم.» گوگل هم میگه: «اوکی، پس منم تو رو به کاربرای موبایلی نشون نمیدم.» به همین سادگی رتبههات رو از دست میدی.
ارتباط پنهان Mobile Usability با E-E-A-T (چگونه تجربه کاربری بد، اعتماد را از بین میبرد؟)
و اما میرسیم به بخش مورد علاقه من: چطور این خطاهای فنی، اعتماد (Trustworthiness) رو، که ستون اصلی E-E-A-T هست، نابود میکنه؟
برگردیم به داستان اون سایت رزرو. وقتی من نتونستم یه تقویم ساده رو باز کنم، میدونی چه حسی بهم دست داد؟ حس «عدم اطمینان».
با خودم گفتم: «وقتی اینا نتونستن یه دکمه ساده رو درست کنن، من چطوری بهشون اعتماد کنم و اطلاعات کارت اعتباریم رو وارد کنم؟ نکنه پولم بره و اصلاً رزروی انجام نشه؟»
اینجا دقیقاً جاییه که E (Experience – تجربه) و T (Trust – اعتماد) با هم گره میخورن:
- تجربه (E) بد: کاربر نمیتونه با سایت کار کنه (تجربه کاربری افتضاح).
- تخصص (E) ضعیف: این حس رو میده که پشت این سایت یه تیم حرفهای نیست (وگرنه این باگ ساده رو رفع میکردن).
- اعتماد (T) از دست رفته: در نهایت، کاربر بهت اعتماد نمیکنه. نه به محصولت، نه به برندت و نه به امنیت سایتت.
گزارش Mobile Usability فقط یه گزارش فنی نیست؛ اون گزارش «اعتماد» کاربر به توئه. هر خطای قرمز تو اون گزارش، مثل یه ترک روی دیوار اعتماد شماست.
آموزش گام به گام: چگونه گزارش Mobile Usability را در سرچ کنسول گوگل پیدا و تحلیل کنیم؟
دسترسی به گزارش: بخش Experience (تجربه) در منوی سرچ کنسول
این بخش قایم نشده، اتفاقاً گوگل جلوی چشم گذاشتتش.
- وارد اکانت سرچ کنسول گوگل (Google Search Console) سایتت شو.
- تو منوی سمت چپ (همون سایدبار)، یه کم بیا پایین.
- دنبال تایتل Experience (تجربه) بگرد.
- دقیقاً زیرش، گزینهی Mobile Usability رو میبینی.
همین. بزن روش تا وارد اتاق فرمان سئوی موبایلت بشیم.
درک نمودار: تفاوت صفحات “Error” (دارای خطا) و “Valid” (معتبر)
وقتی صفحه باز میشه، اولین چیزی که چشمت بهش میافته یه نمودار خطیه. این نمودار معمولاً دو تا رنگ اصلی داره: قرمز و سبز.
- 📈 خط قرمز (Error): این رنگ، زنگ خطره. اینا تعداد صفحاتی از سایتت هستن که گوگل موقع بررسی با موبایل، توشون به مشکل اساسی برخورده. اینا همون صفحاتیان که کاربر رو فراری میدن و رتبهت رو میکشن پایین. دیدن این خط قرمز باید اولین اولویتت برای اقدام باشه.
- 📉 خط سبز (Valid): این رنگ، رنگ آرامشه. اینا صفحاتی هستن که از نظر گوگل مشکل کاربری موبایل ندارن و «معتبر» شناخته شدن. هرچقدر این خط بالاتر و خط قرمز پایینتر باشه، یعنی کارت رو درست انجام دادی.
یه نکته مهم: ممکنه صفحاتی هم باشن که هنوز بررسی نشدن. تمرکز ما اول روی رفع خطاهای قرمز رنگه.
چگونه روند بهبود (یا افت) صفحات موبایلی خود را رصد کنیم؟
این نمودار یه عکس ثابت از دیروز نیست؛ یه فیلم از وضعیت سایت تو در طول زمانه. این بهترین ویژگیشه.
- رصد افت: فرض کن یه پلاگین جدید نصب کردی یا قالب سایتت رو آپدیت کردی. چند روز بعد میای به این گزارش سر میزنی و میبینی خط قرمز یهو جهش کرده! این یعنی اون تغییر جدیده، یه جای کار رو خراب کرده. این نمودار بهت کمک میکنه دقیقاً بفهمی مشکل از کِی شروع شده.
- رصد بهبود: حالا برعکس. تو و تیمت وقت گذاشتید و مثلاً مشکل «دکمهها خیلی به هم نزدیکن» رو حل کردید. بعد از اینکه تغییرات رو اعمال کردی و از گوگل خواستی دوباره بررسی کنه (Validate Fix)، میای اینجا و با لذت تماشا میکنی که چطور خط قرمز روز به روز آب میره و خط سبز جاش رو میگیره.
این گزارش، گزارش کارِ توئه. بهت میگه تلاشهات برای بهتر کردن تجربه کاربر نتیجه داده یا نه.
کالبدشکافی ۵ خطای رایج Mobile Usability (همراه با راه حل قطعی)
خطای ۱: Text too small to read (متن برای خواندن خیلی کوچک است)
این خطا یعنی کاربرت داره با این حالت سایتت رو میخونه! یعنی دقیقاً داری بهش میگی: «یا زوم کن یا برو!»
چرا این خطا رخ میدهد و چگونه اندازه فونت استاندارد را تنظیم کنیم؟
معمولاً این اتفاق میفته چون اندازه فونت رو با یه واحد ثابت مثل px (پیکسل) و خیلی کوچیک (مثلاً 12px) تنظیم کردی. فونت ۱۲ پیکسل روی دسکتاپ شاید خوانا باشه، ولی روی موبایل فاجعهست.
راهحل قطعی:
- اندازه پایه (Base Size): برای متن اصلی (body) سایتت، یه اندازه فونت پایه منطقی در نظر بگیر. 16px یه استاندارد عالی و خوانا برای شروع تو موبایle.
- استفاده از واحدهای نسبی (rem/em) در CSS: این بهترین دوست توئه. به جای اینکه بگی فونت «حتماً 14 پیکسل باشه»، از
remاستفاده میکنی. مثلاً میگیfont-size: 1rem. اینطوری، اگه اندازه فونت پایه 16px باشه، 1rem همون 16px میشه و به راحتی همهچیز متناسب با هم کوچیک و بزرگ میشه. این یعنی انعطافپذیری کامل.
خطای ۲: Clickable elements too close together (عناصر قابل کلیک خیلی نزدیک به هم)
این همون مشکل معروف به «انگشت چاق» (Fat Finger)ئه.
یادت رفته که کاربر با موس دقیقش روی دسکتاپ کلیک نمیکنه؛ اون با انگشت شستش روی صفحه میزنه. وقتی دو تا لینک یا دکمه رو مثل ساندویچ به هم میچسبونی، کاربر هر بار اشتباهی روی اون یکی کلیک میکنه و اعصابش خرد میشه.
اهمیت فضای تنفس (Padding/Margin):
راهحل این مشکل، دادنِ «فضای تنفس» به دکمههاته.
- Margin (فاصله بیرونی): به دکمهها از بیرون فاصله میده تا از همسایههاشون دور بشن.
- Padding (فاصله داخلی): خودِ دکمه رو بزرگتر و «گوشتیتر» میکنه تا سطح کلیکخورش بیشتر بشه، بدون اینکه نوشتهی داخلش بزرگ بشه.
استانداردهای گوگل برای حداقل اندازه و فاصله دکمهها:
گوگل رسماً توصیه میکنه که عناصر قابل کلیک (مثل دکمهها) حداقل 48×48 پیکسل CSS باشن. این یه اندازه امنه که انگشت شست راحت روش میشینه. همچنین، بین این عناصر هم حداقل ۸ پیکسل فاصله بذار.
خطای ۳: Content wider than screen (محتوای عریضتر از صفحه)
بدترین تجربه ممکن! یعنی کاربر برای خوندن یه جمله، باید مدام صفحه رو افقی جابجا کنه (اسکرول افقی). این یعنی مرگِ تجربه کاربری.
شناسایی عامل ایجادکننده اسکرول افقی:
این خطا یعنی یه چیزی تو صفحه «جا نشده». معمولاً متهم اصلی یکی از ایناست:
- یه عکس خیلی بزرگ که بهش نگفتی اندازهش رو با صفحه هماهنگ کنه.
- یه جدول داده که ستونهاش زیاده و تو موبایل جا نشده.
- یه بخش از کد CSS که یه عرض ثابت (مثلاً
width: 600px) برای یه عنصر تعریف کرده.
راه حل: بازبینی CSS، استفاده از Responsive Design و مدیریت تصاویر بزرگ:
- برای تصاویر: این کد رو به CSS عکسهات اضافه کن تا همیشه «بچه حرفگوشکنی» باشن و از کادر بیرون نزنن:
CSS
img { max-width: 100%; height: auto; } - برای CSS: دنبال کدهایی با
widthثابت بگرد و حذفشون کن یا باmax-widthجایگزین کن. - برای جداول: جداول تو موبایل قلق دارن. یا باید طراحیشون رو عوض کنی یا اجازه بدی که خودِ جدول به تنهایی اسکرول افقی بخوره، نه کل صفحه.
خطای ۴: Viewport not set (ویوپورت تنظیم نشده است)
این خطا یکم فنیتره، ولی راهحلش یه خط کده!
تگ متا ویوپورت (Meta Viewport Tag) چیست و چرا حیاتی است؟
وقتی این تگ تو سایتت نباشه، مرورگر موبایل گیج میشه. نمیدونه باید صفحه رو چطوری نشون بده. پس چیکار میکنه؟ کل نسخه دسکتاپ رو تو اون صفحه ۴ اینچی «جا میده»! نتیجهش این میشه که سایتت مثل یه نقشه خیلی ریز از دور دیده میشه.
تگ Viewport به مرورگر میگه: «هی! من برای موبایل آمادهام. عرض صفحه رو مساوی عرض دستگاه در نظر بگیر و الکی زوم نکن (initial-scale=1.0).»
ارائه کد دقیق و استاندارد تگ Viewport برای کپی کردن:
اگه این خطا رو داری، همین الان این کد رو کپی کن و تو بخش <head> تمام صفحات سایتت (معمولاً تو فایل header.php یا مشابهش) قرار بده:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
همین. مشکل حل شد!
خطای ۵: Uses incompatible plugins (استفاده از افزونههای ناسازگار)
اگه هنوز این خطا رو میبینی، یعنی سایتت یه کم… خب… خاک گرفته!
چرا هنوز این خطا (مربوط به فلش) را میبینید و چگونه آن را حذف کنید؟
این خطا در ۹۹.۹ درصد موارد یعنی: فلش (Flash).
یادته قدیما سایتها پر از انیمیشن و بنرهای چشمکزن «فلش» بودن؟ چند سال پیش، دنیای وب رسماً با فلش خداحافظی کرد چون هم سنگین بود، هم ناامن، و مهمتر از همه: روی موبایلها (مخصوصاً آیفون) اصلاً کار نمیکرد.
اگه این خطا رو داری، یعنی یه گوشهای از سایتت هنوز یه بنر، یه ویدیو پلیر، یا یه انیمیشن قدیمی فلش داره.
راهحل:
- پیداش کن (معمولاً بنرهای تبلیغاتی قدیمی یا هدرهای متحرک).
- فوراً حذفش کن.
- اگه به اون انیمیشن نیاز داری، با تکنولوژیهای مدرن مثل HTML5, CSS3, یا JavaScript (یا حتی یه فایل GIF ساده) جایگزینش کن.
خب، کار سخت رو انجام دادی، تغییرات CSS رو اعمال کردی، فونتها رو درشت کردی، و فاصلهی دکمهها رو زیاد کردی. سایتت حالا تو گوشی خودت بینقص به نظر میرسه.
اما یه قدم حیاتی مونده: باید به گوگل خبر بدی!
گوگل خودش اتوماتیک و هر روز نمیاد چک کنه ببینه تو بالاخره اون مشکل رو حل کردی یا نه. تو باید رسماً «اعلام» کنی. بیا ببینیم چطوری.
فرآیند اعتبارسنجی (Validate Fix): چگونه به گوگل بگوییم مشکل حل شد؟
آموزش گام به گام استفاده از دکمه “Validate Fix” پس از رفع خطاها
این فرآیند خیلی سادهتر از چیزیه که فکر میکنی.
- برگرد به گزارش: اول برو تو همون گزارش Mobile Usability.
- خطا رو باز کن: روی یکی از اون دستهبندیهای خطا که قرمز بودن (مثلاً “Text too small to read”) کلیک کن.
- دکمه رو پیدا کن: حالا که خطاها رو (مثلاً در سطح کدهای CSS یا قالب سایتت) برطرف کردی، تو همون صفحه گزارش خطا، یه دکمهی برجسته میبینی که روش نوشته Validate Fix (اعتبارسنجی اصلاح).
- کلیک کن: روش کلیک کن.
- تایید شروع: گوگل یه پیام میده که «باشه، من اینا رو دوباره بررسی میکنم».
همین! تو رسماً به گوگل گفتی: «من تکالیفم رو انجام دادم، لطفاً برگهم رو دوباره تصحیح کن.»
چقدر طول میکشد تا اعتبارسنجی کامل شود؟ (تجربه عملی و مدیریت انتظار)
و اما میرسیم به سوال همیشگی… چقدر باید منتظر بمونیم؟
جواب صادقانه و تجربهی من (نگین): هیچکس زمان دقیقش رو نمیدونه و خیلی متغیره.
- حرف رسمی گوگل: گوگل معمولاً میگه «چند روز تا یک هفته».
- تجربهی عملی من:
- برای سایتهای کوچیک با خطاهای کم، گاهی ۲ تا ۳ روزه هم نتیجه رو دیدم.
- برای سایتهای بزرگ با هزاران صفحه درگیر خطا، من تا سه هفته هم منتظر موندم.
- سرچ کنسول یه بازه ۲۸ روزه برای این اعتبارسنجیها داره.
نکته کلیدی مدیریت انتظار:
وقتی دکمه “Validate Fix” رو زدی، دیگه بهش دست نزن! صبور باش. اگه مدام این دکمه رو بزنی، فقط فرآیند رو از اول ریست میکنی.
تو گزارش میتونی روند رو ببینی. گوگل اول تست رو «شروع» میکنه (Started)، بعد کمکم صفحات رو بررسی میکنه و نمودارها تغییر میکنن.
تفاوت اعتبارسنجی و استفاده از ابزار Mobile-Friendly Test (تست زنده)
اینجا جاییه که خیلیها گیج میشن. این دوتا ابزار هدفشون کاملاً متفاوته. بزار با یه مثال برات بگم:
۱. ابزار Mobile-Friendly Test (تست زنده):
- این چیه؟ این ابزار (که الان بخشی از URL Inspection Tool هم هست)، مثل یه عکس فوری عمل میکنه.
- کاربردش کیه؟ قبل از اینکه دکمه “Validate Fix” رو بزنی.
- مثال: تو فکر میکنی مشکل فونت رو تو یه صفحه از سایتت حل کردی. URL همون صفحه رو میدی به این ابزار و “Test Live URL” رو میزنی. گوگل همون لحظه میره اون صفحه رو «زنده» بررسی میکنه و بهت میگه: «آره، همین الان که من دیدم، این یه دونه صفحه درست شده.»
- هدف: برای چک کردن تصادفی و مطمئن شدن از اینکه راه حل تو کار میکنه.
۲. دکمه “Validate Fix” (فرآیند اعتبارسنجی):
- این چیه؟ این مثل یه پروژه بلندمدت برای گوگله.
- کاربردش کیه؟ بعد از اینکه مطمئن شدی مشکل رو در کل سایت (یا در تمام صفحات اون دسته از خطا) حل کردی.
- مثال: تو به گوگل میگی: «من مشکل فونت رو در کل قالب سایتم حل کردم. لطفاً برو تمام اون ۱۰۰۰ صفحهای که قبلاً ازم خطا گرفته بودی رو سر فرصت دوباره بررسی کن و از لیست خطاها پاک کن.»
خلاصه:
اول با تست زنده یکی دو تا صفحه رو چک کن تا از راه حلت مطمئن بشی. وقتی مطمئن شدی، Validate Fix رو بزن تا کل پروژه رو برای گوگل بفرستی.
فراتر از گزارش: نکات طلایی برای تجربه کاربری موبایل بینقص (E-E-A-T)
تجربه ما: ۳ اشتباه رایجی که باعث خطای Mobile Usability میشوند
تو این چند سال تو «وزیر سئو»، ما دیدیم که خیلی از خطاهای کاربری موبایل، حتی تو گزارش سرچ کنسول هم نمیان، ولی کاربر رو فراری میدن. اینا تجربیات واقعی ما هستن:
- جداول دادهی سرکش: وای از جداول. یه جدول مقایسهای ۳ ستونه که تو دسکتاپ عالیه، وقتی تو موبایل میاد، یا کل صفحه رو به هم میریزه و اسکرول افقی (Content wider than screen) ایجاد میکنه، یا اونقدر ریز میشه که خوانا نیست.
- فرمهای عذابآور: فرمهای تماس یا ثبتنام با ۱۰ تا فیلد! پر کردن اینا با کیبورد موبایل یه عذاب واقعیه. کاربر خسته میشه و صفحه رو میبنده.
- عکسهای سنگین و بدون سایز: یه عکس ۳ مگابایتی که هیچ ابعادی هم (width/height) براش تعریف نشده. این عکس نه تنها سرعت لود صفحه (LCP) رو داغون میکنه، بلکه باعث پرش صفحه (CLS) هم میشه.
طراحی برای انگشت شست (Thumb-Friendly Design) چیست؟ (نشان دادن تجربه)
اینجا دقیقاً همونجاییه که «تجربه» (Experience) واقعی ما به عنوان متخصص سئو یا طراح سایت، خودش رو نشون میده.
«طراحی برای انگشت شست» یعنی یادت باشه کاربرت چطوری گوشی رو دستش میگیره. اکثر ما گوشی رو با یه دست میگیریم و با انگشت شست همون دست، صفحه رو اسکرول میکنیم و کلیک میکنیم.
یه «نقشه حرارتی» برای انگشت شست وجود داره:
- منطقه سبز (راحت): پایین و وسط صفحه. بهترین جا برای دکمههای حیاتی (مثل “افزودن به سبد خرید” یا “ثبت نظر”).
- منطقه زرد (کششی): وسط صفحه. کاربر باید انگشتش رو کمی بکشه تا بهش برسه.
- منطقه قرمز (سخت): بالا و گوشههای مخالف صفحه.
ما معمولاً چیکار میکنیم؟ دکمه “خرید” یا منوی همبرگری رو میذاریم نوک بالای صفحه (تو منطقه قرمز)، جایی که انگشت شست اصلاً بهش نمیرسه!
طراحی برای انگشت شست، یعنی نشون بدی که تو واقعاً میدونی کاربرت «در عمل» چطور از محصولت استفاده میکنه و براش یه تجربه راحت میسازی.
ارتباط Core Web Vitals (مخصوصاً CLS) با کاربری موبایل
وای از CLS یا (Cumulative Layout Shift)! این یکی از بدترین، رو اعصابترین و مخربترین تجربههاییه که میتونی به کاربر موبایلی بدی.
CLS یعنی «پرش صفحه».
تا حالا برات پیش اومده؟ داری یه متن رو میخونی یا میخوای روی یه دکمه کلیک کنی. دقیقاً لحظهای که انگشتت به صفحه نزدیک میشه، یه بنر تبلیغاتی یا یه عکس که دیر لود شده، یهو بالای صفحه ظاهر میشه و کل محتوا رو «هل میده» پایین.
نتیجه چی میشه؟ تو اشتباهی روی یه لینک دیگه یا یه دکمه دیگه (مثلاً “حذف” به جای “تایید”) کلیک میکنی.
این حس عصبانیت و بیاعتمادی، دقیقاً CLSئه. این اتفاق تو موبایل صد برابر بدتره چون صفحه کوچیکه. یه CLS بالا نه تنها امتیاز Core Web Vitals تو رو نابود میکنه، بلکه مستقیماً به کاربردپذیری (Usability) تو شلیک میکنه و باعث میشه کاربر حس رضایتبخشی از سایتت نداشته باشه.
مدیریت صحیح Pop-up ها و تبلیغات بینابینی (Interstitial) در موبایل
و میرسیم به قاتل شماره یک تجربه موبایل: پاپآپها و تبلیغات مزاحم.
ببین، هم گوگل و هم کاربرها، از تبلیغات بینابینی (Interstitial) که به محض ورود کاربر کل صفحه رو میگیرن، «متنفرن».
تو موبایل، بستن این پاپآپها یه کابوسه. اون دکمه ضربدر (X) کوفتی:
- یا اونقدر ریزه که انگشت شست روش نمیخوره.
- یا عمداً یه گوشه غیرقابل دسترس (مثل منطقه قرمز انگشت شست) قرار گرفته.
- یا اصلاً وجود نداره و مجبوری ۵ ثانیه صبر کنی.
راه حل چیه؟ گوگل رسماً بابت این موضوع به سایتها پنالتی میده (مخصوصاً اگه محتوای پشت پاپآپ رو بلاک کنه).
اگه مجبوری از پاپآپ استفاده کنی (مثلاً برای تایید سن، قوانین کوکی، یا یه تخفیف خیلی ویژه):
- اندازه معقول: به شکل یه بنر کوچیک پایین صفحه باشه (مثل بنر اپلیکیشن).
- مزاحم نباشه: هرگز کل محتوای اصلی رو نپوشونه.
- دکمه خروج واضح: دکمه “بستن” بزرگ، خوانا و در دسترس باشه.
- زمانبندی: به محض ورود کاربر نشونش نده. بذار کاربر حداقل چند ثانیه با سایتت تعامل کنه.
دیدی؟ فراتر رفتن از گزارش فنی یعنی همین. یعنی به جای اینکه فقط «مشکل» رو حل کنیم، یه «تجربه» لذتبخش بسازیم. یعنی به اون انگشت شست کاربر احترام بذاریم!
خب رفیق، رسیدیم به ایستگاه آخر این سفر.
بعد از اینهمه گپوگفت در مورد «نبض» سایت (همون Mobile Usability)، وقتشه یه جمعبندی نهایی داشته باشیم. میخوام یه چکلیست بهت بدم که بذاری جلوی دستت و خیالت راحت باشه که همهچیز رو پوشش دادی.
این چکلیست عصارهی همون تجربهایه (E-E-A-T) که ازش حرف زدیم. بذار خیالت رو راحت کنم.
جمعبندی: چکلیست نهایی و سوالات متداول (FAQ)
چکلیست ۱۰ مرحلهای برای اطمینان از Mobile-Friendly بودن کامل سایت
این چکلیست شخصی منه. از بخش فنی شروع میشه و به بخش «حس خوب» کاربر میرسه:
- تگ Viewport: مطمئنی اون کد
meta viewportحیاتی رو تو<head>سایتت گذاشتی؟ (این الفباست!) - اسکرول افقی (No Horizontal Scroll): برو تو سایتت و یه صفحه رو باز کن. سعی کن صفحه رو افقی جابجا کنی. اگه رفتی، یعنی خطای
Content wider than screenداری. (متهم اصلی: عکسها یا جداول سرکش). - خوانایی فونت (Readability): متن اصلیت رو بدون زوم کردن میتونی بخونی؟ (حداقل 16px یادت نره).
- فاصله دکمهها (The Thumb Zone): میتونی راحت روی «افزودن به سبد خرید» کلیک کنی، بدون اینکه دستت به «حذف» بخوره؟ (قانون 48×48 پیکسل و فضای تنفس یادت باشه).
- سرعت لود (LCP/CLS): آیا صفحه موقع لود شدن «میپره»؟ (مراقب CLS و اون بنرهای مزاحم باش).
- تست زنده (Live Test): قبل از زدن دکمه “Validate Fix”، حتماً چند تا از URLهای اصلی رو با ابزار Mobile-Friendly Test (یا URL Inspection) تست زنده بگیر تا مطمئن شی مشکل واقعاً حل شده.
- مدیریت پاپآپ: پاپآپهات کل صفحه رو نمیگیرن؟ دکمه «بستن» (X) اونقدر ریز نیست که کاربر رو عصبانی کنه؟
- فرمها (Forms): پر کردن فرم تماس یا ثبتنام با کیبورد موبایل راحته؟ (لطفاً ۱۰ تا فیلد نذار!)
- افزونههای ناسازگار: هنوز جایی از سایتت «فلش» (Flash) نداری؟ (اگه داری، همین الان حذفش کن!)
- اعتبارسنجی (Validate Fix): و در آخر، اگه خطا داشتی و حلش کردی، حتماً دکمه “Validate Fix” رو بزن و صبور باش تا گوگل بررسی کنه.
سوالات متداول: آیا خطاهای Mobile Usability سایت من را پنالتی میکند؟
این سوال، سوال مرگ و زندگیه. بذار خیلی صریح و دوستانه بهت جواب بدم.
کلمهی «پنالتی» (Penalty) شاید یه کم ترسناک و اغراقآمیز باشه. پنالتی دستی (Manual Action) معمولاً برای اسپم، خرید بکلینک و کارهای اینطوریه.
اما… (و این «اما» خیلی مهمه)… بله، نداشتن کاربری موبایل خوب، به شدت روی رتبهت تأثیر منفی میذاره.
ببین، ما تو دنیای Mobile-First Indexing زندگی میکنیم. یعنی گوگل اول نسخهی موبایل سایتت رو میبینه.
- وقتی سایتت پر از خطای Mobile Usability باشه، گوگل نمیتونه به راحتی تو سایتت بخزه (Crawl) و محتوات رو بفهمه.
- وقتی کاربر با موبایل میاد تو سایتت و همون تجربهی بد من تو اون «سایت رزرو» (یادت که هست؟) براش تکرار میشه، سریع برمیگرده بیرون (Bounce Rate).
گوگل اینا رو میفهمه. میفهمه که سایت تو اون «تجربه» (E) و «اعتماد» (T) لازم رو نداره.
پس این یه «پنالتی» به معنی جریمهی دستی نیست؛ این یه «حذف شدن طبیعی از رقابت»ئه. گوگل سایت رقیبت رو که برای انگشت شست کاربرش احترام قائل بوده، بالاتر از تو نشون میده.
پس بله، اگه به این گزارش بیتوجهی کنی، عملاً داری رتبههات رو به رقبا تقدیم میکنی.
این چکلیست رو که مرور کردی، به نظرت کدوم موردش تو سایتهای ایرانی از همه بیشتر نادیده گرفته میشه؟ همون پاپآپهای مزاحم، یا فونتهای ریز؟ خیلی دوست دارم نظرت رو بدونم.
