سئوی موبایل مجموعه کارهایی است که تضمین می‌کند وب‌سایت شما هم برای کاربران و هم برای موتورهای جست‌وجو روی گوشی‌ها و تبلت‌ها بدون مشکل کار کند. امروز بخش بزرگی از استفاده از اینترنت از طریق گوشی انجام می‌شود و گوگل هنگام ارزیابی سایت شما در درجه اول به نسخه موبایلی آن نگاه می‌کند. یعنی تجربه موبایلی «یک ویژگی اضافه» نیست، بلکه چهره اصلی سایت شماست. در این راهنما، پایه‌های سئوی موبایل، خطاهای رایج و روش آزمودن آن را خواهید یافت.
سئوی موبایل چیست؟
سئوی موبایل شامل تنظیمات فنی و محتوایی است که باعث می‌شود صفحات شما روی صفحه کوچک درست نمایش داده شوند، سریع باز شوند، به‌راحتی قابل استفاده باشند و گوگل بتواند آن‌ها را کامل بخزد و ایندکس کند. هرچند ممکن است جدا از سئوی دسکتاپ به نظر برسد، در واقع به همان هدف می‌رسد: رساندن درست فرد به درست صفحه با کمترین اصطکاک. تفاوت در این است که آستانه صبر کاربر در موبایل پایین‌تر است، صفحه کوچک‌تر است و اتصال اغلب کندتر است.
ایندکس‌گذاری موبایل‌محور یعنی چه؟
ایندکس‌گذاری موبایل‌محور (Mobile-first indexing) یعنی گوگل نسخه موبایلی سایت را مبنای خزش، ایندکس‌گذاری و رتبه‌بندی قرار می‌دهد. پس از سال‌ها گذار، گوگل این رویکرد را برای همه سایت‌ها پیش‌فرض کرده است. نتیجه عملی این است: محتوا، لینک یا داده ساختاریافته‌ای که در صفحه موبایلی شما نیست، حتی اگر در دسکتاپ باشد، برای گوگل نادیده گرفته می‌شود.
- متنی که در موبایل پنهان یا کوتاه شده، جایگزین متنی که در دسکتاپ نمایش داده می‌شود نیست.
- لینک‌های داخلی که در موبایل نیستند، خزش و توزیع اعتبار را ضعیف می‌کنند.
- منابعی که در موبایل مسدود شده‌اند (CSS، JS، تصاویر)، مانع می‌شوند گوگل صفحه را درست «ببیند».
طراحی واکنش‌گرا و viewport
برای موبایل سه گزینه وجود دارد: طراحی واکنش‌گرا (responsive)، ارائه پویا (dynamic serving) و یک سایت موبایلی جداگانه (زیردامنه m.). گزینه‌ای که گوگل پیشنهاد می‌کند و نگهداری آن ساده‌تر است، طراحی واکنش‌گراست: یک نشانی، یک HTML و CSS که با عرض صفحه تنظیم می‌شود.
| روش | مزیت | عیب |
|---|---|---|
| طراحی واکنش‌گرا | یک URL، نگهداری آسان، برابری محتوا به‌طور طبیعی تأمین می‌شود | نیاز به تلاش برای طراحی و آزمون دارد |
| ارائه پویا | امکان ارائه HTML مخصوص هر دستگاه | پیچیده؛ با پیکربندی اشتباه، محتوا متفاوت می‌شود |
| سایت موبایلی جدا (m.) | رابط کاربری مخصوص موبایل | مدیریت دو سایت، خطر خطا در تغییر مسیر و canonical |
پایه طراحی واکنش‌گرا، برچسب viewport در بخش <head> صفحه است:
<meta name="viewport" content="width=device-width, initial-scale=1">
اگر این برچسب نباشد، مرورگر موبایل صفحه را با عرض دسکتاپ رسم و کوچک می‌کند و متن خوانا نمی‌شود. همچنین به‌جای تعریف
عرض صفحه با پیکسل ثابت (مثلاً 1200px)، از درصد، max-width و media query های CSS استفاده کنید.
برابری محتوای دسکتاپ و موبایل
در ایندکس‌گذاری موبایل‌محور، رایج‌ترین خطا «ساده‌سازی» محتوا در نسخه موبایلی است. توضیحاتی که برای جا باز کردن در منو حذف می‌شوند، جدول‌هایی که پنهان می‌شوند، نظراتی که در موبایل بارگذاری نمی‌شوند، ممکن است ناگهان از ایندکس خارج شوند. این موارد را کنترل کنید:
- متن اصلی: عنوان‌ها و پاراگراف‌ها باید در هر دو نسخه یکسان باشند. متنی که داخل آکاردئون یا تب نشان داده می‌شود مشکلی ندارد، اما حذف کامل آن مشکل است.
- عنوان، توضیحات متا و canonical: هر دو نسخه باید مقادیر یکسانی داشته باشند.
- داده ساختاریافته (schema): علامت‌گذاری‌هایی که در دسکتاپ هستند و در موبایل نیستند، از بین می‌روند.
- تصاویر و ویدیوها: در موبایل هم باید قابل دسترس باشند و متن جایگزین آن‌ها حفظ شود.
- لینک‌های داخلی: حتی اگر منو ساده شود، لینک به صفحات مهم باید در موبایل هم وجود داشته باشد؛ برای جزئیات به مقاله روش‌های افزایش ترافیک ارگانیک ما مراجعه کنید.
اندازه هدف لمسی و خوانایی
انگشت بسیار کمتر از نشانگر ماوس دقیق است. به همین دلیل دکمه‌ها، لینک‌ها و فیلدهای فرم باید به اندازه کافی بزرگ و از هم فاصله‌دار باشند. اندازه‌های عمومی پذیرفته‌شده:
- اندازه هدف لمسی: حداقل حدود 48×48 پیکسل CSS (بازه‌ای که دستورالعمل‌های گوگل و دسترس‌پذیری به آن اشاره می‌کنند).
- فاصله بین هدف‌ها: بین دو لینک کنار هم حداقل 8 پیکسل فاصله باشد تا انگشت روی عنصر اشتباه فرود نیاید.
- اندازه متن: متن اصلی حداقل 16 پیکسل باشد؛ کاربری که مجبور شود برای خواندن متن کوچک زوم کند، صفحه را ترک می‌کند.
- طول و فاصله خطوط: در صفحه باریک، خطوط کوتاه و فاصله خطی مناسب.
- پاپ‌آپ‌ها: پنجره‌هایی که بخش بزرگی از صفحه را می‌پوشانند و بستنشان سخت است، هم کاربر را دور می‌کنند و هم ممکن است در ارزیابی «تبلیغ مزاحم بین صفحات» گوگل مشکل ایجاد کنند.
یک آزمون عملی: گوشی را با یک دست نگه دارید، در سایت یک محصول جست‌وجو کنید و آن را به سبد اضافه کنید. هر نقطه‌ای که با انگشت شست به آن نمی‌رسید، یا به اشتباه روی آن زدید، یا باید برایش زوم می‌کردید، یک مشکل سئوی موبایل است که باید رفع شود.
سرعت در موبایل
در دستگاه‌های موبایل، پردازنده و اتصال اغلب ضعیف‌تر از دسکتاپ است؛ به همین دلیل همان صفحه در موبایل کندتر بارگذاری می‌شود. معیارهای تجربه کاربری گوگل یعنی LCP، INP و CLS با داده موبایلی هم ارزیابی می‌شوند. برای آستانه‌های دقیق، مقاله Core Web Vitals ما را ببینید. مؤثرترین بهبودها در موبایل:
- تصاویر را به فرمت WebP/AVIF تبدیل کنید و در اندازه متناسب با عرض دستگاه ارائه دهید (
srcset). - تصاویر و iframe های پایین صفحه را با تأخیر بارگذاری کنید.
- جاوااسکریپت و CSS استفاده‌نشده را پاک کنید؛ اسکریپت‌های شخص ثالث را محدود کنید.
- زمان پاسخ سرور را با کش و CDN کوتاه کنید.
- تعداد فونت‌ها را کم کنید و از
font-display: swapاستفاده کنید. - به تصاویر و فضای تبلیغات، ابعاد ثابت بدهید تا هنگام بارگذاری صفحه جابه‌جا نشوند.
ناوبری و طراحی منو در موبایل
منوی گسترده دسکتاپ روی موبایل جا نمی‌شود؛ در گوشی به منوی همبرگری، نوار پایینی یا دسته‌بندی‌های بازشونده نیاز است. یک منوی خوب موبایلی این ویژگی‌ها را دارد: سه تا پنج صفحه مهم با یک لمس قابل دسترس‌اند، کادر جست‌وجو دیده می‌شود، رفتار «بازگشت» طبق انتظار کار می‌کند و وقتی منو باز است، صفحه پشتش جابه‌جا نمی‌شود. هنگام ساده‌سازی منو، لینک‌های داخلی مهم را کاملاً حذف نکنید؛ چون گوگل نسخه موبایلی را مبنا قرار می‌دهد، لینک‌هایی که در موبایل نیستند می‌توانند توزیع اعتبار صفحه را هم تحت تأثیر قرار دهند.
فرم‌ها و مسیر پرداخت در موبایل
بازدیدکننده موبایلی پر کردن فرم یا ثبت سفارش را خیلی راحت‌تر از دسکتاپ رها می‌کند. تعداد فیلدها را کم کنید، نوع صفحه‌کلید مناسب را فعال کنید (برای شماره تلفن عددی و برای ایمیل صفحه‌کلید با @)، تکمیل خودکار را پشتیبانی کنید و پیام خطا را کنار همان فیلد نشان دهید. در مرحله پرداخت، روش‌های یک‌لمسی مانند Apple Pay و Google Pay می‌توانند نرخ تبدیل را به‌طور محسوسی بالا ببرند. این بهبودها مستقیماً فاکتور رتبه‌بندی نیستند، اما کوتاه‌ترین راه تبدیل ترافیک ارگانیک به مشتری واقعی‌اند.
خطاهایی که تجربه موبایل را خراب می‌کنند
| خطا | اثر | راه‌حل |
|---|---|---|
| نبودن برچسب viewport | صفحه کوچک می‌شود، متن خوانده نمی‌شود | برچسب meta viewport را اضافه کنید |
| اسکرول افقی | تصویر یا جدولی که از صفحه بیرون می‌زند، کاربر را خسته می‌کند | max-width: 100% و ظرف جدول قابل اسکرول |
| مسدود بودن CSS/JS | گوگل نمی‌تواند صفحه را درست رندر کند | منابع را در robots.txt مسدود نکنید |
| فلش یا افزونه‌های قدیمی | در موبایل اصلاً کار نمی‌کنند | از جایگزین HTML5 استفاده کنید |
| تغییر مسیر اشتباه | کاربر موبایلی به صفحه نامرتبط می‌رسد | به URL موبایلی که معادل همان صفحه دسکتاپ است تغییر مسیر دهید |
| هدف‌های لمسی کوچک | کلیک اشتباه، خروج از سایت | هدف‌هایی در حدود 48 پیکسل |
به داده واقعی نگاه کنید: آزمایشگاهی یک دستگاه و شرایط شبکه را شبیه‌سازی می‌کند. کاربران شما اما با گوشی‌ها و اتصال‌های بسیار متفاوت سایت را می‌گردند. گزارش «Core Web Vitals» در Search Console این تجربه واقعی کاربران را جداگانه برای موبایل و دسکتاپ نشان می‌دهد؛ برای تعیین اولویت، بیشتر به این داده تکیه کنید تا به امتیاز آزمایشگاهی.
سهم ترافیک موبایل بسته به صنعت فرق می‌کند؛ در حوزه غذا، خدمات محلی و خرید، اکثریت از گوشی می‌آیند، در حالی که در سایت‌های B2B و نرم‌افزاری سهم دسکتاپ ممکن است بیشتر باشد. نسبت خود را در گزارش دسته دستگاه Google Analytics ببینید و وزن کارتان را بر همان اساس تنظیم کنید. اما به یاد داشته باشید: گوگل برای رتبه‌بندی از نسخه موبایلی شما استفاده می‌کند، حتی اگر بیشتر بازدیدکنندگانتان از دسکتاپ بیایند.
ابزارهای آزمون و فهرست کنترل
برای سنجش وضعیت موبایلی‌تان ابزارهای رایگان و معتبری وجود دارد:
- PageSpeed Insights: نتایج جداگانه Core Web Vitals برای موبایل و دسکتاپ و پیشنهادهای بهبود را نشان می‌دهد.
- Search Console → URL Inspection: نشان می‌دهد Google با Googlebot موبایل صفحه را چگونه می‌بیند. برای راه‌اندازی، راهنمای شروع Search Console ما را ببینید.
- حالت دستگاه Chrome DevTools: اندازه‌های مختلف صفحه و شبکه کند را شبیه‌سازی می‌کند.
- آزمون با دستگاه واقعی: تست دستی روی چند گوشی و مرورگر مختلف، جای هیچ شبیه‌سازی‌ای را نمی‌گیرد.
فهرست کوتاه کنترل:
- برچسب meta viewport وجود دارد؟
- محتوای اصلی، عنوان‌ها و داده ساختاریافته در موبایل با دسکتاپ یکسان است؟
- هدف‌های لمسی به اندازه کافی بزرگ‌اند و متن خوانا است؟
- صفحه در موبایل آستانه‌های Core Web Vitals را رد می‌کند؟
- CSS، JS و تصاویر توسط robots.txt مسدود نشده‌اند؟
- پاپ‌آپ‌ها و تبلیغات محتوا را نمی‌پوشانند؟
اگر ترافیک موبایلی شما در یک صفحه به‌وضوح سریع ترک می‌شود، علت را با مراحل راهنمای کاهش نرخ خروج فوری ما هم بررسی کنید.
یک یادآوری پایانی: بهبودهای موبایل یک پروژه یک‌باره نیستند. یک افزونه تازه، اسکریپت تبلیغاتی یا تغییر طراحی می‌تواند تجربه موبایل را در یک شب خراب کند. بعد از تغییرات بزرگ، عادت کنید چند صفحه نماینده را دوباره آزمایش کنید.
نتیجه‌گیری
سئوی موبایل در دنیایی که گوگل سایت شما را از طریق نسخه موبایلی ارزیابی می‌کند، شرط اصلی است. با طراحی واکنش‌گرا شروع کنید، برابری محتوا را حفظ کنید، اندازه هدف‌های لمسی و متن را متناسب با انگشت تنظیم کنید و سرعت را با داده موبایلی بسنجید. سپس با Search Console و PageSpeed Insights کنترل منظم داشته باشید. یک تجربه موبایلی بی‌نقص رتبه تضمین‌شده به شما نمی‌دهد، اما موانعی را که کاربر را از دست می‌دهند برمی‌دارد و راه را برای نشان دادن کیفیت واقعی محتوایتان باز می‌کند.