بهینه سازی سایت برای موبایل

سال 2014 آغاز شده و نزدیک به یک ماه از آن میگذرد، مقایسه آمارها و پیش بینی های انجام شده نشان میدهد بهینه سازی سایت برای موبایل در این دوران به یکی از مهمترین فاکتورهای موفقیت تبدیل خواهد شد. چرا؟ در ادامه این مقاله به بررسی تاثیر تلفن های هوشمند و گجت ها در ادامه راه سئو در سال 2014 خواهیم پرداخت.

اهمیت توجه به تلفن های هوشمند

یک ایده اشتباه در میان برخی طراحان سایت و کارشناسان سئو وجود دارد که میگویند:

چیزی بعنوان بهینه سازی سایت برای موبایل وجود ندارد، زیرا مرورگرهای متناسب آنها و تکنولوژی های استفاده شده هر روز در حال تغییر هستند پس امکان بهینه سازی و سئو بر روی دستگاه های هوشمند نیست!

بهینه سازی سایت برای موبایل

سه دلیل اصلی جهت بهینه سازی سایت برای موبایل و تبلت میتوان ذکر کرد:

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

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

نظر گوگل درباره بهینه سازی سایت برای موبایل

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

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

پذیرایی مجزا یا Dynamic Serving روش پیشنهادی دوم از طرف گوگل برای بهینه سازی نسخه موبایل سایت است. در این روش کدهای HTML نمایش داده شده به کاربران با توجه به نوع دستگاه مورد استفاده تفاوت میکند و شما برای انجام این کار نیازمند کدنویسی های پیشرفته و متناسب در هدر سایت خود خواهید بود.

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

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

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

پاسخ‌گوی سوالات شما هستیم سوال شما توسط کارشناسان وبسیما پاسخ داده شده و از طریق پیامک اطلاع رسانی می‌شود
نام و نام خانوادگی نام و نام خانوادگی به فارسی
آدرس ایمیل sample@domain.com
تلفن همراه 09 XX XXX XXXX
متن نظر
ثبت دیدگاه
  • احسان
    05/10/2017

    سلام
    آیا در وردپرس برای بهینه سازی موبایل نیاز هست که ” فونت‌های بزرگ تری را برای مشاهده بهتر در نسخه موبایل استفاده کنیم” یا نه؟ (اگر جواب مثبت است چگونه این کار را انجام بدهیم؟)

    • وبسیما
      WEBSIMA
      09/10/2017

      به طور کلی پیشنهاد میشود که خوانایی سایت در نسخه های موبایل مورد توجه باشد زیرا گوگل به خوبی این موضوع را درک کرده و در تعیین جایگاه شما در نتایج موبایل تاثیر میدهد. برای انجام این کار نیاز به دانش CSS و آشنایی با دستورات آن دارید.

  • آموزش سخنرانی
    23/12/2016

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

    • وبسیما
      WEBSIMA
      23/12/2016

      سلام دوست عزیز
      خوشحالیم که مورد توجه شما قرار گرفته

  • سئو
    21/12/2016

    سلام.وبسایت خیلی خوبی دارید.ممنون

  • محسن
    14/08/2016

    سلام
    وقتی سایتم رو با woorank آنالیز میکنم، در بخش موبایل پیغام میده که فایل های جاوا و CSS بهینه نشده، در صورتی که تمام این فایلها مینیفای شده و مشکلی در خود فایل وجود نداره. سوالم اینجاست که چطوری میتونم برای موبایل هم بهینه سازی بکنم؟ لازم به ذکره که سایت ریسپانسیو هستش و از مدیا استفاده شده در استایل سایت.

    • وبسیما
      WEBSIMA
      14/08/2016

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

  • علی
    27/02/2016

    با سلام مجدد
    یک سوال دیگر : هر دستگاهی که عرضش از 980px کمتر باشه به نسخه موبایل ریدایرکت میشه. این مورد مشکلی نداره ؟
    یعنی شاید بعضی نوت بوک ها عرضشون کمتر از 980 پیکسله به نسخه موبایل برن که ریسپانسیو هست.
    سوال دیگه این که از کجا باید فهمید که گوگل نسخه دسکتاپ و موبایل رو مجزا نمیشناسه؟ تشکر

    • وبسیما
      WEBSIMA
      28/02/2016

      با سلام
      باید همونطور که در عرض کمتر از 980 نسخه دسکتاپ به موبایل منتقل میشه در بیشتر از آن نیز نسخه موبایل به دسکتاپ منتقل گردد. بهترین راه این است که شما از vary در http header خود استفاده کنید. برای اطلاعات بیشتر پیشنهاد میکنم مقاله Vary: User-Agent header را مطالعه کنید.

  • علی
    24/02/2016

    سلان
    من از 19 فوریه نسخه موبایل سایت رو راه اندازی کردم. به روش سوم ( m.example.com ) البته. می خوام اگه ممکنه دو نسخه دسکتاپ و موبایل رو بررسی کنید که مشکلی داره یا نه. یعنی درست ریدایرکت میشن؟
    بهتره 301 باشه یا 302 ریدایرکت ها ؟
    گوگل دو سایت می شناسه اونا رو یا خیر ؟
    ممنون میشم پاسخ بدید. تشکر

    • وبسیما
      WEBSIMA
      25/02/2016

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

  • مصطفی
    09/02/2015

    سلام ببینید این معیار خوبی است:
    اگر ما یک قالب داشته باشیم چهار ستونه مثلا اینطوری تقسیم بندی کنیم چطوره است؟
    از روزولوشن 1600 تا 1024 تمام گرید ها و ستون ها حفظ شوند.
    از روزولوشن 1024 تا 800 اولین ستون سمت چپ به پایین منتقل شود.
    و از روزولوشن 800 به پایین هم دو ستون سمت چپ پایین برود.
    یا نه ؟
    معیار با در نظر گرفتن روزولوشن به ما می فرمائید؟

    • وب سیما
      12/02/2015

      سلام
      بنظر خوب میاد ولی از 480 به پایین هم میتونید تک ستونه کنید. پیشنهاد میکنم از گریدبندی Bootstrap برداشت کنید

  • کانون مشاوران
    20/05/2014

    بسیار عالی بود

  • امین
    07/02/2014

    لطفا درباره قابلیت های بوت استرپ که می تونه در این زمینه کمک کنه آموزش هایی رو منتشر کنین !
    ممنون

    • وب سیما
      08/02/2014

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

  • مهدی
    07/02/2014

    واقعا عالی بود اما خوب در ایران هنوز صرف نمی کنه خیلی ها هنوز گوشی های هوشمند ندارنند.
    موفق باشید

    • وب سیما
      07/02/2014

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

  • طراحی وب سایت خبری
    29/01/2014

    سلام دستتون درد نکنه، خیلی جالب بود.

    • وب سیما
      29/01/2014

      سلام دوست عزیز، خواهش میکنم. موفق باشید

  • mohammad
    25/01/2014

    ممنون خیلی جالب بود
    من شخصا به اعتقاد نداشتم که افراد زیادی با گوشی کار کنند ولی این مطلب نظرم را عوض کرد

    • وب سیما
      26/01/2014

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

      • mohammad
        26/01/2014

        میشه یک آمارگیر خوب معرفی کنید
        ممنون میشم

        • وب سیما
          27/01/2014

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

  • حمیدرضا حیدری
    25/01/2014

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

    • وب سیما
      25/01/2014

      مرسی دوست عزیز، شما لطف دارید به وبسیما

  • حمیدرضا حیدری
    25/01/2014

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

    • وب سیما
      25/01/2014

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

  • مازندلیگ
    25/01/2014

    ممنون، خیلی مفید و جالب بود، فقط اگه میشه آموزش رسپانسیو رو با جزئیات بزارید

  • امین خادمیان
    25/01/2014

    این موضوع خیلی اهمیت داره , من به شخصه از طراحس ریسپانسیو بیشتر استفاده می کنم ! تکنولوژی Modernizr هم میتونه به این موضوع کمک کنه .
    آموزش این سه روشی رو که گفتین منتشر می کنین ؟ ( امیدوارم این طور باشه !! )

    • وب سیما
      25/01/2014

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

مشاهده همه