SHET16
English

تست ریسپانسیو سایت بر اساس ۳ مشخصه اصلی گوگل

همین الان یه لحظه سایتتون رو با موبایل باز کنید. اگه مجبور شدید صفحه رو زوم کنید تا متن رو بخونید، یا صفحه چپ‌وراست اسکرول خورد، یا خواستید رو یه لینک بزنید ولی اشتباهی رفتید یه جای دیگه… باید بدونید که همین چند ثانیه، احتمالاً دارید کاربر و رتبه‌تون تو گوگل رو از دست می‌دید.

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

چرا گوگل روی ریسپانسیو حساس است؟

قضیه خیلی ساده‌ست. الان بیشتر آدم‌ها با موبایل سرچ می‌کنن و وارد سایت‌ها می‌شن. پس منطقیه که گوگل بخواد سایت‌هایی رو بالاتر نشون بده که تجربه‌ی خوبی روی موبایل دارن. یعنی اگه سایتتون روی گوشی به‌هم‌ریخته باشه، نه‌تنها کاربر کلافه می‌شه، بلکه رتبه‌تون تو نتایج موبایلی هم می‌ره پایین. برای همینه که این موضوع فقط یه بحث ظاهری نیست، مستقیم رو سئوتون اثر می‌ذاره.

خب حالا بریم سراغ اصل ماجرا. گوگل تو مستنداتش می‌گه اگه می‌خواید سایتتون ریسپانسیو باشه، سه تا مشخصه‌ی اصلی رو باید رعایت کنید. یکی‌یکی می‌ریم جلو.

مشخصه اول: عرض صفحات نباید از عرض موبایل بیشتر باشه

این اولین و شاید مهم‌ترین موردیه که باید حواستون بهش باشه. منظور اینه که وقتی صفحه‌ی سایتتون رو روی گوشی باز می‌کنید، محتوا باید دقیقاً اندازه‌ی همون صفحه باشه، نه بزرگ‌تر.

نسخه موبایل میهن وردپرس
نسخه موبایل میهن وردپرس

از کجا بفهمیم صفحه‌مون درسته؟

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

چرا اسکرول افقی انقدر بده؟

چون یکی از همون چیزاییه که گوگل مستقیم روش انگشت گذاشته. اسکرول افقی یعنی یه چیزی از عرض صفحه بیرون زده و کاربر باید بجنگه تا ببیندش. جالبیش اینجاست که این مشکل رو فقط تو سایت‌های ضعیف نمی‌بینید؛ خیلی از سایت‌های پربازدید و معروف هم دقیقاً همین ایراد رو دارن. پس اگه دیدید سایتتون افقی اسکرول می‌خوره، بدونید که یه جای کار می‌لنگه و باید درستش کنید.

ریسپانسیو نبودن سایت‌های معروف
ریسپانسیو نبودن سایت‌های معروف

مشخصه دوم: سایز متن‌ها

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

سایز فونت مناسب برای موبایل چقدره؟

قانون کلیش اینه: از ۱۶ پیکسل به بالا برید، متنتون نرمال حساب می‌شه و از نظر ریسپانسیو گوگل هیچ مشکلی ندارید. حداقلش هم که بخواید برید، نباید از ۱۴ پیکسل پایین‌تر بیاید. یه بازه‌ی امن، همین ۱۴ تا ۱۶ پیکسل به بالاست.

یادتونه یه زمانی سایت‌ها پر بودن از متن‌های ۱۲ و ۱۳ پیکسلی؟ اون دوران تموم شده. الان دیگه استفاده از فونت‌های ریز نه‌تنها به چشم نمیاد، بلکه مستقیم روی ریسپانسیو بودن سایتتون اثر منفی می‌ذاره. پس اگه هنوز جایی از سایتتون متن ریز دارید، وقتشه بروزش کنید.

مشخصه سوم: چسبیده نبودن لینک‌ها و دکمه‌ها

مورد سوم هم به‌ظاهر کوچیکه ولی خیلی مهمه. لینک‌ها و دکمه‌های سایتتون نباید انقدر بهم نزدیک باشن که کاربر موقع تاچ کردن، اشتباهی رو یکی دیگه بزنه.

مشکل لینک‌های چسبیده چیست؟

فرض کنید کاربر می‌خواد رو دکمه‌ی «خانه» بزنه، ولی چون لینک‌ها چسبیده به هم‌ان، انگشتش می‌خوره به یه لینک دیگه و می‌ره تو صفحه‌ی مقالات یا یه محصولی که برای فروش گذاشتید. طرف گیج می‌شه. حالا یا مجبوره صفحه رو زوم کنه تا دقیق روی لینک درست بزنه، یا کلاً بی‌خیال می‌شه و از سایتتون می‌ره بیرون. هر دوش براتون ضرره.

گوگل این قضیه را چطور متوجه می‌شود؟

اینجا یه نکته‌ی جالب هست. گوگل وقتی می‌بینه لینک‌هاتون بیش از حد بهم نزدیکه، حدس می‌زنه که شاید عمداً دارید کاربر رو یه جورایی دور می‌زنید که اشتباهی جای دیگه‌ای کلیک کنه. پس این فاصله‌ی بین لینک‌ها فقط یه بحث زیبایی نیست؛ اعتماد گوگل به سایتتون هم بهش گره خورده. کاری کنید هر لینک یه مارجین (فاصله) درست‌وحسابی نسبت به بغلی‌هاش داشته باشه تا کاربر راحت بتونه همون چیزی رو که می‌خواد انتخاب کنه.

یه توصیه‌: از قالب و پلاگین درست استفاده کنید

اینو یادتون نره؛ نصف کار همینجا حل می‌شه. حتماً از قالبی استفاده کنید که خودش ریسپانسیو باشه، و اگه رو وردپرسید، پلاگین‌هایی نصب کنید که با موبایل سازگارن. خبر خوب اینه که این روزها تقریباً بیشتر قالب‌ها و پلاگین‌ها ریسپانسیو ساخته می‌شن، پس زیاد هم سختتون نمی‌شه. ولی حواستون باشه که همین رو هم چک کنید، چون اگه سایتتون اون سه تا مشخصه‌ای که گفتیم رو نداشته باشه، یعنی هنوز ریسپانسیو نیست.

چطور سایت را تست کنیم؟

حالا که همه‌ی این‌ها رو گفتیم، شاید بگید خب من از کجا بفهمم سایت خودم اوکیه یا نه؟ کارش خیلی ساده‌ست. کافیه برید تو گوگل و عبارت Google Mobile Friendly Test رو سرچ کنید. این سرویس مال خود گوگله و بهتون اجازه می‌ده سایتتونو از نظر ریسپانسیو بررسی کنید. آدرس سایتتونو می‌دید، تست می‌کنه و بهتون گزارش می‌ده. اگه توی نتیجه خطایی دیدید، یعنی یه جای کار سایتتون هنوز با موبایل جور نیست و باید درستش کنید.

Google Mobile Friendly Test
بررسی سایت در Google Mobile Friendly Test

جمع‌بندی

خب بذارید خلاصه‌ش کنم که تو ذهنتون بمونه. یه سایت ریسپانسیو سه تا ویژگی داره: عرض صفحاتش از عرض موبایل بیرون نمی‌زنه و اسکرول افقی نداره، متن‌هاش ریز نیست و بدون زوم راحت خونده می‌شه، و لینک‌هاش انقدری از هم فاصله دارن که کاربر راحت بتونه روشون بزنه. همینا رو رعایت کنید، هم کاربرتون راضیه هم گوگل. موفق باشید. 🙂

نظر شما در این مورد چیه؟

  1. U333582۳۰ آبان ۱۴۰۲

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

    • رضا راد۱ آذر ۱۴۰۲

      سلام وقت بخیر از پلاگین های دیکشنری استفاده کنید.

  2. U330615۲۹ آبان ۱۴۰۲

    سلام استاد عزیز
    استاد ببخشید چرا برای من ابزارک ها نمیان ؟ یعنی مثلا توی پوسته های دیگه نمیاد فقط توی اهورا برام میاد؟

    • رضا راد۳۰ آبان ۱۴۰۲

      سلام چون اون قالب ها ابزارک رو پشتیبانی نمیکنن.

  3. U317131۱۵ شهریور ۱۴۰۱

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

    • رضا راد۱۹ شهریور ۱۴۰۱

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

  4. U42145۲۰ مرداد ۱۴۰۰

    سلام . مرسی عالی بود . تو المنتور چجوری میتونم یه ریسپانسیو عالی داشته باشم ؟

  5. U20611۲۷ تیر ۱۴۰۰

    سلام
    من از افزونه wp hide برای مخفی سازی پلاگین ها و قالبم استفاده میکنم ولی به محض فعالسازی سرعت سایت خیلی میاد پایین
    منظورم همون افزونه ای که توی سرچر ها وردپرس یک باکس مستطیلی قرمز نشون میده
    و خیلی از سایت هار رو دیدم all in میان و افزونه ها رو طوری مخفی میکنن که هیچ اسمس ازشون نشون داده نمیشه و اون باکس قرمز هم نیست
    اول میخاستم علت افت سرعت رو بدونم
    دوم این که اونها از چه روشی استفاده میکنند با توجه به این که میگن از all in استفاده میکنیم بدون کد نویسی
    کد نویسی رو هم امتحان کردم اصلا جواب نمیده
    و سوال آرخم این که شما از چه سروی استفاده میکنید که این قدر سرعت سایتتون بالاست البته سایت من هم قبل از استفاده از اون پلاگین سرعت خوبی داره
    ممنون از پاسخ شما

  6. U38530۱۳ تیر ۱۴۰۰

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

  7. U30244۱۲ تیر ۱۴۰۰

    همچنین در بخش فاصله بین لینک‌ها، در بخشی از متن و در عبارت “احتمال برای شما نیز پیش آمده است که وارد وب‌سایتی شدید که کلیک کردن روی لینک‌های موجود در آن سخت است” اشتباهاً از کلمه احتمال به جای احتمالاً استفاده کرده‌اید.
    متشکرم.

  8. U30244۱۲ تیر ۱۴۰۰

    سلام.
    ممنون از شما بابت این مقاله که به شخصه در سایت خودم استفاده کردم.
    من اکثر متن هایم رو با سایز ۱۴ نوشته بودم و فکر می‌کردم مناسب است، در صورتی که اصلاً نمی‌دونستمدر حال حاضر سایز استانداردی نیست. و تغییرشون دادم به ۱۸ (چون در ورد و پاورپوینت و خلاصه اسناد خودم از سایز ۱۸ معمولاً استفاده می‌کنم).
    ولی ریسپانسیو کردن سایت با المنتور خیلی اذیت می‌کنه. به ویژه هدر وب‌سایت. آیا مقاله‌ای در رابطه با ریسپانسیو کردن وب‌سایت با المنتور دارید؟
    بسیار متشکرم.

    • رضا راد۱۳ تیر ۱۴۰۰

      درود بر شما سپاس. المنتور پیشفرض ریسپانسیو هست.

  9. U38555۱۱ تیر ۱۴۰۰

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

    • تیم پشتیبانیتیم پشتیبانی۱۲ تیر ۱۴۰۰

      درود
      نیاز هست که کدنویسی php رو یاد بگیرید

  10. U40188۱۱ تیر ۱۴۰۰

    سلام اقای حسینی راد کی اپدیت قالب اهورا رو اراعه می کنید لطفا امکانات زیادی اضافه کنید ممنون

    • تیم پشتیبانیتیم پشتیبانی۱۲ تیر ۱۴۰۰

      درود بر شما
      سعی میکنیم توی هر آپدیت امکاناتی که مد نظر کاربران هست رو اضافه کنیم تا جایی که ممکن هست. آخرین به روزرسانی ۹ تیر ماه بوده

گفتگو با تیم فروشسلام! دنبال پاسخ برای سوالات خود هستید؟ ما اینجا آماده کمک به شما هستیم...

در حال بارگذاری مقالات...

پشتیبانگفتگو با تیم فروش
پشتیبانگفتگو با تیم فروش در حال حاضر آفلاین هستیم. لطفاً پیام بگذارید تا در اولین فرصت پاسخ دهیم. آفلاین

در حال بارگذاری...

سوالی درباره محصولات سایت دارید؟از ما بپرسید.