سلام! نگین شیخالاسلامیام. بیا یه سناریوی واقعی رو تصور کنیم: نصف شب، با گوشی دنبال یه جواب مهمی… روی لینک اول کلیک میکنی و… فاجعه! فونت ریز، دکمهها قاطی پاتی، صفحه از کادر زده بیرون. چه حسی بهت دست میده؟
همون لحظه «بک» میزنی.
این دقیقاً تجربهایه که اگه سایتت «موبایل فرندلی» نباشه، داری هر روز به کاربرهات میدی. خیلیا فکر میکنن این فقط یه بحث ظاهری یا یه آپشن لوکسه، اما راستش رو بخوای، این ستون فقرات بخش مهمی از سئو تکنیکال (Technical SEO) و دلیل اصلی «بقا»ی سایتته. امروز میخوام برات کالبدشکافی کنم که چطور از این کابوس فرار کنی و کاری کنی کاربر موبایلت، تو همون چند ثانیه اول، حس کنه جاش درسته.
| رویکرد فنی | به زبان ساده چیست؟ | نظر گوگل و نگین! |
| طراحی واکنشگرا (Responsive) | یک سایت، یک URL. سایت مثل آب خودش رو با اندازه صفحه (موبایل، تبلت، دسکتاپ) تطبیق میده. | استاندارد طلایی. 🥇 گوگل عاشقشه. مدیریت آسون، تجربه کاربری یکپارچه و بهترین گزینه برای سئو. |
| ارائه پویا (Dynamic Serving) | یک URL، اما سرور تشخیص میده کاربر با چیه (موبایل یا دسکتاپ) و دو نسخه کد HTML متفاوت نشون میده. | پیچیده و پرخطر. 🙄 نگهداریش سخته و ریسک خطا (نشون دادن محتوای اشتباه به گوگل) داره. توصیه نمیشه. |
| سایت جداگانه (m-dot) | دو سایت کاملاً جدا (مثل example.com و m.example.com). |
کابوس سئو. ☠️ گوگل ازش متنفره. محتوای تکراری، تقسیم اعتبار (Link Juice) و تجربه کاربری گیجکننده. اصلاً سراغش نرو. |
Mobile-Friendly چیست و چرا بقای وبسایت شما به آن وابسته است؟
تا حالا شده با موبایلت دنبال یه جواب سریع بگردی، روی لینک اول کلیک کنی و با یه صفحهی به هم ریخته، فونتهای ریز که باید زوم کنی، یا دکمههایی که انقدر به هم چسبیدن که نمیتونی درست روشون کلیک کنی، مواجه بشی؟ چه حسی بهت دست داد؟… دقیقاً! همون لحظه دکمه «بک» رو زدی.
این حس، یعنی فاجعه برای اون وبسایت.
امروز دیگه «موبایل فرندلی» بودن یه آپشن لوکس یا یه کار فنیِ اضافه نیست؛ مستقیماً به «بقا»ی کسبوکار آنلاینت گره خورده. دنیایی که نصف بیشتر کاربرهاش با گوشی دارن وبگردی میکنن، جایی برای سایتی که به این کاربرها احترام نمیذاره، نداره.
تعریف دقیق Mobile-Friendliness: فراتر از “در موبایل باز شدن”
ببین، موبایل فرندلی بودن فقط این نیست که سایتت توی موبایل «باز» بشه. اصلاً!
موبایل فرندلی بودن یعنی «تجربه کاربری» (UX). یعنی اون کسی که با یه صفحه نمایش ۵ یا ۶ اینچی وارد سایتت میشه، بتونه:
-
راحت متن رو بخونه: بدون اینکه نیاز به زوم کردن (Zoom) داشته باشه.
-
راحت کلیک کنه: دکمهها و لینکها باید به اندازهای بزرگ و با فاصله مناسب باشن که انگشت شست راحت روشون بشینه.
-
راحت جابجا بشه: منوها باید واضح و قابل دسترس باشن و کاربر گیج نشه.
در یک کلام، موبایل فرندلی بودن یعنی کاربر وقتی با گوشی میاد، یه تجربه رضایتبخش داشته باشه. این یعنی طراحی «مردم-محور» (people-first)، نه یه طراحی که فقط کار کنه.
آمار کلیدی: چگونه نسخه موبایل ضعیف، کاربران و درآمد شما را فراری میدهد؟
راستش رو بخوای، آمار دقیق رو بذاریم کنار؛ بیا به «حس» ماجرا فکر کنیم و اتفاقی که واقعاً میافته.
وقتی اون کاربر با صفحهی به هم ریخته موبایل تو روبرو میشه و بلافاصله خارج میشه، چی میشه؟
۱. تو مشتری رو از دست دادی: اون کاربر قرار بود ازت خرید کنه، مقالهات رو بخونه یا فرمی رو پر کنه. ولی تو انقدر اذیتش کردی که رفت.
۲. به گوگل سیگنال بد دادی: کاربر به گوگل میگه «این نتیجه خوب نبود». چرا؟ چون احساس رضایت نکرده و حس میکنه برای پیدا کردن جوابش، باید دوباره جستجو کنه و بره سراغ منابع دیگه.
۳. اعتمادت رو خراب کردی: حتی اگه بهترین محتوای دنیا رو هم نوشته باشی، وقتی در یک بستر «بد» ارائهاش میدی، کل اعتبارت زیر سوال میره.
تجربه موبایل بد، سریعترین راه برای فراری دادن کاربرانیه که اتفاقاً آمادهترین خریدارها هستن (چون با موبایلشون در لحظه نیاز، جستجو کردن).
تأثیر مستقیم بر سئو: از آپدیت Mobilegeddon تا امروز
یادمه چند سال پیش گوگل یه زلزله واقعی تو دنیای سئو راه انداخت که بهش گفتن «Mobilegeddon» (ترکیب موبایل و آرماگدون!). اونجا بود که گوگل رسماً گفت: «سایتهایی که برای موبایل بهینه نیستن، تو نتایج موبایل رتبهشون رو از دست میدن.»
اما امروز داستان هزار برابر جدیتره.
ما الان در دنیای «Mobile-First Indexing» زندگی میکنیم. این یعنی چی؟ یعنی گوگل برای اینکه تصمیم بگیره سایتت در مورد چی هست و چه رتبهای باید بگیره، اول نسخهی موبایل سایتت رو نگاه میکنه.
اگه سایتت رو برای دسکتاپ عالی طراحی کرده باشی، ولی نسخهی موبایلت کند، ناقص یا به هم ریخته باشه، گوگل همون نسخهی ناقص رو به عنوان نسخهی اصلی سایتت در نظر میگیره و رتبهبندیات بر اساس همون انجام میشه.
این دقیقاً تفاوت بین محتوای «مردم-محور» و محتوای «موتور جستجو-محور» هست. اگه واقعاً به فکر کاربرت باشی، نمیتونی تجربه موبایلش رو نادیده بگیری.
کالبدشکافی Mobile-First Indexing: چرا گوگل ابتدا نسخه موبایل شما را میبیند؟
خب، بریم سراغ یکی از اون اصطلاحات سئو که چند سالیه حسابی سروصدا کرده: «ایندکس موبایل-اول» (Mobile-First Indexing). راستش رو بخوای، این فقط یه اصطلاح فنی نیست؛ این یه تغییر نگرش اساسیه.
چرا گوگل اول نسخه موبایل رو میبینه؟ جوابش خیلی سادهتر از چیزیه که فکر میکنی: چون کاربرهات اول نسخه موبایل رو میبینن.
یادته قبلاً چطور بود؟ همه ما پشت میز کامپیوتر مینشستیم و وبگردی میکردیم. موبایل یه چیز «اضافه» بود. اما الان چی؟ ما با موبایل زندگی میکنیم. توی تاکسی، موقع استراحت، حتی وقتی داریم تلویزیون میبینیم، گوشی دستمونه.
گوگل این رو دید. دید که اکثر جستجوها داره از موبایل میاد. برای همین گفت: «من دیگه نمیتونم نسخه دسکتاپ رو به عنوان نسخه اصلی سایت در نظر بگیرم. من باید همون چیزی رو ببینم که اکثر کاربرها میبینن.»
این یعنی گوگل از یه ربات دسکتاپ-محور، تبدیل شد به یه ربات موبایل-محور تا بتونه دنیا رو از چشم کاربر واقعی (که اکثراً موبایل به دست داره) ببینه.
Mobile-First Indexing به زبان ساده یعنی چه؟
ببین، خیلی سادهست.
قبلاً گوگل برای اینکه بفهمه سایتت در مورد چیه و چه رتبهای بهت بده، میومد سراغ نسخه دسکتاپ (کامپیوتر). اون نسخه اصلی بود. نسخه موبایل یه کپیِ فرعی حساب میشد.
«ایندکس موبایل-اول» یعنی این بازی دقیقاً برعکس شد.
الان، ربات گوگل (بهش میگیم Googlebot) با یه «عینک موبایل» میاد سراغت. نسخه موبایل سایتت رو میبینه و همون رو به عنوان نسخه اصلی و معیار رتبهبندی در نظر میگیره.
اگه نسخه دسکتاپت یه شاهکار باشه، ولی نسخه موبایلت ناقص، کند یا افتضاح باشه، گوگل همون نسخه ناقص و افتضاح رو ملاک قرار میده. تمام.
آیا سایت من به Mobile-First Indexing منتقل شده است؟ (نحوه بررسی)
بذار اول خیالت رو راحت کنم: الان دیگه تقریباً همهی سایتهای دنیا، از جمله سایت تو، روی Mobile-First Indexing هستن. گوگل این انتقال رو سالها پیش شروع کرد و رسماً اعلام کرد که این فرآیند کامل شده.
پس سوال بهتر این نیست که «آیا منتقل شدم؟»؛ سوال اینه که «گوگل نسخه موبایل من رو چطور میبینه؟»
اما اگه خیلی وسواس داری و میخوای مطمئن بشی که ربات گوگل با چه دیدی سایتت رو بررسی میکنه، یه راه ساده وجود داره:
-
برو توی گوگل سرچ کنسول (Google Search Console) سایتت.
-
توی منوی سمت چپ، برو پایین و روی Settings کلیک کن.
-
توی صفحه تنظیمات، یه بخشی هست به اسم About و زیرش Indexing crawler رو میبینی.
-
اونجا بهت میگه که ربات اصلی گوگل که سایتت رو بررسی میکنه چیه. اگه نوشته باشه Googlebot smartphone (یا چیزی شبیه به این)، یعنی تمامه. (که ۹۹.۹ درصد همینه).
پیامدهای نادیده گرفتن ایندکس موبایل-اول برای سئو و رتبهبندی
خب، اگه به این ماجرا اهمیت ندیم چی میشه؟ اینجا جاییه که اون حس بدِ «دیده نشدن» سراغت میاد. پیامدهاش واقعاً جدیه:
-
محتوای پنهان، محتوای گمشده: این بدترین قسمتشه. فرض کن یه پاراگراف مهم، یه دکمه خرید، یا یه بخش کلیدی از محتوات رو فقط تو نسخه دسکتاپ داری و تو نسخه موبایل (مثلاً برای خلوت شدن صفحه) حذفش کردی. میدونی چی میشه؟ گوگل اصلاً اون محتوا رو نمیبینه. انگار که هرگز وجود نداشته. تو عملاً داری بخشهایی از سایتت رو از دید گوگل مخفی میکنی.
-
سقوط آزاد در رتبهبندی: اگه نسخه موبایل سایتت کند باشه، فونتهاش ناخوانا باشه، یا کار کردن باهاش سخت باشه (همون موبایل-فرندلی نبودن)، گوگل این تجربه بد رو میبینه و رتبهت رو میکشه پایین. نه فقط تو موبایل، تو دسکتاپ هم تأثیر میذاره! چون نسخه اصلی همون موبایله.
-
از دست دادن اعتماد کاربر (و گوگل): وقتی کاربر با موبایل میاد و نمیتونه کاری که میخواد رو انجام بده، فرار میکنه. این فرار کردن (Bounce Rate) یه سیگنال وحشتناک به گوگل میده که «این سایت به دردبخور نبود».
نادیده گرفتن ایندکس موبایل-اول مثل اینه که بهترین ویترین مغازهات رو توی یه کوچهی بنبست که هیچکس ازش رد نمیشه، بچینی. محتوات هرچقدر هم عالی باشه، اگه تو نسخه موبایل درست دیده نشه، انگار اصلاً وجود نداره.
۳ رویکرد فنی برای پیادهسازی نسخه موبایل (کدام را انتخاب کنیم؟)
وقتی میخوایم سایتمون رو برای موبایل آماده کنیم، سه تا راه اصلی جلومون هست. بیا با هم کالبدشکافیشون کنیم تا ببینی کدومش واقعاً به درد امروز میخوره.
طراحی واکنشگرا (Responsive Web Design): استاندارد طلایی گوگل
این همون روشیه که گوگل عاشقشه و رسماً «توصیه» میکنه.
طراحی واکنشگرا یا ریسپانسیو، خیلی سادهست: تو فقط یک سایت داری، با یک URL و یک کد HTML.
فکر کن سایتت مثل «آب» باشه. اگه آب رو توی لیوان بریزی، شکل لیوان میشه؛ اگه توی پارچ بریزی، شکل پارچ میشه. سایت ریسپانسیو هم همینه. فرقی نمیکنه کاربر با یه مانیتور ۲۷ اینچی بیاد یا یه گوشی ۶ اینچی؛ اون یک کد، خودش رو با اندازه صفحه «تطبیق» میده.
چرا استاندارده؟
-
تجربه کاربری عالی: کاربر گیج نمیشه. همهچیز سر جای خودشه، فقط چیدمانش عوض میشه.
-
عالی برای سئو: چون فقط یک URL داری، تمام اعتبار لینکها، تمام محتوا و همهچیز روی همون یه آدرس جمع میشه. گوگل هم گیج نمیشه.
-
نگهداری راحت: فقط یه قالب رو باید بهروزرسانی کنی، نه دوتا یا سهتا.
این روش، دقیقاً همون چیزیه که ما بهش میگیم «کاربر-محور». یه بار درست میسازی و به همهی کاربرها احترام میذاری.
ارائه پویا (Dynamic Serving): مزایا و معایب
این روش یه کم پیچیدهتره. اینجا هم URL تو ثابته (مثلاً example.com)، اما داستان پشت پرده فرق میکنه.
سرور سایتت نقش یه نگهبان باهوش رو بازی میکنه. وقتی یه کاربر میاد، سرور میپرسه: «هی، تو با موبایل اومدی یا دسکتاپ؟»
-
اگه بگه دسکتاپ، سرور یه نسخه از کد HTML رو بهش میده.
-
اگه بگه موبایل، سرور یه نسخه کاملاً متفاوت از کد HTML رو بهش میده.
مزایاش چیه؟ میتونی یه نسخه موبایل فوقالعاده سبک و بهینه بسازی که هیچ ربطی به دسکتاپت نداره.
معایبش چیه؟
-
پیچیدگی فنی: نگهداریش سخته.
-
خطر خطا: چی میشه اگه سرور اشتباه تشخیص بده؟ اگه به ربات گوگل نسخه موبایل رو نشون بده و به کاربر نسخه دسکتاپ؟ این میتونه شبیه «کلاکینگ» (Cloaking) به نظر بیاد و گوگل از این کار متنفره.
-
بهروزرسانی سخت: یادت نره که دو نسخه کد رو باید مدیریت کنی.
صادقانه بگم، این روش معمولاً دردسرش به مزیتش نمیارزه، مگه اینکه دلایل خیلی خیلی خاصی داشته باشی.
سایت جداگانه (m-dot): چرا این روش دیگر توصیه نمیشود؟
این دیگه واقعاً روش «دایناسوری» ماجراست. احتمالاً قدیما یادتونه که وقتی با گوشی میرفتین فیسبوک، آدرس میشد m.facebook.com.
این یعنی تو دو تا سایت کاملاً جدا داری:
۱. example.com (برای دسکتاپ)
۲. m.example.com (برای موبایل)
این بدترین سناریوی ممکنه. چرا؟
-
کابوس سئو: تو عملاً داری «محتوای تکراری» (Duplicate Content) تولید میکنی. گوگل چطور بفهمه کدوم نسخه اصلیه؟
-
پخش شدن اعتبار: لینکهایی که به
example.comداده میشه یه طرف، لینکهایی که بهm.example.comداده میشه یه طرف دیگه. اعتبار سایتت رو داری نصف میکنی. -
تجربه کاربری بد: کاربرها گیج میشن. اگه یه لینک از نسخه
mرو برای دوستشون که پای دسکتاپه بفرستن چی؟ اون یه نسخه زشت موبایلی رو تو دسکتاپ میبینه.
گوگل صراحتاً میگه از این روش استفاده نکنید. این روش متعلق به دورانیه که گوشیهای هوشمند تازه اومده بودن و این تنها راهحل موقتی بود. امروز، استفاده ازش تقریباً یه خودکشی تو سئو محسوب میشه.
چکلیست طلایی طراحی تجربه کاربری (UX/UI) برای موبایل
بیا با هم این لیست رو تیک بزنیم.
تنظیم Viewport: اولین قدم فنی و حیاتی
اینو گذاشتم اول، چون اگه این یه خط کد رو نداشته باشی، انگار هیچ کاری نکردی.
«ویوپورت» (Viewport) چیه؟ به زبان ساده، این یه تگ متا توی <head> سایته که به مرورگر موبایل میگه: «هی! ببین، من برای تو بهینه شدم! لطفاً صفحهام رو اندازه همین صفحه موبایل نشون بده و زوم نکن.»
اگه این تگ نباشه، مرورگر گوشی فکر میکنه داره یه سایت دسکتاپ رو باز میکنه و کل سایت رو اونقدر کوچیک میکنه که توی صفحه جا بشه (همون حالتی که باید زوم کنی تا چیزی ببینی).
تنظیم کردنش اولین و حیاتیترین قدمه تا اصلاً به مرورگر بفهمونی که تو «ریسپانسیو» هستی.
خوانایی متن: انتخاب فونت و سایز استاندارد (حداقل 16px)
چند بار شده وارد یه صفحه شدی و برای خوندن متن، چشمهات رو ریز کردی یا مجبوری شدی زوم کنی؟ این بدترین حس دنیاست.
یادت باشه، کاربر موبایل حوصله نداره. اون میخواد «نگاه بندازه» و سریع بخونه.
-
قانون طلایی: برای متن بدنه (پاراگرافها)، حداقل سایز فونت ۱۶ پیکسل رو در نظر بگیر. کمتر از این یعنی داری کاربر رو اذیت میکنی.
-
فاصله خطوط (Line Height): به اندازهی فونت، فاصله بین خطوط هم مهمه. نذار خطها توی هم برن. یه فاصله ۱.۵ برابری معمولاً حس خوبی میده.
-
کنتراست: متن خاکستری روشن روی پسزمینه سفید؟ نه! مطمئن شو متن به راحتی قابل خوندنه.
خوانایی متن یعنی احترام به چشم کاربر.
اهداف لمسی (Tap Targets): جلوگیری از کلیکهای اشتباهی و فواصل دکمهها
تا حالا شده بخوای روی «صفحه بعد» کلیک کنی ولی دستت بخوره به «حذف»؟ این کابوس طراحی موبایله. ما بهش میگیم «مشکل انگشت شست»!
«اهداف لمسی» (Tap Targets) همون دکمهها، لینکها، و آیکونهایی هستن که کاربر قراره لمسشون کنه.
-
اندازه: دکمههات باید به اندازه کافی بزرگ باشن که انگشت شست راحت روشون بشینه. گوگل یه چیزی حدود ۴۸ در ۴۸ پیکسل رو پیشنهاد میده.
-
فاصله: مهمتر از اندازه، فاصلهی بین دکمههاست. اگه لینک «ویرایش» و «حذف» رو بچسبونی به هم، شک نکن کاربر اشتباه میکنه و این یعنی یه تجربه به شدت رضایتبخش!
طراحی برای موبایل یعنی طراحی برای «لمس»، نه برای «کلیک موس». این دوتا دنیاشون با هم فرق داره.
حذف پاپآپهای مزاحم و بهینهسازی فرمهای ثبتنام
صادقانه، هیچی رو مختر از این نیست که با موبایل وارد یه سایت میشی و قبل از اینکه اصلاً بفهمی کجایی، یه پاپآپِ «عضو شو!» یا «تخفیف بگیر!» کل صفحه رو میگیره و حالا باید با انگشت شستت دنبال اون دکمه ضربدر (×) کوچولوی لعنتی بگردی.
گوگل هم دقیقاً مثل من و تو از این پاپآپهای تمامصفحه و مزاحم (Interstitial) متنفره و رسماً بابتش سایتها رو جریمه میکنه.
در مورد فرمها هم:
فرم ثبتنام تو دسکتاپ ۱۰ تا فیلد داره؟ تو موبایل باید خلاصهاش کنی. کاربر موبایل حوصلهی تایپ کردن «کد ملی»، «نام پدر» و «آدرس دقیق پستی» رو نداره. فقط چیزهایی رو بپرس که واقعاً همون لحظه لازمه.
توجه ویژه به سرعت لود در موبایل (Core Web Vitals موبایل)
و میرسیم به پادشاه تجربه کاربری: سرعت.
کاربر دسکتاپ شاید پشت میزش نشسته باشه و حاضر باشه ۳-۴ ثانیه صبر کنه. اما کاربر موبایل؟ اون احتمالاً تو حرکته، اینترنتش شاید 3G باشه و «همین الان» جواب میخواد.
اینجاست که معیارهای Core Web Vitals (هستههای حیاتی وب) گوگل مهم میشن:
-
LCP (Largest Contentful Paint): چقدر طول میکشه بزرگترین عکس یا متن صفحه لود بشه؟ (سرعت لود)
-
FID/INP (First Input Delay / Interaction to Next Paint): اگه کاربر روی دکمهای کلیک کرد، سایت چقدر سریع جواب میده؟ (سرعت تعامل)
-
CLS (Cumulative Layout Shift): آیا وقتی صفحه داره لود میشه، همهچی بالا پایین میپره و باعث میشه اشتباهی کلیک کنی؟ (ثبات بصری)
اگه سایتت توی این سه مورد در موبایل کند باشه، نه فقط کاربر رو فراری دادی، بلکه مستقیماً داری به گوگل میگی «من سایت به دردبخوری نیستم» و رتبهات رو از دست میدی.
ابزارهای حیاتی برای تست Mobile-Friendliness
بیا سه تا از اصلیترین ابزارهایی که هر روز باید دم دستت باشن رو با هم باز کنیم.
آموزش کار با تست رسمی Google Mobile-Friendly Test
این ابزار، مُهر تأیید رسمی گوگل، یا خدای نکرده، مُهر ردشه!
کار کردن باهاش آب خوردنه. این مثل اینه که مستقیم بری دم درِ خونه گوگل و ازش بپرسی: «ببین، این آدرس صفحهام، به نظرت برای موبایل خوبه یا نه؟»
-
توی گوگل سرچ کن: Google Mobile-Friendly Test.
-
وارد ابزار شو و آدرس (URL) دقیق صفحهای که میخوای تست کنی رو وارد کن.
-
دکمه «Test URL» رو بزن.
چند ثانیه صبر میکنی و گوگل بهت یه جواب قاطع میده:
-
سبز: Page is mobile-friendly. (آخیش! خیالت راحته.)
-
قرمز: Page is not mobile-friendly. (این یعنی فاجعه!)
نکتهی خفنش اینه که بهت یه اسکرینشات از چیزی که «ربات گوگل» دیده هم نشون میده. اگه سایتت قرمزه، پایینش دقیقاً میگه چرا. مثلاً میگه «متن خیلی ریزه» یا «دکمهها به هم چسبیدن».
خواندن گزارش “قابلیت استفاده در تلفن همراه” (Mobile Usability) در سرچ کنسول
اگه ابزار قبلی یه «عکس فوری» بود، گزارش سرچ کنسول «فیلم کامل» زندگی سایتته.
این ابزار دیگه یه صفحه رو تست نمیکنه؛ این گزارش دائمی گوگل از تمام صفحات سایتته که ایندکس کرده. این دقیقاً همون چیزیه که گوگل داره بر اساسش به تو رتبه میده.
کجا پیداش کنی؟
توی گوگل سرچ کنسول، برو توی منوی Experience (تجربه) و بعد روی Mobile Usability کلیک کن.
اونجا دو تا نمودار میبینی: Usable (سبز) و Not usable (قرمز).
-
اگه همهچیز سبزه، تبریک میگم!
-
اگه صفحهی قرمزی داری، یعنی گوگل داره سرت داد میزنه!
وقتی روی نمودار قرمز کلیک کنی، دقیقاً بهت میگه چه صفحاتی چه مشکلی دارن. خطاهای رایج اینها هستن:
-
Text too small to read: متن برای خوندن زیادی ریزه.
-
Clickable elements too close together: اهداف لمسی (دکمهها) زیادی به هم چسبیدن.
-
Content wider than screen: محتوا از صفحه زده بیرون و اسکرول افقی ایجاد کرده (این خیلی بده!).
این گزارش بهترین دوست تو برای پیدا کردن مشکلات کل سایته، نه فقط یه صفحه.
بررسی با Lighthouse و شبیهساز موبایل در Chrome DevTools
این دیگه جعبه ابزار حرفهایهاست و خفنیش اینه که همین الان توی مرورگر کرومِ خودته!
۱. شبیهساز موبایل:
توی هر صفحهای از سایتت که هستی، دکمه F12 رو بزن (یا راستکلیک کن و Inspect رو بزن). یه پنجره باز میشه. اون بالا یه آیکون کوچیک شبیه موبایل و تبلت هست (Toggle device toolbar).
روش کلیک کن. تمام! حالا داری سایتت رو توی یه شبیهساز موبایل میبینی. از منوی بالا میتونی انواع گوشیها (آیفون، سامسونگ و…) رو انتخاب کنی و ببینی سایتت تو هرکدوم چه شکلیه. میتونی باهاش کار کنی، اسکرول کنی و حس واقعی کاربر رو درک کنی.
۲. ابزار Lighthouse:
حالا که تو همون حالت F12 هستی، دنبال یه تب به اسم Lighthouse بگرد.
Lighthouse یه چکاپ کامله. نه فقط موبایل-فرندلی بودن، بلکه همهچیز رو تست میکنه:
-
Performance: سرعت سایتت چقدره؟ (همون Core Web Vitals)
-
Accessibility: آیا برای افراد دارای معلولیت قابل استفادهست؟
-
Best Practices: آیا از روشهای مدرن کدنویسی استفاده کردی؟
-
SEO: آیا نکات پایهای سئو رو رعایت کردی؟
تیک Mobile رو بزن و دکمه Analyze page load رو فشار بده. بعد از چند ثانیه، یه گزارش کامل با نمره از ۱۰۰ بهت میده و دقیقاً میگه کجای کارِت میلنگه. این ابزار برای بهینهسازی سرعت و تجربه کاربری در موبایل، حکم طلا رو داره.
اشتباهات رایج (و پرهزینه) در بهینهسازی موبایل که تجربه کردهایم
بیایید از این تجربههای تلخ درس بگیریم.
خطای اول: بلاک کردن CSS یا JavaScript در فایل robots.txt
این یه اشتباه کلاسیکه که از دوران «سئوی عهد بوق» به جا مونده!
قدیما بعضیها فکر میکردن اگه جلوی دسترسی رباتهای گوگل به فایلهای CSS (استایل) و JS (جاوا اسکریپت) رو توی robots.txt بگیرن، دارن در مصرف «بودجه خزش» (Crawl Budget) صرفهجویی میکنن.
اما امروز، مخصوصاً با «ایندکس موبایل-اول»، این کار حکم خودکشی رو داره.
چرا؟ چون ربات موبایل گوگل فقط متن HTML رو نمیخونه؛ اون میخواد صفحه رو دقیقاً مثل کاربر «ببینه» و «رندر» کنه.
-
وقتی CSS رو بلاک میکنی، گوگل یه صفحه متنی درهمریخته و بدون استایل میبینه.
-
وقتی JS رو بلاک میکنی، ممکنه نصف محتوا، منوها، یا عملکردهای اصلی سایتت که با جاوا اسکریپت لود میشن رو اصلاً نبینه.
هزینهاش چیه؟ گوگل یه صفحه شکسته و زشت رو ایندکس میکنه و فکر میکنه سایتت همینه. من سایتهایی رو دیدم که رتبهشون نابود شد، فقط چون داشتن به گوگل یه صفحه کور و کچل نشون میدادن.
خطای دوم: عدم یکسانسازی محتوا، لینکها و دادههای ساختاریافته بین دسکتاپ و موبایل
این یکی دیگه واقعاً قلب آدم رو به درد میاره و متأسفانه، خیلی هم رایجه.
طرف میاد میگه: «میخوام نسخه موبایلم خیلی تمیز و مینیمال باشه». بعد برای «تمیز» شدن، چی کار میکنه؟
-
نصف پاراگرافهای مهم مقاله رو تو نسخه موبایل حذف میکنه.
-
لینکهای داخلی مهم رو تو موبایل نشون نمیده.
-
و بدتر از همه: دادههای ساختاریافته (Schema) رو یادش میره از دسکتاپ به موبایل منتقل کنه.
هزینهاش چیه؟
یادت نره: گوگل فقط نسخه موبایل رو به عنوان نسخه اصلی ایندکس میکنه.
اگه اون پاراگراف مهم تو موبایل نباشه، انگار اصلاً وجود نداره. اگه اون لینکها نباشن، اعتباری منتقل نمیشه. و اگه اون اسکما (مثلاً اسکیمای ستارهدهی محصول یا دستور پخت) تو نسخه موبایل نباشه، تو نتایج جستجو هم هیچ ستاره و ریچ ریزالتی نمیگیری.
این یعنی تو عملاً داری به گوگل میگی سایت من نصفه و نیمه است و هیچ دادهی ارزشمندی نداره.
خطای سوم: فراموش کردن بهینهسازی تصاویر برای سرعت لود موبایل
این یکی خیلی حس بدی به کاربر میده. سایت ریسپانسیو طراحی شده، همهچی خوشگله، اما اون عکس اصلی بالای صفحه (Hero Image) دو مگابایت حجم داره!
تو دفتر کارت با اینترنت وایفای پرسرعت تست میکنی، همهچی عالیه. اما کاربری که تو خیابون با اینترنت 4G داره سایت رو باز میکنه چی؟
اون کاربر باید چند ثانیه به یه صفحه سفید زل بزنه تا تازه عکس لود بشه. این حس یعنی «شکنجه».
هزینهاش چیه؟
این مستقیم میزنه تو سر Core Web Vitals، مخصوصاً شاخص LCP (مدت زمان لود بزرگترین عنصر صفحه).
سرعت پایین لود در موبایل فقط کاربر رو فراری نمیده؛ مستقیماً به گوگل سیگنال میده که «تجربه کاربری این سایت افتضاحه». من افت رتبههایی رو دیدم که فقط به خاطر بهینه نبودن همین چند تا عکس تو موبایل اتفاق افتاده. استفاده از فرمتهای جدید مثل WebP و فشردهسازی تصاویر برای موبایل دیگه یه آپشن نیست، مسئله «بقا» است.
سوالات متداول (FAQ) درباره بهینهسازی موبایل
آیا AMP همچنان ضروری است؟
جواب کوتاه: نه، اصلاً.
AMP (Accelerated Mobile Pages) یه پروژهای بود که گوگل چند سال پیش خیلی روش مانور میداد تا سرعت لود صفحات خبری رو توی موبایل به زیر ۱ ثانیه برسونه. چطور؟ با حذف کردن یه عالمه کد JS و CSS و برندینگ شما!
درسته که سریع بود، اما یه نسخه «لاغر و زشت» از سایتت تحویل میداد که اغلب نه حس برند تو رو داشت و نه قابلیتهای اصلی (مثل فرمهای پیچیده) رو.
الان چی شد؟ گوگل دیگه داشتن AMP رو برای بودن در بخش «Top Stories» اخبار الزامی نمیدونه. تمرکز گوگل از روی AMP برداشته شده و کاملاً رفته روی همون Core Web Vitals.
یعنی گوگل ترجیح میده تو همون سایت اصلی و ریسپانسیو خودت رو سریع کنی (که به کاربر یه تجربه کامل میده)، تا اینکه یه نسخه جدا و ناقص به اسم AMP داشته باشی. پس انرژیت رو بذار روی بهینه کردن همون سایت اصلیت.
تفاوت Mobile-Friendliness با Mobile-Usability چیست؟
این دو تا خیلی به هم نزدیکن ولی یکی نیستن. بذار یه مثال برات بزنم:
-
Mobile-Friendliness (دوستانه بودن با موبایل): این مثل «گواهینامه رانندگی» میمونه. یه تست لحظهای و فنیه که میگه «آیا تو حداقلها رو داری؟». ابزار Google Mobile-Friendly Test اینو میسنجه. آیا ویوپورت داری؟ آیا فونتت در نگاه اول قابل خوندنه؟ یه جواب ساده «آری» یا «خیر» بهت میده.
-
Mobile-Usability (قابلیت استفاده در موبایل): این مثل «پرونده رانندگی» تو در طول زمانه. این همون گزارشیه که توی سرچ کنسول میبینی. این ابزار به مرور زمان تمام صفحات سایتت رو بررسی میکنه و میگه در عمل و در تجربه واقعی کاربرها، آیا مشکلی وجود داشته یا نه. اینجاست که خطاهایی مثل «دکمهها زیادی به هم نزدیکن» یا «محتوا از صفحه بیرون زده» رو بهت گزارش میده.
پس «فرندلی» بودن یه چکاپ اولیه است، اما «یوزبیلیتی» گزارش تجربه واقعی و بلندمدت کاربرها از سایتته.
بهترین سایز فونت برای خوانایی در موبایل چقدر است؟
توی چکلیست طلایی هم بهش اشاره کردم، ولی اینقدر مهمه که باید دوباره روش تأکید کنم:
حداقل ۱۶ پیکسل (16px) برای متن اصلی بدنه.
ببین، ما برای «اسکن کردن» مطلب وارد سایت نمیشیم که چشممون رو ریز کنیم. ما میخوایم راحت و روان بخونیم. هر چیزی کمتر از ۱۶ پیکسل برای پاراگرافها، کاربر رو مجبور به زوم کردن میکنه و این یعنی یه «تجربه بد».
این ۱۶ پیکسل یه نقطه شروع امن و استاندارده که مطمئن باشی کاربرت داره با احترام کامل محتوات رو میخونه، نه اینکه باهاش کشتی بگیره.
جمعبندی
خب، اینم از سفرمون به دنیای «موبایل-اول».
دیدی؟ بهینهسازی موبایل دیگه یه آپشن «خوب-باشه» نیست؛ دقیقاً مثل داشتن آب و برق برای سایتته. این تماماً در مورد «احترام» به اون کاربريه که تو شلوغی روزش، توی مترو یا تاکسی، به تو اعتماد کرده و با گوشی کوچیکش اومده سراغت.
از فونت ۱۶ پیکسلی بگیر تا سرعت لود و دکمههایی که راحت لمس میشن، همهچیز داره یه پیام میده: «من به تو و وقتت اهمیت میدم.» این همون اعتمادیه که گوگل (و البته من!) عاشقشیم.
حالا تو بگو، آخرین باری که یه سایت (غیر موبایل فرندلی) با موبایلت باز کردی و واقعاً کلافه شدی، کی بود؟ اولین چیزی که تو ذوقت زد و باعث شد صفحه رو ببندی چی بود؟
